SwiftUI 动画进阶 - part3: AnimatableModifier

发表于 3年以前 | 总阅读数：259 次

内容目录

AnimatableModifier 并不做动画，为什么？

动画化文本

动画化渐变

更多文本动画

发挥创造力

动画化文本颜色

与版本共舞

我们已经看到，Animatable 协议能够在动画化路径和矩阵变化时发挥作用。在系列文章的最后一部分，我们要更进一步。AnimatableModifier 是三者之中最强大的一个。有了它，几乎无所不能。

顾名思义，AnimatableModifier 是一个 ViewModifier，同时遵循 Animatable。如果你不知道 Animatable 和 animatableData 的工作机制，请先到系列文章的第一部分看看。

开始之前，我们稍作暂停，思考一下可动画化的 modifier 意味着什么...你会情不自禁地想，这也太好了吧，我居然能在动画过程中多次修改视图？这是真的吗？答案是肯定的。

AnimatableModifier 并不做动画，为什么？

如果你计划在生产环境的代码中使用 AnimatableModifier，请确保你阅读了最后一个段落：Dancing with Versions.

如果你是自己尝试的 AnimatableModifier，你很有可能会碰壁。我当然也是了。第一次用它的时候，我写了一个很简单的 animatable modifier，视图并没有做动画。我又试了几次，什么都没发生。因为那时候还在 beta 版本早期，我以为这个特性只是还没实现，所以就放弃。好在我后来又坚持尝试了。让我强调一下，“好在”。结果证明，我的第一个 modifier 就写对了，但容器内的 animatable modifier 是不生效的。而后来我再尝试时，animatable modifier 没有放在容器里。如果我不是凑巧遇到了，你可能读不到这篇文章。

举个例子，下面的 modifier 可以正常动画：

MyView().modifier(MyAnimatableModifier(value: flag ? 1 : 0))

但相同的 modifier 在 VStack 里是不管用的：

VStack {
    MyView().modifier(MyAnimatableModifier(value: flag ? 1 : 0))
}

倘若我们想让 animatable modifier 在 VStack 里也能工作，我们需要用到一点小手段：

VStack {
    Color.clear.overlay(MyView().modifier(MyAnimatableModifier(value: flag ? 1 : 0))).frame(width: 100, height: 100)
}

基本上，我们是用一个透明的视图占据实际视图的空间，然后把实际视图用 .overlay() 放在上面。这样做唯一的不便之处在于我们需要知道视图实际的大小，以便设置后面的透明视图的 frame。这一点有时候会很棘手。我们会在下面的例子中看到。

动画化文本

我们的第一个目标是让文本做动画。在例子中我们要实现一个加载指示器，它是一个带有标签的圆环。

我们的第一反应是用可动画化的路径。但是，它不能让我们动画化标签。因此，我们需要使用 AnimatableModifier：

完整的代码在 Example10，可以从文首的 gist 文件链接里找到：

struct PercentageIndicator: AnimatableModifier {
    var pct: CGFloat = 0

    var animatableData: CGFloat {
        get { pct }
        set { pct = newValue }
    }

    func body(content: Content) -> some View {
        content
            .overlay(ArcShape(pct: pct).foregroundColor(.red))
            .overlay(LabelView(pct: pct))
    }

    struct ArcShape: Shape {
        let pct: CGFloat

        func path(in rect: CGRect) -> Path {
            var p = Path()
            p.addArc(center: CGPoint(x: rect.width / 2.0, y:rect.height / 2.0),
                     radius: rect.height / 2.0 + 5.0,
                     startAngle: .degrees(0),
                     endAngle: .degrees(360.0 * Double(pct)), clockwise: false)
            return p.strokedPath(.init(lineWidth: 10, dash: [6, 3], dashPhase: 10))
        }
    }

    struct LabelView: View {
        let pct: CGFloat

        var body: some View {
            Text("\(Int(pct * 100)) %")
                .font(.largeTitle)
                .fontWeight(.bold)
                .foregroundColor(.white)
        }
    }
}

