从一个异常动画现象中了解【SwiftUI】的动画类型

众所周知，一旦状态值发生改变（使用了动画修改），相关的View就会触发过渡动画。

异常动画现象

jp_gif_file 3.GIF

把动画时长调慢一点可以看到：

jp_gif_file 4.GIF

这里只是修改了Button的标题，也就是里面的Text，但是在动画过程中，会出现两个Text！

Button的代码如下：

Button {
    withAnimation(.easeInOut(duration: 0.5)) {
        name = name == .none ? "迪丽热巴" : .none
    }
} label: {
    Text(name == .none ? "这是谁？" : "返回")
        .font(.title2)
        .frame(width: 100)
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.controlSize(.large)

明明改动的是同一个Text，为什么会有两个呢？

废话不多说，直接解释：这是因为Button中的Text“原本”的变形动画被替换成默认的转场动画了！至于为什么会被替换了呢？首先简单介绍一下SwiftUI的过渡动画类型：

转场动画

动画前后是两个不同的View时，会触发转场动画。

会有变化前后的两个View做转场动画（默认淡入淡出）：

变化前的View保持在初始位置，默认淡出（alpha 1 --> 0）
变化后的View直接在最终位置，默认淡入（alpha 0 --> 1）

触发场景：

@ViewBuilder中结构位置不一样的View：例如if {} else {}等控制语句返回不同的View
@ViewBuilder中结构位置一样但id不一样的View

变形动画

动画前后是同一个的View时（初始值或者其Modifier用到的状态值发生了变化），只要能通过计算得出的数值（位置、大小、角度等），就能触发变形动画。

但是，如果SwiftUI不知道怎么做变形动画，就会用默认的转场动画（淡入淡出）来代替！

很明显，文本变形是无法通过计算得出的（除非自定义动画，只是文本的变形轨迹很复杂）。

解决方案

由于SwiftUI不会做文本变形，因此Button中的Text“原本”的变形动画被替换成默认的转场动画，所以才会有两个Text淡入淡出。

虽说做不了文本变形，但除文本以外的变形动画（位置）SwiftUI还是能做的，只是系统默认会把其他能算的变形动画一起忽略掉了！

如何解决？只要告诉SwiftUI不要忽略其他的变形动画即可：

Button {
    withAnimation(.easeInOut(duration: 0.5)) {
        name = name == .none ? "迪丽热巴" : .none
    }
} label: {
    Text(name == .none ? "这是谁？" : "返回")
        .font(.title2)
        .frame(width: 100)
        // 如果不想要淡入淡出效果就加上这句（PS：要在`.transformEffect`前面移除）
        //.animation(.none, value: name) // 这样文字部分就会直接变化，不会有淡入淡出的效果
        .transformEffect(.identity) // 其他的变形效果给我补上！
}
.buttonStyle(.borderedProminent)
.buttonBorderShape(.capsule)
.controlSize(.large)

最终效果：

结论

当SwiftUI遇到不会的变形动画（例如文本变化），就会忽略掉这个View其他的变形动画，直接替换成默认的转场动画：动画前后的两个View分别淡入淡出的效果。

其他

@ViewBuilder中结构位置的注意点：

var body: some View {

    // 这种触发的是转场动画
    if name == .none {
        Color.red
    } else {
        Color.yellow
    }

    // 这种触发的是变形动画
    name == .none ? Color.red : Color.yellow
    
    // 变形动画 -转-> 转场动画：只要id不一样
    Text(name ?? "null")
        .font(.largeTitle)
        .bold()
        .id(name)
        // transition：自定义转场效果，在转场动画中才有效
        .transition(.scale)
        
}