SwiftUI动画(1)之Animatable

SwiftUI搬运工 2020/6/29 23:27:25

相信大家都已经对SwiftUI有了基本的了解,在SwiftUI写动画,相对来说变得更加简单了,接下来,会用3篇文章,带领大家一览SwiftUI动画的魅力。 1. 显式和隐式动画 在SwiftUI中有两种类型的动画,显式和隐式。 隐式动画指的就是用animation()modifier的view,当该view的可动…

相信大家都已经对SwiftUI有了基本的了解,在SwiftUI写动画,相对来说变得更加简单了,接下来,会用3篇文章,带领大家一览SwiftUI动画的魅力。

1. 显式和隐式动画

在SwiftUI中有两种类型的动画,显式和隐式。

隐式动画指的就是用animation()modifier的view,当该view的可动画的参数变化的时候,系统会自动进行动画,这些所谓的可动画的参数包括size,offsetcolorscale等等。

显式动画指的是withAnimation { ... }闭包中指定的参数,所有依赖这些参数的view,都会执行动画。

我们先看个例子,下边的动画使用了隐式动画:

tower1.gif

代码如下:

struct Example1: View {
    @State private var half = false
    @State private var dim = false
    
    var body: some View {
        Image("tower")
            .scaleEffect(half ? 0.5 : 1.0)
            .opacity(dim ? 0.2 : 1.0)
            .animation(.easeInOut(duration: 1.0))
            .onTapGesture {
                self.dim.toggle()
                self.half.toggle()
            }
    }
}
复制代码

从上边的代码中,我们可以看出动画依赖half,dim这2个参数,我们并没有直接告诉view这2个参数要动画,系统会自动把旧值到新值的变化做动画。

我们把代码做一点简单的改变:

struct Example2: View {
    @State private var half = false
    @State private var dim = false
    
    var body: some View {
        Image("tower")
            .scaleEffect(half ? 0.5 : 1.0)
            .opacity(dim ? 0.5 : 1.0)
            .onTapGesture {
                self.half.toggle()
                
                withAnimation(.easeInOut(duration: 1.0)) {
                    self.dim.toggle()
                }
        }
    }
}
复制代码

我们去掉了.animation(.easeInOut(duration: 1.0)),新增了withAnimation闭包,我们把self.dim.toggle()放到闭包中,这就是显式的告诉系统,view的透明度要执行xxx动画,所有依赖dim参数的view,在dim改变的时候,都会执行动画,效果如下:

tower2.gif

仔细看上图的动画过程,就会发现,只有透明度指定了动画,缩放并没有执行动画,这就说明,我们显式的告诉系统dim需要动画,它就只为dim执行动画,非常的听话。

此时此刻,我有一个问题,我用隐式动画如何实现上边这种动画呢?也非常简单,先看代码:

struct Example2: View {
    @State private var half = false
    @State private var dim = false
    
    var body: some View {
        Image("tower")
            .opacity(dim ? 0.2 : 1.0)
            .animation(.easeInOut(duration: 1.0))
            .scaleEffect(half ? 0.5 : 1.0)
            .onTapGesture {
                self.dim.toggle()
                self.half.toggle()
        }
    }
}
复制代码

animationmodifier作用于view时,他的顺序时很重要的,在上边的代码中,它只对它前边的内容生效,当然这个顺序我们其实时可以任意调整的,我们要想使用隐式动画禁用某些动画时,只需要.animation(nil)就行了。

struct Example2: View {
    @State private var half = false
    @State private var dim = false
    
    var body: some View {
        Image("tower")
            .opacity(dim ? 0.2 : 1.0)
            .animation(nil)
            .scaleEffect(half ? 0.5 : 1.0)
      			.animation(.easeInOut(duration: 1.0))
            .onTapGesture {
                self.dim.toggle()
                self.half.toggle()
        }
    }
}
复制代码

2.How Do Animations Work

SwiftUI动画背后的原理在于Animatable协议,它要求我们实现一个计算属性animatableData,该属性遵守VectorArithmetic协议,VectorArithmetic的目的是让系统可以在需要变化的动画数据中间插入很多值,这些值的计算依赖动画的时间函数。

本质上,在SwiftUI中执行动画,就是系统渲染View很多次,每一次渲染,都改变一点点参数,当然,这个参数指的是需要动画的原值到终值。

