链式动画弄乱了方向变化

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 修饰符引入了 implicit 动画，该动画应用于其上方的 所有 动画视图修饰符，这可能会导致不希望的累积多个动画（然而当然，有时这正是我们所需要的）。

这里是固定部分。使用 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 !!
}

注意：你可以使用哪个动画来给出明确的价值。