SwiftUI实现文本跨屏滚动动画 文本无法完全移出屏幕求助

你当前的实现逻辑本身无法实现预期效果：给Text设置固定宽度100的frame后，切换alignment属性只会让文本在这100宽度的容器内部调整对齐位置，文本最多贴合容器的左右内边缘，永远无法跑出这个固定宽度的容器范围，自然做不到完全移出屏幕边界。

标准的横向穿屏滚动（跑马灯）效果要通过偏移位移动画实现，核心是让文本从容器右侧外部开始移动，到容器左侧外部结束，配合裁剪隐藏超出容器的内容，完整可运行代码如下：

import SwiftUI

struct CrossScreenScrollText: View {
    let text: String
    let scrollDuration: Double
    let containerWidth: CGFloat
    
    @State private var textActualWidth: CGFloat = 0
    @State private var isAnimating = false
    
    init(text: String, scrollDuration: Double = 5, containerWidth: CGFloat = UIScreen.main.bounds.width) {
        self.text = text
        self.scrollDuration = scrollDuration
        self.containerWidth = containerWidth
    }
    
    var body: some View {
        Text(text)
            .fixedSize()
            .background(
                GeometryReader { textGeo in
                    Color.clear
                        .onAppear {
                            textActualWidth = textGeo.size.width
                        }
                }
            )
            .offset(x: isAnimating ? -textActualWidth : containerWidth)
            .frame(width: containerWidth, alignment: .leading)
            .clipped()
            .onAppear {
                guard !isAnimating else { return }
                withAnimation(.linear(duration: scrollDuration).repeatForever(autoreverses: false)) {
                    isAnimating = true
                }
            }
    }
}

// 调用示例
struct DemoView: View {
    var body: some View {
        VStack {
            CrossScreenScrollText(text: "Some text to animate")
        }
    }
}

• 不要给滚动文本加固定宽度的frame限制移动范围，位移动画通过offset实现，才能让文本自由移动到容器边界外
• 必须添加.clipped()修饰符，否则文本移出容器范围后会覆盖在其他UI元素上
• 无限循环动画要设置autoreverses: false，否则文本移动到左侧后会反向回退，不符合股票类应用公告、行情滚动的常规交互逻辑
• 如果需要嵌入到非全屏宽度的容器中，只需要在初始化时传入对应容器的实际宽度即可，不需要写死屏幕宽度

内容的提问来源于stack exchange，提问作者Fritz