举个例子,如果我们线性的把透明度从0.3改成0.8,由于0.3是Double类型,实现了VectorArithmetic协议,因此系统可以在0.3到0.8之间插入很对中间的值,这些值的计算依赖时间函数和动画时长。在本例中,它是线性的,系统在插值的时候的算法类似于下边的代码:

let from:Double = 0.3
let to:Double = 0.8

for i in 0..<6 {
    let pct = Double(i) / 5
    
    var difference = to - from
    difference.scale(by: pct)
    
    let currentOpacity = from + difference
    
    print("currentOpacity = \(currentOpacity)")
}
复制代码
currentOpacity = 0.3
currentOpacity = 0.4
currentOpacity = 0.5
currentOpacity = 0.6
currentOpacity = 0.7
currentOpacity = 0.8
复制代码

本质上,系统会为这些插入的值,都生成一个View,在duration的时间内把这些Views,播放出来,这就是我们看到的动画效果。

关于时间函数,我们用下边的这张图来举例, 这是一个图片的scale,也就是缩放效果,可以看到,不同的函数下,系统插入的值不同,根据插入值计算缩放后的图片也是不同的。

image.png

3. Why Do I Care About Animatable?

那么为什么我们需要如此关注Animatable这个协议呢? 像opacity,scale,这些系统自动会执行动画,完全不需要我们关心。

是的,像这些基本的效果,系统是知道该如何做动画的,但在平时的开发中,我们要做的动画往往不是这么简单,比如说,path的变换,渐变色的切换等等,这些例子会在后续的文章中都介绍到,其最核心的思想就是animatableData。大家继续阅读就是了。

4. Animating Shape Paths

这一小节,我们要做的事情就是利用Animatable来实现正多边形的绘制,类似下边这样:

polygons.png

上图中,只展示了正三边形和正四边形的例子,我们马上就会把它扩展到随意n边形。

在开始撸码之前,我们先简单介绍下实现该功能需要的一点三角函数的知识,我不会在这里做详细的介绍,更详细的可以点击这里。

有一个基本定理,在一个圆中,我们可以画出任何n正边形,这一点很重要,在画正边形之前,我们需要先确定该正边形外圆的半径,如下图:

heptagon-2.png

有了这个基本概念后,我们就可以动手来实现了:

heptagon-3.png

  • 圆点的位置我们已经知道,通常是图形的中心点
  • 半径很好计算,我们要绘制正边形的背景通常是正方形或者长方形,因此取最短边的一半作为半径比较合适
  • 正边形各个定点到圆点形成的夹角很好计算

有点圆点,夹角,半径,我们就能够确定每个定点的point,因此就能轻松画出正多边形的path。我们这些例子中的第一个顶点在圆心的正右方,并不是上图中对应的位置。

我们把上边的思想写成代码,如下:

struct PolygonShape: Shape {
    var sides: Int
    
    func path(in rect: CGRect) -> Path {        
        // hypotenuse
        let h = Double(min(rect.size.width, rect.size.height)) / 2.0
        
        // center
        let c = CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0)
        
        var path = Path()
                
        for i in 0..<sides {
            let angle = (Double(i) * (360.0 / Double(sides))) * Double.pi / 180

            // Calculate vertex position
            let pt = CGPoint(x: c.x + CGFloat(cos(angle) * h), y: c.y + CGFloat(sin(angle) * h))
            
            if i == 0 {
                path.move(to: pt) // move to first vertex
            } else {
                path.addLine(to: pt) // draw line to next vertex
            }
        }
        
        path.closeSubpath()
        
        return path
    }
}
复制代码

现在大家应该能够清楚的理解上边代码的实现方式了吧?用起来也很简单:

PolygonShape(sides: isSquare ? 4 : 3)
    .stroke(Color.blue, lineWidth: 3)
    .animation(.easeInOut(duration: duration))
复制代码

当我们改变siders的时候,你以为这么简单就能指定动画了? 还是太年轻了,实际效果为:

Kapture 2020-05-27 at 11.46.25.gif

原因很简单,系统不知道它该如何动画?它只知道在siders改变的时候,重新绘制图形,为了解决这个问题,我们需要做2件事情:

  • 需要把Int类型的siders改成Double类型,这样才能在其值改变的时候,往中间插入很多值
  • 通过animatableData告诉系统哪些值需要插值

幸运的是,Shape已经遵守了Animatable协议,因此,代码如下:

struct PolygonShape: Shape {
    var sides: Double

    var animatableData: Double {
        get { return sides }
        set { sides = newValue }
    }

    ...
}
复制代码

