高级 SwiftUI 动画 — Part 3：AnimatableModifier

头像
Swift社区
     上海
    阅读 10 分钟
    1

    前言

    之前的两篇文章animating paths 和 transform matrices 对 Animatable 协议使用做了介绍，今天这篇文章将为大家介绍 AnimatableModifier，使用它可以完成更多的动画工作。

    AnimatableModifier 是一个 ViewModifier，符合 Animatable 协议，如果对这个协议不了解可以阅读之前发布的两篇文章。

    AnimatableModifier 无法实现动画

    如果是第一次使用 AnimatableModifier，可能会遇到问题。写一个简单的动画，但是没有动画效果。 我又试了几次，也没有成功。因此我认为该功能不存并且放弃使用。幸运的是，后来我坚持了下来。事实证明，我的第一个 modifier 非常好，但是 animatable modifiers 在容器中不起作用。 我在第二次尝试时，动画视图不在容器内。

    例如，以下 modifier 可以成功实现动画：

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

    但是相同的代码，在 VStack 中就没有动画了：

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

    这个问题在官方解决之前，经过尝试，可以在 VStack 中改成下面的代码，就可以实现动画：

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

    这样写是使用一个透明视图占据实际视图空间，动画被放在透明视图上，使用 .overlay()。有点不方便的是，我们需要知道实际视图有多大，所以我们可以在它后面设置透明视图的框架。在下面的示例中可以开到实现代码。

    动画文本

    首先需要制作一些文字动画。对于这个例子，我们将创建一个进度加载指示器。

    可能很多人都认为应该使用动画路径实现。但是，内部标签就无法设置动画，使用 AnimatableModifier 可以实现。

    完整的代码作为 示例10 在文末链接中。关键代码如下：

    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 animatable 。 因为 modifier 已经多次创建形状，具有不同的 pct 值。

    动画渐变

    在实现渐变动画时，可能会遇到一些限制。比如，可以为起点和终点设置动画，但是不能为渐变颜色设置动画。使用 AnimatableModifier 可以避免出现这种情况。

    很容易就可以实现这个功能，在这个基础上可以实现更多复杂的动画。如果需要插入中间颜色，我们只需要计算 RGB 值的平均值。另外需要注意，modifier 假设输入颜色数组都包含相同数量的颜色。

    完整的代码作为 示例11 在文末链接中。关键代码如下：

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

    更多文本动画

    这个示例中，将再次实现一个文本动画。但是是逐步进行，一次放大一个字符

    完整的代码作为 示例12 在文末链接中。关键代码如下：

    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() 修饰符来隐藏在边框之外绘制的部分。 为了更好地理解它是如何工作的，您可以评论 .clipShape() 并大大减慢动画的速度。 完整代码在本页顶部链接的 gist 文件中以 Example13 的形式提供。

    这个动画实现的主要内容是每个数字使用 5 个文本视图，并使用 .spring() 动画上下移动它们。然后使用 .clipShape() 修饰符来隐藏边框之外区域。如果想跟清晰的理解他们是如何实现的，可以通过 .clipShape() 让动画速度变慢。

    完整的代码作为 示例13 在文末链接中。关键代码如下：

    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() 为动画添加颜色，但是在文本类动画中使用没有效果，不知道是缺少什么配置还是什么原因。我通过下面的方法实现给文本动画添加颜色。

    完整的代码作为 示例14 在文末链接中。关键代码如下：

    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 某些版本中，App 在启动时会崩溃。而且是在部署时，正常开发编译中是不会发生这种情况。

    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

    例如，如果 App 在 Xcode 11.3 上部署并在 macOS 10.15.0 上执行，就会出现 “Symbol not found” 错误。然而，在 macOS 10.15.1 上运行相同的可执行文件可以正常工作。

    关于我们

    Swift社区是由 Swift 爱好者共同维护的公益组织，我们在国内以微信公众号的运营为主，我们会分享以 Swift实战、SwiftUl、Swift基础为核心的技术内容，也整理收集优秀的学习资料。

    特别感谢 Swift社区 编辑部的每一位编辑，感谢大家的辛苦付出，为 Swift社区 提供优质内容，为 Swift 语言的发展贡献自己的力量。

    iosswiftobjective-cxcode动画
    Swift社区
    11.9k 声望3.8k 粉丝

    我们希望做一个最专业最权威的 Swift 中文社区，我们希望更多的人学习和使用Swift。我们会分享以 Swift 实战、SwiftUI、Swift 基础为核心的技术干货，欢迎您的关注与支持。

    « 上一篇
    Swift 周报 第七期
    下一篇 »
    Swift 周报 第八期

    引用和评论

    推荐阅读
    头像
    使用 AI 在医疗影像分析中的应用探索

    Swift社区赞 3

    头像
    苹果已提供新的设计资源 | Swift 周报 issue 32

    Swift社区赞 5阅读 653评论 2

    头像
    在 SwiftUI 中实战应用 ContentUnavailableView

    Swift社区赞 4阅读 612

    头像
    在 SwiftUI 中实战使用 MapKit API

    Swift社区赞 4阅读 592

    头像
    SwiftUI Release 引入的辅助焦点管理

    Swift社区赞 4阅读 463

    头像
    Swift 定制 Core Data 迁移

    Swift社区赞 3阅读 757

    头像
    如何使用 SwiftUI 构建 visionOS 应用

    Swift社区赞 3阅读 667评论 2

    0 条评论
    得票最新