如你在例子中看到的，我们并不需要让 ArcShape 动画化。这没有必要，因为 modifier 本身就已经在通过不同的百分比多次创建形状，从而实现动画。

动画化渐变

如果你尝试过动画化渐变，你可能会发现一些限制。比如，你可以动画化起点和终点，但无法动画化渐变的颜色。这个时候我们也可以借助 AnimatableModifier：

这里的实现很简单，但是个很好的例子。为了插值中间的颜色，我们简单地取 RGB 值的平均值。注意，这里 modifier 假设颜色数组（from 和 to）都包含相同数量的颜色。

完整的代码在 Example11，可以从文首的 gist 文件链接中找到。

struct AnimatableGradient: AnimatableModifier {
    let from: [UIColor]
    let to: [UIColor]
    var pct: CGFloat = 0

    var animatableData: CGFloat {
        get { pct }
        set { pct = newValue }
    }

    func body(content: Content) -> some View {
        var gColors = [Color]()

        for i in 0..<from.count {
            gColors.append(colorMixer(c1: from[i], c2: to[i], pct: pct))
        }

        return RoundedRectangle(cornerRadius: 15)
            .fill(LinearGradient(gradient: Gradient(colors: gColors),
                                 startPoint: UnitPoint(x: 0, y: 0),
                                 endPoint: UnitPoint(x: 1, y: 1)))
            .frame(width: 200, height: 200)
    }

    // This is a very basic implementation of a color interpolation
    // between two values.
    func colorMixer(c1: UIColor, c2: UIColor, pct: CGFloat) -> Color {
        guard let cc1 = c1.cgColor.components else { return Color(c1) }
        guard let cc2 = c2.cgColor.components else { return Color(c1) }

        let r = (cc1[0] + (cc2[0] - cc1[0]) * pct)
        let g = (cc1[1] + (cc2[1] - cc1[1]) * pct)
        let b = (cc1[2] + (cc2[2] - cc1[2]) * pct)
        return Color(red: Double(r), green: Double(g), blue: Double(b))
    }
}

发挥创造力

在我们了解 AnimatableModifier 之前，下面的效果看起来是遥不可及，而我们的下一个挑战就是创建一个计数器：

这个练习的关键在于，每个数字要用到 5 个文本视图，然后向上或者向下移动它们，用到 .spring() 动画。我们还需要用到 .clipShape() modifier，以便隐藏掉超出边界的部分。为了更好地理解其中的工作原理，你可以注释掉 .clipShape()，这会相当程度地拖慢动画。完整的代码可以在 Example13，可以从文首的 gist 文件链接中找到：

struct MovingCounterModifier: AnimatableModifier {
        @State private var height: CGFloat = 0
        var number: Double

        var animatableData: Double {
            get { number }
            set { number = newValue }
        }

        func body(content: Content) -> some View {
            let n = self.number + 1

            let tOffset: CGFloat = getOffsetForTensDigit(n)
            let uOffset: CGFloat = getOffsetForUnitDigit(n)
            let u = [n - 2, n - 1, n + 0, n + 1, n + 2].map { getUnitDigit($0) }
            let x = getTensDigit(n)
            var t = [abs(x - 2), abs(x - 1), abs(x + 0), abs(x + 1), abs(x + 2)]
            t = t.map { getUnitDigit(Double($0)) }

            let font = Font.custom("Menlo", size: 34).bold()

            return HStack(alignment: .top, spacing: 0) {
                VStack {
                    Text("\(t[0])").font(font)
                    Text("\(t[1])").font(font)
                    Text("\(t[2])").font(font)
                    Text("\(t[3])").font(font)
                    Text("\(t[4])").font(font)
                }.foregroundColor(.green).modifier(ShiftEffect(pct: tOffset))

                VStack {
                    Text("\(u[0])").font(font)
                    Text("\(u[1])").font(font)
                    Text("\(u[2])").font(font)
                    Text("\(u[3])").font(font)
                    Text("\(u[4])").font(font)
                }.foregroundColor(.green).modifier(ShiftEffect(pct: uOffset))
            }
            .clipShape(ClipShape())
            .overlay(CounterBorder(height: $height))
            .background(CounterBackground(height: $height))
        }

