SwiftUI 动画

在SwiftUI中，实现一个动画需要三个要素：

• 一个时序曲线算法
• 将状态（特定依赖性）同该时序曲线相关联的声明
• 一个依赖于该状态（特定依赖性）的可动画部件

隐式动画.animation(_:, value:)

隐式动画modifier定义：

// modifier 1
func animation<V>(_ animation: Animation?, value: V) -> some View where V : Equatable

// modifier 2
func animation<V>(_ animation: Animation?, @ViewBuilder body: (PlaceholderContentView<Self>) -> V) -> some View where V : View

隐式动画示例：

struct ImplicitAnimation: View {
    @State var isAnimated: Bool = false
    var body: some View {
        RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
            .fill(isAnimated ? Color.red : Color.green)
            .frame(
                width: isAnimated ? 100 : 300,
                height: isAnimated ? 100 : 300
            )
            .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
            .offset(y: isAnimated ? -200 : 0)
            .animation(
                .linear(duration: 1).repeatForever(autoreverses: true),
                value: isAnimated
            )
            .onTapGesture {
                isAnimated.toggle()
            }
    }
}

显式动画withAnimation()

withAnimation()是一个函数，在函数体的闭包里来改变状态值

函数定义：

func withAnimation<Result>(_ animation: Animation? = .default, _ body: () throws -> Result) rethrows -> Result

函数的第一个参数是动画类型，默认是default

函数的第二个参数是一个闭包，在闭包函数体内进行状态的改变

显式动画示例：

struct ExplicitAnimation: View {
    @State var isAnimated: Bool = false
    var body: some View {
        RoundedRectangle(cornerRadius: isAnimated ? 50 : 25)
            .fill(isAnimated ? Color.red : Color.green)
            .frame(
                width: isAnimated ? 100 : 300,
                height: isAnimated ? 100 : 300
            )
            .rotationEffect(Angle(degrees: isAnimated ? 360 : 0))
            .offset(y: isAnimated ? -200 : 0)
            .onTapGesture {
                withAnimation(Animation
                    .linear(duration: 1)
                    .repeatForever(autoreverses: true)) {
                        isAnimated.toggle()
                    }
            }
    }
}

SwiftUI内置动画

1、default：默认动画，系统根据情况选择合适的动画类型。

2、linear：线性动画，以恒定速度进行动画过渡。

3、easeIn：缓慢开始的动画，逐渐加速。

4、easeOut：缓慢结束的动画，逐渐减速。

5、easeInOut：缓慢开始和结束的动画，先加速后减速。

6、easeInOut(duration: Double)：缓慢开始和结束的动画，可以指定持续时间。

7、spring：弹簧动画，具有弹性效果