SwiftUI如何实现加载页文本随动画自动循环切换内容

原有逻辑不生效是两个核心问题：

• withAnimation 的重复动画机制是针对可插值连续值（比如Logo旋转的0~360度角度值）做循环插值，不会重复执行闭包内的赋值语句。你写的textIndex += 1只会在页面首次加载时执行一次，把索引改成1之后就不会再变动，自然看不到轮播效果。
• 没有做索引边界处理，索引如果一直递增，超出数组长度后会直接触发下标越界崩溃。

用定时器定时更新文本索引是最稳定、兼容性最好的方案，支持iOS 13+，和你现有项目的适配性最高。

1. 先调整状态变量定义：

// 原有引导文本数组保留
@State var texts = ["Find the Apartment you like", "send an application", "we'll approve you in secs baby!"]
@State var textIndex: Int = 0
// 新增定时器托管对象，用于页面销毁时清理资源
@State private var textCarouselTimer: Timer?

2. 替换原有文本组件代码：

Text(texts[textIndex])
    .bold()
    .font(.title)
    // 配置文本切换时的淡入淡出过渡效果，避免硬切
    .transition(.opacity)
    .onAppear {
        // 启动2秒间隔的循环定时器，和你预期的单条文本展示时长一致
        textCarouselTimer = Timer.scheduledTimer(withTimeInterval: 2, repeats: true) { _ in
            // 用动画包裹索引更新，触发过渡效果
            withAnimation(.easeInOut(duration: 0.3)) {
                // 对索引做取模运算，到数组末尾自动回到开头，无限循环不越界
                textIndex = (textIndex + 1) % texts.count
            }
        }
    }
    .onDisappear {
        // 页面消失时销毁定时器，避免内存泄漏和无效执行
        textCarouselTimer?.invalidate()
        textCarouselTimer = nil
    }

如果你的项目最低支持iOS 15+，可以用TimelineView实现，不需要手动管理定时器生命周期，代码更简洁：

TimelineView(.periodic(from: .now, by: 2)) { context in
    let showIndex = Int(context.date.timeIntervalSince1970 / 2) % texts.count
    Text(texts[showIndex])
        .bold()
        .font(.title)
        .transition(.opacity)
        .id(showIndex) // 强制标记视图更新，触发过渡动画
}

如果想要更活泼的切换效果，可以替换默认的淡入淡出过渡，比如上下滑动+淡入淡出：

.transition(.asymmetric(
    insertion: .move(edge: .bottom).combined(with: .opacity),
    removal: .move(edge: .top).combined(with: .opacity)
))

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