SwiftUI 动画进阶 - part3: AnimatableModifier
内容目录
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))
}
}更多文本动画
在我们的下一个例子中，我们会再次动画化文本。不过在这个例子里，我打算循序渐进：一次动画一个字符。
平滑的渐进的缩放需要一点数学，但结果值得我们努力。完整的代码在 Example12，可以从文首的 gist 文件链接中找到。
struct WaveTextModifier: AnimatableModifier {
let text: String
let waveWidth: Int
var pct: Double
var size: CGFloat
var animatableData: Double {
get { pct }
set { pct = newValue }
}
func body(content: Content) -> some View {
HStack(spacing: 0) {
ForEach(Array(text.enumerated()), id: \.0) { (n, ch) in
Text(String(ch))
.font(Font.custom("Menlo", size: self.size).bold())
.scaleEffect(self.effect(self.pct, n, self.text.count, Double(self.waveWidth)))
}
}
}
func effect(_ pct: Double, _ n: Int, _ total: Int, _ waveWidth: Double) -> CGFloat {
let n = Double(n)
let total = Double(total)
return CGFloat(1 + valueInCurve(pct: pct, total: total, x: n/total, waveWidth: waveWidth))
}
func valueInCurve(pct: Double, total: Double, x: Double, waveWidth: Double) -> Double {
let chunk = waveWidth / total
let m = 1 / chunk
let offset = (chunk - (1 / total)) * pct
let lowerLimit = (pct - chunk) + offset
let upperLimit = (pct) + offset
guard x >= lowerLimit && x < upperLimit else { return 0 }
let angle = ((x - pct - offset) * m)*360-90
return (sin(angle.rad) + 1) / 2
}
}
extension Double {
var rad: Double { return self * .pi / 180 }
var deg: Double { return self * 180 / .pi }
}发挥创造力
在我们了解 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 版本上正常工作的（至少我尝试过的都没问题）。