SwiftUI 中的 Animation

原文：Animations in SwiftUI

26 Jun 2019

SwiftUI 创建了一种声明式的和简单明了的 UI 构建方式。我们介绍了 List、Form 组件和绑定。它们是的 SwiftUI 使用起来更简单和强大。今天，我们将介绍另一种 SwiftUI 特性：Animations。

Animation

在 SwiftUI 中，你可以将任意的改变过程封装进一个 withAnimation 块中。默认，SwiftUI 会对这种改变采用 fade in/out 的方式进行动画。来看个例子。

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Button(action: {
                withAnimation {
                    self.isButtonVisible.toggle()
                }
            }) {
                Text("Press me")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }
            }
        }
    }
}

在这个例子中，我们将状态改变动作封装到了 withAnimation 块中，以产生一个漂亮的 fade in 动画。通过指定 timing 和 spring 参数，你还可以修改动画的效果。也可以在要动画的 view 后面添加一个 animation 修饰符。

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Button(action: {
                self.isButtonVisible.toggle()
            }) {
                Text("Press me")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.animation(.easeInOut)
            }
        }
    }
}

在上面的例子中，通过直接添加一个 animation 修饰符达到了同样的效果。这里我们指定动画方式为 easeInOut，但你可以自己指定这个 animation 属性。

是有时候，存在多个视图依赖了同一个状态的情况，我们想对所有存在这种依赖的视图进行动画。在这种情况下，我们可以用 animatable 绑定。

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }
            }
        }
    }
}

如上所示，我们可以通过 animation 方法将我们的绑定变成 animatable 绑定。改方法可以将绑定值的每个变化放进一个 animation 块中。这个方法中，你可以指定动画参数。关于绑定，请阅读上一篇文章。

Transitions

我前面已经说过，SwiftUI 默认使用 fade in out 动画，但我们可以使用任意类型的动画。例如将 fade 动画替换成 moving 动画。

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.move(edge: .trailing))
            }
        }
    }
}

在上面的例子中，我们向视图传递了一个 transition 修饰符。SwiftUI 有许多现成的转场动画比如 move、slide、scale、offset、opacity 等等。可以将它们组合成单一动画。例如：

extension AnyTransition {
    static func moveAndScale(edge: Edge) -> AnyTransition {
        AnyTransition.move(edge: edge).combined(with: .scale())
    }
}

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.moveAndScale(edge: .trailing))
            }
        }
    }
}

我们创建了一个 moveAndScale 动画，它只是将 move 和 scale 动画捏在了一起。SwiftUI 会将你在动画方法中指定的时间值和 spring 参数均匀地应用到当前动画。

SwiftUI 也提供了构建非对称动画的方法。假设你想在插入时应用 move 动画，而在删除时应用 fade 动画。这时，可以使用 AnyTransition 结构中的 asymmetric 方法来构建非对称动画。

extension AnyTransition {
    static func moveOrFade(edge: Edge) -> AnyTransition {
        AnyTransition.asymmetric(
            insertion: .move(edge: edge),
            removal: .opacity
        )
    }
}

struct ContentView : View {
    @State private var isButtonVisible = true

    var body: some View {
        VStack {
            Toggle(isOn: $isButtonVisible.animation()) {
                Text("Show/Hide button")
            }

            if isButtonVisible {
                Button(action: {}) {
                    Text("Hidden Button")
                }.transition(.moveOrFade(edge: .trailing))
            }
        }
    }
}

看到了吗？我们向 asymmetric 方法传入了两个动画，一个用于插入操作时，一个用于删除操作时。

注意：我们也可以传入我们之前创建的组合动画。

结论

今天，我们讨论了 SwiftUI 中的许多动画方法。你可以根据需要来选用这些方法。随着对 SwiftUI 学习的不断深入，我觉得它确实是一个迷人的框架。请关注我的 Twitter，对本文有任何问题请问我。感谢您的阅读。下周再见。