那么问题又来了,假设我们siders从3变为4,系统把siders分割成3.1, 3.2, 3.3... 3.9,4.0,这个时候我们应该如何根据这些数值来画路径呢?

看下核心代码:

    func path(in rect: CGRect) -> Path {
        
        // hypotenuse
        let h = Double(min(rect.size.width, rect.size.height)) / 2.0
        
        // center
        let c = CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0)
        
        var path = Path()
        
        let extra: Int = Double(sides) != Double(Int(sides)) ? 1 : 0
        
        for i in 0..<Int(sides) + extra {
            let angle = (Double(i) * (360.0 / Double(sides))) * Double.pi / 180
            
            // Calculate vertex
            let pt = CGPoint(x: c.x + CGFloat(cos(angle) * h), y: c.y + CGFloat(sin(angle) * h))
            
            if i == 0 {
                path.move(to: pt) // move to first vertex
            } else {
                path.addLine(to: pt) // draw line to next vertex
            }
        }
        
        path.closeSubpath()
        
        return path
    }
复制代码

let extra: Int = Double(sides) != Double(Int(sides)) ? 1 : 0这行代码保证了像3.4这样大于3的数能够画出4个顶点。

for i in 0..<Int(sides) + extra这里的循环,循环多少次就会产生多少的顶点,这一点很重要。

let angle = (Double(i) * (360.0 / Double(sides))) * Double.pi / 180,不管siders是多少,(360.0 / Double(sides))都是相同的值,也就是说,每次遍历旋转的角度是相同的。

SwiftUI角度旋转是顺时针方向的,水平x轴为0度。我们看下边几个截图:

3.2

上边这张图是siders等于3.2的时候,绘制的路径,我们在该图的基础上添加一些说明:

企业微信截图_13b017b0-c49e-4bd6-b08b-e10c7d504c8a_副本.png

绘图的顺序为1 > 2 > 3 > 4, 角1,角2, 角3是相同的,绘制这个图,for循环了4次,大家仔细想想,这里 角1,角2, 角3相加不等于360度是正常的。

很明显,假设当siders增大一点到3.4的时候,由于(360.0 / Double(sides))的原因,这时候角1,角2, 角3会变小一些,正好1和4之间的线段会增长一点。如下图:

企业微信截图_e42e83b5-6d66-4a28-8318-9ca413e1a62e.png

好了,我们已经分析的很详细了,大家如果还有不明白的地方,可以留言。只需要增加一点点代码就能动起来了“

struct Example1PolygonShape: Shape {
    var sides: Double
    
    var animatableData: Double {
        get { return sides }
        set { sides = newValue }
    }
    
    func path(in rect: CGRect) -> Path {
				...
    }
}
复制代码

Kapture 2020-05-27 at 19.13.26.gif

我们在上边的基础上再扩展一点东西出来,如果我想同时执行2种动画,那该如何呢? 其实非常简单。animatableData只要求set和get实现了VectorArithmetic协议的值就行,我们上边用到的Double就实现了,如果我们两同时执行2种动画,我们需要使用AnimatablePair<First, Second>.

很明显,它封装了2个参数,我们的代码就会变成这样:

struct PolygonShape: Shape {
    var sides: Double
    var scale: Double
    
    var animatableData: AnimatablePair<Double, Double> {
        get { AnimatablePair(sides, scale) }
        set {
            sides = newValue.first
            scale = newValue.second
        }
    }

    ...
}
复制代码

绘制路径的方法也只需要改一点点就可以了,利用scale计算半径:

  func path(in rect: CGRect) -> Path {
      let h = Double(min(rect.size.width, rect.size.height) / 2.0) * scale
      ...
  }
复制代码

如此简单,再看下效果:

Kapture 2020-05-28 at 17.44.41.gif

也许你现在有了一个新的疑问,如果我们同时执行超过两个动画,应该怎么办? 答案也同样很简单,

AnimatablePair<AnimatablePair<CGFloat, CGFloat>, AnimatablePair<CGFloat, CGFloat>>
复制代码

基于此方法,可以引申到n个值,在系统中CGPoint,CGSize和CGRect都可以执行动画,是因为他们都实现了Animatable协议。

extension CGPoint : Animatable {
    public typealias AnimatableData = AnimatablePair<CGFloat, CGFloat>
    public var animatableData: CGPoint.AnimatableData
}

extension CGSize : Animatable {
    public typealias AnimatableData = AnimatablePair<CGFloat, CGFloat>
    public var animatableData: CGSize.AnimatableData
}

