### Basic Text and Card Marquee Examples Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Demonstrates basic usage of the Marquee view for text tickers and card carousels. Customize scroll speed and spacing. ```swift import SwiftUI struct TextTickerExample: View { var body: some View { VStack(spacing: 20) { // Basic text marquee at 60 pts/sec Marquee(targetVelocity: 60) { Text("Breaking News · SwiftUI is awesome · ") .font(.headline) .padding(.horizontal, 8) } // Card carousel with custom spacing at 40 pts/sec Marquee(targetVelocity: 40, spacing: 16) { ForEach(["Apple", "Google", "Meta", "Amazon"], id: \.self) { name in Text(name) .padding() .frame(width: 120, height: 60) .background(Color.blue.opacity(0.15)) .cornerRadius(12) } } } .padding(.vertical) } } ``` -------------------------------- ### MarqueeModel Animation Simulation Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Internal usage example demonstrating how MarqueeModel drives per-frame updates using elapsed time. Observe offset and velocity changes over simulated frames. ```swift // Demonstrating how MarqueeModel drives per-frame updates (internal usage) var model = MarqueeModel(targetVelocity: 60, spacing: 10) model.contentWidth = 400 // typically set by measureWidth(_:) model.previousTick = .now // Simulate three animation frames ~16 ms apart let frameDates: [Date] = [ .now.addingTimeInterval(0.016), .now.addingTimeInterval(0.032), .now.addingTimeInterval(0.048) ] for date in frameDates { model.tick(at: date) print("offset: \(model.offset), velocity: \(model.currentVelocity)") } // offset: -0.93, velocity: 2.88 // offset: -3.67, velocity: 8.19 // offset: -9.14, velocity: 16.6 ``` -------------------------------- ### Measure View Width Dynamically Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Use the `measureWidth` View extension to get the width of any view, useful for dynamic layouts and responsive design. ```swift struct WidthLogger: View { @State private var measuredWidth: CGFloat = 0 var body: some View { Text("Hello, World!") .padding() .background(Color.yellow) .measureWidth { width in measuredWidth = width print("View width: \(width)") // e.g. "View width: 218.5" } Text("Width: \(measuredWidth, specifier: \"%.1f\") pt") } } ``` ```swift HStack { content } .measureWidth { model.contentWidth = $0 } // content natural width ``` ```swift .measureWidth { containerWidth = $0 } // available display width ``` -------------------------------- ### Marquee Initializer with Custom Spacing Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Shows how to use the Marquee initializer with custom target velocity and spacing for different content types. Adjust spacing for visual separation. ```swift // Slow, wide-spaced logo strip Marquee(targetVelocity: 25, spacing: 32) { ForEach(logos, id: \.id) { logo in Image(logo.assetName) .resizable() .scaledToFit() .frame(width: 80, height: 40) } } ``` ```swift // Fast news ticker with no extra gap between repetitions Marquee(targetVelocity: 120, spacing: 0) { Text("LIVE · Markets up 2% · Fed holds rates · Oil falls · ") .font(.system(.caption, design: .monospaced)) .foregroundColor(.orange) } ``` -------------------------------- ### Marquee Initializer Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Initializes the `Marquee` view with a target scrolling velocity, optional spacing between content repetitions, and the content to be displayed. ```APIDOC ## Marquee.init(targetVelocity:spacing:content:) ### Description The designated initializer accepts a `targetVelocity` (points per second the content scrolls), an optional `spacing` between each repeated content instance (default `10`), and a `@ViewBuilder` closure supplying the content to scroll. These values are forwarded to `MarqueeModel` on creation and remain stable for the lifetime of the view. ### Parameters - **targetVelocity** (Double) - The desired scrolling speed in points per second. - **spacing** (Double, optional) - The gap between repeated instances of the content. Defaults to `10`. - **content** (@ViewBuilder () -> Content) - A closure that provides the view content to be scrolled. ### Usage Examples ```swift // Slow, wide-spaced logo strip Marquee(targetVelocity: 25, spacing: 32) { ForEach(logos, id: \.id) { logo in Image(logo.assetName) .resizable() .scaledToFit() .frame(width: 80, height: 40) } } // Fast news ticker with no extra gap between repetitions Marquee(targetVelocity: 120, spacing: 0) { Text("LIVE · Markets up 2% · Fed holds rates · Oil falls · ") .font(.system(.caption, design: .monospaced)) .foregroundColor(.orange) } ``` ``` -------------------------------- ### Calculate Extra Content Instances for Seamless Scrolling Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Determine the number of additional content copies needed to ensure a seamless loop, based on container and content dimensions. ```swift func extraContentInstances(containerWidth: CGFloat, contentWidth: CGFloat, spacing: CGFloat) -> Int { let contentPlusSpacing = contentWidth + spacing guard contentPlusSpacing != 0 else { return 1 } return Int((containerWidth / contentPlusSpacing).rounded(.up)) } ``` ```swift print(extraContentInstances(containerWidth: 390, contentWidth: 120, spacing: 10)) // Output: 3 ``` -------------------------------- ### Drive Marquee Animation Frame by Frame Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Use TimelineView to drive the `tick` function on every display refresh, advancing the scroll offset. ```swift TimelineView(.animation) { context in HStack(spacing: model.spacing) { /* content */ } .offset(x: model.offset) .onChange(of: context.date) { newDate in DispatchQueue.main.async { model.tick(at: newDate) // advances offset each frame } } } ``` -------------------------------- ### Handle User Drag Gestures for Marquee Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt Implement DragGesture to allow users to interact with the marquee, pausing automatic scrolling and following the finger. ```swift var dragGesture: some Gesture { DragGesture(minimumDistance: 0) .onChanged { value in model.dragChanged(value) // freeze auto-scroll, follow finger } .onEnded { value in model.dragEnded(value) // release finger, resume auto-scroll } } ``` ```swift someView.gesture(dragGesture) ``` -------------------------------- ### Marquee View Source: https://context7.com/nainamaharjan/marqueeswiftui/llms.txt The generic `Marquee` view scrolls any provided SwiftUI content horizontally in a continuous loop. It duplicates the content to create a seamless infinite-scroll effect and stretches to fill available horizontal space. ```APIDOC ## Marquee View ### Description A generic SwiftUI view that accepts any `@ViewBuilder` content and scrolls it horizontally in a continuous loop. The content block is duplicated enough times to fill the container width, creating a seamless infinite-scroll effect. The view stretches to fill all available horizontal space and aligns content to the leading edge. ### Usage Example ```swift import SwiftUI struct TextTickerExample: View { var body: some View { VStack(spacing: 20) { // Basic text marquee at 60 pts/sec Marquee(targetVelocity: 60) { Text("Breaking News · SwiftUI is awesome · ") .font(.headline) .padding(.horizontal, 8) } // Card carousel with custom spacing at 40 pts/sec Marquee(targetVelocity: 40, spacing: 16) { ForEach(["Apple", "Google", "Meta", "Amazon"], id: \.self) { name in Text(name) .padding() .frame(width: 120, height: 60) .background(Color.blue.opacity(0.15)) .cornerRadius(12) } } } .padding(.vertical) } } ``` ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.