SwiftUI中三元运算符设置动画时长失效问题求助

问题原因 #

原代码中，动画仅在onAppear阶段通过设置animationAmount = 2触发一次。后续切换animate属性时，虽然动画的duration配置已改变，但由于没有新的状态变化（animationAmount未更新）触发动画重新计算，新的时长设置被忽略。

修改方案 #

需要在切换animate的同时，重置动画状态并重新触发动画，让SwiftUI应用新的时长配置。以下是两种可行实现：

方式一：用withAnimation显式控制动画

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1
    @State private var animate: Bool = true

    var body: some View {
        Button("Tap Me") {
            animate.toggle()
            // 重置动画起始值，再用新时长启动循环动画
            animationAmount = 1
            withAnimation(Animation.easeOut(duration: animate ? 5 : 1).repeatForever(autoreverses: false)) {
                animationAmount = 2
            }
        }
        .padding(40)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(Color.red)
                .scaleEffect(animationAmount)
                .opacity(Double(2 - animationAmount))
            // 移除原animation修饰符，改用withAnimation显式控制
        )
        .onAppear {
            // 初始加载时启动5秒时长的动画
            withAnimation(Animation.easeOut(duration: 5).repeatForever(autoreverses: false)) {
                animationAmount = 2
            }
        }
    }
}

方式二：利用animation(_:value:)绑定触发条件

struct ContentView: View {
    @State private var animationAmount: CGFloat = 1
    @State private var animate: Bool = true

    var body: some View {
        Button("Tap Me") {
            animate.toggle()
            // 重置动画状态，触发新时长的动画重新启动
            animationAmount = 1
            DispatchQueue.main.async {
                animationAmount = 2
            }
        }
        .padding(40)
        .background(Color.red)
        .foregroundColor(.white)
        .clipShape(Circle())
        .overlay(
            Circle()
                .stroke(Color.red)
                .scaleEffect(animationAmount)
                .opacity(Double(2 - animationAmount))
                .animation(
                    Animation.easeOut(duration: animate ? 5 : 1)
                        .repeatForever(autoreverses: false),
                    value: animate // 绑定animate为触发条件，变化时自动应用新动画配置
                )
        )
        .onAppear {
            animationAmount = 2
        }
    }
}

关键改动说明 #

• 点击按钮时先重置animationAmount为初始值1，再设为目标值2，通过状态变化触发SwiftUI重新计算动画。
• 方式一通过withAnimation直接指定动画配置，逻辑更直观；方式二通过animation(_:value:)绑定animate，当animate变化时自动更新动画参数。

内容的提问来源于stack exchange，提问作者The Outstanding Question Asker