SwiftUI：如何在第一个动画完成后运行另一个动画？

Question

我是

SwiftUI

（以及整个 iOS 开发）的新手。我了解到，要在

SwiftUI

中对视图进行动画处理，您可以执行以下操作：

MyView()
    .scaleEffect(scaleValue)
    .onAppear {
        scaleValue = anotherValue
    }
    .animation(.spring())

但我似乎无法弄清楚如何在该动画结束时监听，以便我可以触发一些其他事情，例如运行不同的动画或执行一些网络请求。

有人可以指导我吗？是否可以附加一个回调，以便我可以在动画结束时收到通知？

提前致谢。

Answer 1

据我所知，目前还没有直接的方法来制作一系列动画。这更像是一种解决方法，而不是实际的解决方案，但它有效，而且不太复杂。

假设你有一个变量

@State var animatedVariable

，当你想将动画应用到UI随着你的animatedVariable的变化而变化时，你可以说

withAnimation { animatedVariable = someNewValue }

。 现在，如果您想在第一个动画完成后执行另一个动画，您应该首先声明一个新变量：

@State var delayedAnimatedVariable

，您可以在任何您想要应用延迟动画的地方使用它。为了让它起作用，你最好不要直接设置

delayedAnimatedVariable

的值。相反，您应该监听

animatedVariable

的变化并使用延迟动画更改

delayedAnimatedVariable

的值。为此，您应该使用

.onChange

（可用 Xcode 12+）修饰符：

.onChange(of: animatedVariable) { newValueOfAnimatedVariable in
    withAnimation(Animation.default.delay(0.25)) {
        delayedAnimatedVariable = newValueOfAnimatedVariable
    }
}

示例：

struct AnimatedView: View {
    
    @State var animatedVariable = ""
    @State var delayedAnimatedVariable = ""
    
    var body: View {
        VStack {
            Button("Animated with delay!") {
                withAnimation {
                    animatedVariable = "someNewValue"
                }
            }
            
            // everything that uses `delayedAnimatedVariable` will have a delayed animation
            // Note there is nothing to be animated in this example!
            
        }
        .onChange(of: animatedVariable) { newValue in
            withAnimation(Animation.default.delay(0.25)) {
                delayedAnimatedVariable = newValue
            }
        }
    }
    
}

问题：为什么在

withAnimation(Animation.default.delay(0.25))

中你使用

0.25

而不是其他类似

0.5

或

0.3

或其他什么？！

答案：SwiftUI 动画通常默认为 0.25 秒的持续时间，因此如果您应用延迟 0.25 秒的第二个动画，它将在第一个动画之后立即发生。您当然可以根据您的需要更改该值（如果您不知道，您还可以定义动画的持续时间，就像 PS 一样）。