        func getUnitDigit(_ number: Double) -> Int {
            return abs(Int(number) - ((Int(number) / 10) * 10))
        }

        func getTensDigit(_ number: Double) -> Int {
            return abs(Int(number) / 10)
        }

        func getOffsetForUnitDigit(_ number: Double) -> CGFloat {
            return 1 - CGFloat(number - Double(Int(number)))
        }

        func getOffsetForTensDigit(_ number: Double) -> CGFloat {
            if getUnitDigit(number) == 0 {
                return 1 - CGFloat(number - Double(Int(number)))
            } else {
                return 0
            }
        }
    }

动画化文本颜色

如果你曾经尝试过动画化 .foregroundColor()，你可能会注意到，它可以完美地工作，除了视图类型是文本的情况。我不知道这是否是一个 bug，或者缺失的功能。不过，假如你确实需要动画呈现文本的颜色变化，那可以用 AnimatableModifier 实现。

struct AnimatableColorText: View {
    let from: UIColor
    let to: UIColor
    let pct: CGFloat
    let text: () -> Text

    var body: some View {
        let textView = text()

        return textView.foregroundColor(Color.clear)
            .overlay(Color.clear.modifier(AnimatableColorTextModifier(from: from, to: to, pct: pct, text: textView)))
    }

    struct AnimatableColorTextModifier: AnimatableModifier {
        let from: UIColor
        let to: UIColor
        var pct: CGFloat
        let text: Text

        var animatableData: CGFloat {
            get { pct }
            set { pct = newValue }
        }
        func body(content: Content) -> some View {
            return text.foregroundColor(colorMixer(c1: from, c2: to, pct: pct))
        }

        // This is a very basic implementation of a color interpolation
        // between two values.
        func colorMixer(c1: UIColor, c2: UIColor, pct: CGFloat) -> Color {
            guard let cc1 = c1.cgColor.components else { return Color(c1) }
            guard let cc2 = c2.cgColor.components else { return Color(c1) }

            let r = (cc1[0] + (cc2[0] - cc1[0]) * pct)
            let g = (cc1[1] + (cc2[1] - cc1[1]) * pct)
            let b = (cc1[2] + (cc2[2] - cc1[2]) * pct)
            return Color(red: Double(r), green: Double(g), blue: Double(b))
        }
    }
}

与版本共舞

我们已经见识到 AnimatableModifier 的强大… 同时，也发现问题不少。最大的问题在于在某些 Xcode 和 iOS/macOS 的版本组合下，应用会一启动就崩溃。更糟糕的是，有些问题在编译和开发的时候不会出现，只有在发布的时候才出现。你可能花了很多时间开发和调试，并且以为岁月静好，然后到发布的时候，碰到像下面这样的糟心事：

dyld: Symbol not found: _$s7SwiftUI18AnimatableModifierPAAE13_makeViewList8modifier6inputs4bodyAA01_fG7OutputsVAA11_GraphValueVyxG_AA01_fG6InputsVAiA01_L0V_ANtctFZ
  Referenced from: /Applications/MyApp.app/Contents/MacOS/MyApp
  Expected in: /System/Library/Frameworks/SwiftUI.framework/Versions/A/SwiftUI

举个例子，如果应用通过 Xcode 11.3 发布的，并且在 macO 10.15.0 上执行，那么它可能出现 “Symbol not found” 的错误。不过，同一个可执行程序在 10.15.1 上又工作正常。

相反，如果我们是通过 Xcode 11.1 发布的应用，它是可以在所有的 macOS 版本上正常工作的（至少我尝试过的都没问题）。