SwiftUI动画进阶 - Part3 AnimatableMo

文章源地址:https://swiftui-lab.com/swiftui-animations-part3/

作者: Javier

翻译: Liaoworking

我们已经知道了Animatable协议是如何帮助我们来让path做动画和变换矩阵,在本系列的最后一个部分，我们将更近一步。AnimatableModifier 是这三个工具中最强大的一个。有了它你就可以为所欲为了。

从命名上来看AnimatableModifier(可动修饰器)，这是一个遵循Animatable协议(第一节里讲的)视图修饰器，如果你不知道Animatable和animatableData 怎么工作的，可以回去第一节再看看。

现在可以先想想使用animatable modifier(可动修饰器)有什么作用，你可以通过它类多次修改你的视图来做动画。

The complete sample code for this article can be found at:
https://gist.github.com/swiftui-lab/e5901123101ffad6d39020cc7a810798

Example8 requires images from an Asset catalog. Download it from here:
https://swiftui-lab.com/?smd_process_download=1&download_id=916

AnimatableModifier为啥做不了动画了？

如果打算在生产环境使用AnimatableModifier，那你一定要阅读最后一节，和版本做斗争

如果你想要尝试一下协议，机会来了，你可能马上就要碰壁了。我之前已经尝试过了，我写了一个很简单的animatable modifier，但是视图并没有做动画，我又做了一些其他的尝试，还是不行，幸运的是 我坚持了一会，成功了。 先把这个幸运的是加粗。
我的第一个modifier很好，但是当它在容器内部的时候就不起作用了。。。 第二次起作用是因为我的视图不在容器内部，如果我一开始就很幸运，就不会写第三篇文章了。

例如下面这个modifier就可以很好的做动画

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

但是在VStack中，一样的代码就不会生效

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

那么如何在VStack中让animatable modifiers起作用呢？我们可以用下面这个取巧的方法：

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

先用一个透明的视图来占位，让后在透明的图上面使用.overlay()去添加实际的图。我们需要知道实际图的大小，来确定透明图的大小，这一点有时会会麻烦一些。

我把这个问题报告给苹果了，点击这里查询FB代码。你也可以试一试。

文字动画：

第一个例子是做一个加载指示器。

image

第一直觉告诉我应该使用animatable path，然而这个并不能让label做动画，那么用AnimatableModifier试试。

完整的代码在顶部的gist中的 Example10 可以找到。

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)
        }
    }
}

正如你再例子中所看到的，我们并没有让弧形动起来，这并不是必须的，因为modifier已经多次通过不同的百分比pct去创建图形了。

渐变动画

如果你想要让一个渐变层做动画。就好发现有很多限制，例如你可以从起点运动到终点，但是你不能让渐变色改变，但在AnimatableModifier中就可以实现：

image

实现起来比较简单，我们只需要计算RGB的平均值。不过要注意modifier 假定我们从头到尾每一个输入的颜色数组的count是相同的。

完整代码可以从文章顶部的gist的 Example11 中找到。

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))
    }
}

更多的文字动画

在我们下面的例子中我们将只一次只给一个字母做动画。

image

平滑的逐步缩放需要一些数学运算。如果写出来就乐在其中了。代码我放在了 文章顶部gist里的 Example12

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有所了解之前，下面的计数器可能有一点挑战性。

image

这个练习的取巧之处就每一列拿了五个数字竖向排列,并用了.spring()动画，我们还需要.clipShape()来隐藏边框外面的视图。可以把.clipShape() 注释掉和降低动画速度来更好的理解它的工作原理。完整代码在文章顶部gist里的 Example13 里。

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()做动画，就会发现开发者体验极好，完整代码在 Example14 中了。

image

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))
        }

    }
}

Dancing With Versions(和版本做斗争)

我们已经发现了AnimatableModifier很强大了，虽然也稍微有点bug。最大的问题是在一些具体的Xcode and iOS、macOS 版本下面应用会再启动的时候崩溃了，更严重的是在部署的时候更频繁。但是编译和在dev环境的时候就没事。以为会没啥问题，但在部署的时候去编译就会有下面的内容:

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

例如 Xcode11.3在macOS 10.15.0上执行就取法启动 并显示”找不到符号表“的错误，但在10.15.1上相同的文件就稳得一批。

相反，如果在Xcode11.1上去部署，就在所有的macOS版本上正常(至少我试过的版本)

iOS系统也会有类似的问题， Xcode 11.2打包使用AnimatableModifier的应用无法在iOS 13.2.2上启动，但在iOS 13.2.3上可以正常运行。

所以我暂时都是求稳用的Xcode11.1。以后可能会使用较新的版本，不过会把Mac系统版本提升到10.15.1(除非把这个bug修了，不过我深表怀疑。。)

总结和接下来要讲什么

我们已经看到了Animatable协议的简单使用。发挥您的创造力，会有很多炫酷的动画。

到此"SwiftUI 高级动画" 系列就全结束了，下面我会讲一些关于自定义转场的文字。也算是对这几篇文章做一个总结了。

可以在Twitter上关注我来确保获取更多的内容。 欢迎评论。如果你想有新的文章出来的时候收到提醒，下面有链接。
https://swiftui-lab.com/