swift - 链式动画扰乱了方向变化

Question

当我改变方向时，闪烁的 SF 符号开始上下移动。向上和向下动画应该只实现一次(在外观上)。我尝试过使用verticalSizeClass，但是这没有帮助。

工作原理:在外观上，文本和 SF 符号向上移动，然后 Sparkle SF 符号向上和向下缩放。

这是它在方向改变时的外观和行为:

struct ContentView: View {
    @State private var offsetY: CGFloat = 150
    @State private var opacityAmount: Double = 0
    @State private var animationAmount: CGFloat = 1
    
    var body: some View {
        VStack {
            HStack {
                Image(systemName: "sparkle").foregroundColor(.yellow)
                    .offset(y: offsetY)
                    .opacity(opacityAmount)
                    .animation(
                        Animation.easeOut(duration: 0.5).delay(0.1)
                    )
                    .scaleEffect(animationAmount)
                    .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true))
                Text("All new design").font(.largeTitle)
                    .offset(y: offsetY)
                    .opacity(opacityAmount)
                    .animation(
                        Animation.easeOut(duration: 0.5).delay(0.1)
                    )
            }
            .onAppear {
                offsetY = 0
                opacityAmount = 0.8
                animationAmount = 2
            }
        }
    }
}

Answer 1

您没有根据我之前的答案改编动画值连接，并观察其结果。

这是因为 .animation 修饰符引入了隐式动画，该动画应用于其上方的所有可动画 View 修饰符，最终可能会出现不需要的累积多个动画(当然，有时这正是需要的)。

这是固定部分。使用 Xcode 12/iOS 14 进行测试

HStack {
    Image(systemName: "sparkle").foregroundColor(.yellow)
        .offset(y: offsetY)
        .opacity(opacityAmount)
        .animation(
            Animation.easeOut(duration: 0.5).delay(0.1)
        , value: opacityAmount)                     // << here !!
        .scaleEffect(animationAmount)
        .animation(Animation.easeInOut(duration: 1).repeatForever(autoreverses: true),
            value: animationAmount)                // << here !!
    Text("All new design").font(.largeTitle)
        .offset(y: offsetY)
        .opacity(opacityAmount)
        .animation(
            Animation.easeOut(duration: 0.5).delay(0.1)
        , value: opacityAmount)                           // << here !!
}

注意:您可以使用哪个动画来赋予或不赋予显式值。