extension CGRect : Animatable {
    public typealias AnimatableData = AnimatablePair<CGPoint.AnimatableData, CGSize.AnimatableData>
    public var animatableData: CGRect.AnimatableData
}
复制代码

在这一小节的最后,我们再看一个更加酷炫的效果:

Kapture 2020-05-28 at 18.28.53.gif

实现上边的的效果也很简单就是用上边的方法绘制完图形后,再让每个顶点分别同别的顶点连线,核心代码为函数drawVertexLines。代码如下:

  func path(in rect: CGRect) -> Path {
       	...
        
        drawVertexLines(path: &path, vertexs: vertex, n: 0)
        
        return path
    }
    
    func drawVertexLines(path: inout Path, vertexs: [CGPoint], n: Int) {
        if vertexs.count - n < 3 {
            return
        }
        
        for i in (n+2)..<min(n + vertexs.count - 1, vertexs.count) {
            path.move(to: vertexs[n])
            path.addLine(to: vertexs[i])
        }
        
        drawVertexLines(path: &path, vertexs: vertexs, n: n+1)
    }
复制代码

5.Making Your Own Type Animatable (with VectorArithmetic)

在上边的这些小节中,我们都使用了SwiftUI系统提供的数据结构,大部分情况下这些结构足矣,但我们还想在此基础之上,做出一些更加复杂的东西。

举个例子,我们们想使用我们自定义的struct来做动画,只要讲到动画,就离不开一个值从某一个值到另一个值的变化,我们这个例子就是时钟的一个动画,先看下最后的效果:

Kapture 2020-05-29 at 14.23.25.gif

要想描述某一刻的时间,我们需要3个属性,时,分,秒,因此我们需要把它们封装到一个结构体中,当需要切换时间的时候,直接在变化的两个结构体中间插值。

小提示:Angle, CGPoint, CGRect, CGSize, EdgeInsets, StrokeStyleUnitPoint,这些都实现了Animatable协议,AnimatablePair, CGFloat, Double, EmptyAnimatableDataFloat,这些都实现了VectorArithmetic协议。

我们先写ClockTime结构体,代码如下:

struct ClockTime {
    var hours: Int
    var minutes: Int
    var seconds: Double
    
    init(_ h: Int, _ m: Int, _ s: Double) {
        self.hours = h
        self.minutes = m
        self.seconds = s
    }
    
    init(_ seconds: Double) {
        let hours = Int(seconds) / 3600
        let minutes = (Int(seconds) - (hours * 3600)) / 60
        let seconds = seconds - Double(hours * 3600) - Double(minutes * 60)
        
        self.hours = hours
        self.minutes = minutes
        self.seconds = seconds
    }
    
    func asSeconds() -> Double {
        return Double(self.hours * 3600) + Double(self.minutes * 60) + self.seconds
    }
    
    func asString() -> String {
        return String(format: "%2i", self.hours) +
            " : " +
            String(format: "%02i", self.minutes) +
            " : " +
            String(format: "%02.0f", self.seconds)
    }
}
复制代码

这里的代码非常简单,就是初始化和一些函数,大家应该能够理解,如果要对ClockTime做加减法,其实都是对两个时间的总秒数做加减法。

我们让ClockTime实现VectorArithmetic协议:

extension ClockTime: VectorArithmetic {
    static func - (lhs: ClockTime, rhs: ClockTime) -> ClockTime {
        return ClockTime(lhs.asSeconds() - rhs.asSeconds())
    }
    
    static func + (lhs: ClockTime, rhs: ClockTime) -> ClockTime {
        return ClockTime(lhs.asSeconds() + rhs.asSeconds())
    }
    
    mutating func scale(by rhs: Double) {
        var s = Double(self.asSeconds())
        s.scale(by: rhs)
        
        let time = ClockTime(s)
        self.hours = time.hours
        self.minutes = time.minutes
        self.seconds = time.seconds
    }
    
    var magnitudeSquared: Double {
        1
    }
    
    static var zero: ClockTime {
        ClockTime(0, 0, 0)
    }
}
复制代码

其实,类似上边的代码,基本上算是固定写法,但可以发现一些新的想法,SwiftUI系统内部在做插值的时候,会用到VectorArithmetic协议中的方法。

关于图形绘制方面,还是上边的那一套,代码如下:

struct ClockShape: Shape {
    var time: ClockTime
    
    var animatableData: ClockTime {
        get {
            time
        }
        set {
            time = newValue
        }
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        
        let radius = min(rect.size.width / 2.0, rect.size.height / 2.0)
        let center = CGPoint(x: rect.size.width / 2.0, y: rect.size.height / 2.0)
        
        let hHypotenuse = Double(radius) * 0.5
        let mHypotenuse = Double(radius) * 0.6
        let sHypotenuse = Double(radius) * 0.8
        
        let hAngle: Angle = .degrees(Double(time.hours) / 12 * 360 - 90)
        let mAngle: Angle = .degrees(Double(time.minutes) / 60 * 360 - 90)
        let sAngle: Angle = .degrees(Double(time.seconds) / 60 * 360 - 90)
        
        let hoursNeedle = CGPoint(x: center.x + CGFloat(hHypotenuse * cos(hAngle.radians)), y: center.y + CGFloat(hHypotenuse * sin(hAngle.radians)))
        let minutesNeedle = CGPoint(x: center.x + CGFloat(mHypotenuse * cos(mAngle.radians)), y: center.y + CGFloat(mHypotenuse * sin(mAngle.radians)))
        let secondsNeedle = CGPoint(x: center.x + CGFloat(sHypotenuse * cos(sAngle.radians)), y: center.y + CGFloat(sHypotenuse * sin(sAngle.radians)))
        
        /// 画圆
        path.addArc(center: center, radius: radius,
                    startAngle: .degrees(0), endAngle: .degrees(360),
                    clockwise: true)
        
        /// 表盘刻度
        let numberLength: CGFloat = 5.0
        let numberPadding: CGFloat = 12.0
        let centerToNumber: CGFloat = radius - numberLength - numberPadding
        
        
        for i in 0..<12 {
            let angle: Angle = .degrees(360.0 / 12.0 * Double(i))

            let inPt = CGPoint(x: center.x + centerToNumber * CGFloat(cos(angle.radians)), y: center.y - centerToNumber * CGFloat(sin(angle.radians)))

            let outPt = CGPoint(x: center.x + (centerToNumber + numberLength) * CGFloat(cos(angle.radians)), y: center.y - (centerToNumber + numberLength) * CGFloat(sin(angle.radians)))

            path.move(to: inPt)
            path.addLine(to: outPt)
        }
        
        
        /// 时针
        path.move(to: center)
        path.addLine(to: hoursNeedle)
        path = path.strokedPath(StrokeStyle(lineWidth: 3, lineCap: .round))
        
        /// 分针
        path.move(to: center)
        path.addLine(to: minutesNeedle)
        path = path.strokedPath(StrokeStyle(lineWidth: 3, lineCap: .round))
        
        /// 秒针
        path.move(to: center)
        path.addLine(to: secondsNeedle)
        path = path.strokedPath(StrokeStyle(lineWidth: 1, lineCap: .round))

        return path
    }
}
复制代码

6.SwiftUI + Metal

如果我们想在SwiftUI中实现特别复杂的动画,并在真机上运行,可能会发现,动画不一定那么流畅,这种情况比较适合开启Metal,开启Metal非常简单,代码如下:

FlowerView().drawingGroup()
复制代码

According to WWDC 2019, Session 237 (Building Custom Views with SwiftUI): A drawing group is a special way of rendering but only for things like graphics. It will basically flatten the SwiftUI view into a single NSView/UIView and render it with metal. Jump the WWDC video to 37:27 for a little more detail.

Kapture 2020-05-29 at 14.36.12.gif

可以看下上图的效果,开启了Metal后流畅了很多。至于代码,我们这里就不粘贴了,大家可以去原作者网站去看,上图中整个图形是旋转的,但是花瓣并没有做额外的旋转,而是控制了绘制花瓣的宽度来实现的,这有助于大家理解代码。

总结

SwiftUI动画的本质就是插值,凡是实现了Animatable协议的对象,系统就知道如何执行动画,这是一个核心思想。

*注:上边的内容参考了网站https://swiftui-lab.com/swiftui-animations-part1/,如有侵权,立即删除。

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[SwiftUI动画(1)之Animatable]http://www.zyiz.net/tech/detail-141532.html

上一篇:OC底层-Block本质(二、变量捕获)

下一篇:iOS-内存管理-理论实践1

赞(0)

共有 条评论 网友评论

验证码: 看不清楚?
    关注微信小程序
    程序员编程王-随时随地学编程

    扫描二维码或查找【程序员编程王】

    可以随时随地学编程啦!

    技术文章导航 更多>
    扫一扫关注最新编程教程