本文是筆者學習iOS動畫的一些小總結,接第一彈;
Layer Animation
第一彈中主要是關于View Animation 的一系列操作,今天的主角當然得是Layer啦,其實Layer Animation 工作并不復雜,我們只需要選擇一個是animatable
的屬性,然后設置開始值、結束值、動畫時間,之后系統就會讓Core Animation去對應的layer渲染,產生動畫效果。
CALayer
相比UIView有更多的animatable
的屬性,所以使用Layer Animation可以更好的寫出自己想要的動畫效果,同時CALayer
還有很多特定的子類,常見的如下所示:CAShapeLayer
, CATextLayer
, CAGradientLayer
, CAReplicatorLayer
….. 這些不同的子類,又包含不同的animatable
的屬性,所以根據特定的子類,可以簡單的寫出很酷炫的動畫。下面來看一個栗子:
let springMoveLeftAnimation = CABasicAnimation(keyPath: "position.x")
springMoveLeftAnimation.fromValue = -view.frame.width
springMoveLeftAnimation.toValue = view.frame.width / 2.0
springMoveLeftAnimation.duration = 0.7
springMoveLeftAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)
colorView.layer.add(springMoveLeftAnimation, forKey: nil)
上述栗子創建了一個springMoveLeftAnimation
,這個動畫對象是可以加到任意多個layer上去的,所以使用Layer Animation 創建的動畫是可以重復利用的。上述栗子中只是簡單的將一個view從左移動到屏幕中間。
真正的動畫
上栗中,我們在
colorView
的layer上增加了一個動畫,其實我們看到的動畫并不是真正作用在colorView
,我們看到的只是一個所謂的presentation layer
,當動畫結束后presentation layer
就會在屏幕中被移除,真正的colorView
重新顯示到屏幕上。
所以上栗中,colorView
的x
原本不是居中的,經過動畫后,colorView
的x
依然不是居中的,會移動到原本的位置。
所以想要colorView
的x
保持動畫后的模樣,我們可以設置如下代碼:
springMoveLeftAnimation.fillMode = kCAFillModeBoth
springMoveLeftAnimation.isRemovedOnCompletion = false
fillMode
fillMode
是CAMediaTiming
協議中一個屬性,用來控制動畫序列的開始和結束的行為,默認是kCAFillModeRemoved
,默認效果如下圖所示:
如果想要延時執行某個動畫,可以設置
beginTime
屬性
springMoveLeftAnimation.beginTime = CACurrentMediaTime() + 0.3
/// 根據CACurrentMediaTime()取得動畫執行的時間,然后我們增加了0.3秒的延時
- kCAFillModeBackwards
如圖所示,設置fillMode
為kCAFillModeBackwards
,不論是否設置延時,都會提前顯示動畫的第一幀。
- kCAFillModeForwards
如圖所示,設置
fillMode
為kCAFillModeForwards
,當動畫被移除之前會保留動畫的最后一幀。
- kCAFillModeBoth
如圖所示,設置
fillMode
為kCAFillModeBoth
,相當于是上面兩個屬性的結合。
當動畫結束后會保留最后一幀,然后設置isRemovedOnCompletion
為false
,所以動畫就不會被移除,這樣colorView
就能夠保持動畫后的模樣。但是現在因為不是真正的colorView
,所以就不能做任何操作了,當colorView
為輸入框時,此時因為是presentation layer
,也就不能響應用戶的輸入。而且這樣做也會有性能問題,所以不建議設置isRemovedOnCompletion
為false
。
此時還有一個有效的方法是,通常我們可以在colorView
加入動畫后,直接更新colorView
的x
,這樣在動畫結束后,colorView
的位置就保持和動畫后一致。
控制動畫
第一彈中我們通過
UIKit
幫我們封裝的UIView語法的動畫一旦創建運行,我們是不能暫停或者停止的。但是Layer Aniamtion提供了相關的API,讓我們可以更近一步的去控制我們所創建的動畫。
animation delegate
我們可以設置CAAnimation
的代理,通過代理提供的方法來控制動畫。
func animationDidStart(_ anim: CAAnimation)
func animationDidStop(_ anim: CAAnimation, finished flag: Bool)
CAAnimationDelegate
提供了上述兩個代理方法,通過提供的anim
參數從而可以控制動畫,但是如果多個動畫都設置了代理,這時如何區分不同的動畫做不同的事情呢?
因為CAAnimation
和其子類是用OC寫的,而且支持KVC,所以我們可以用func setValue(_ value: Any?, forKey key: String)
方法來設置不同key給不同的動畫,這樣在代理中就能區別不同的動畫了。
通過設置代理的方式我們只能控制剛開始和剛結束時期的動畫,那么如何控制正在運行的動畫呢,此時就需要用到func add(_ anim: CAAnimation, forKey key: String?)
方法中的key
參數,我們可以在該動畫開始后通過設置的key
參數來控制對應的動畫了。
open func removeAllAnimations()
open func removeAnimation(forKey key: String)
我們可以通過以上兩個方法來對操作正在運行的動畫,哈哈,只是簡單的移除??
并不能動態的改變動畫運行路徑。
我們可以設置動畫的
speed
屬性控制動畫速度,同時也可以通過設置layer的speed
屬性從而使layer上添加的所有動畫設置速度,此時如果layer里某個動畫自身也設置了速度,那么此時的速度會根據view的層級進行乘積;
組合動畫
我們可以在layer上添加多個動畫,如果想要控制不同動畫之間的同步,此時需要用到CAAnimationGroup
// added animation group
let groupAnimation = CAAnimationGroup()
groupAnimation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseIn)
groupAnimation.beginTime = CACurrentMediaTime() + 0.5
groupAnimation.duration = 0.5
groupAnimation.fillMode = kCAFillModeBackwards
let scaleDown = CABasicAnimation(keyPath: "transform.scale")
scaleDown.fromValue = 3.5
scaleDown.toValue = 1.0
let rotate = CABasicAnimation(keyPath: "transform.rotation")
rotate.fromValue = .pi / 4.0
rotate.toValue = 0.0
let fade = CABasicAnimation(keyPath: "opacity")
fade.fromValue = 0.0
fade.toValue = 1.0
groupAnimation.animations = [scaleDown, rotate, fade]
loginButton.layer.add(groupAnimation, forKey: nil)
基本的layer animation 差不多就是這些,可能不是面面俱到,但是其他的一些屬性,可以通過查看頭文件里的屬性即可,下面學習下layer animation里的spring animation;
彈性動畫
第一彈中我們就已經接觸過layer animation,但是UIKit幫我們封裝了,并沒有深入的了解其中的細節,所以在layer 層中的spring animation我們可以進一步的研究下spring animation 的細節。
首先我們想象下鐘擺,當我們給它一個力,此時如果沒有摩擦的話,那么鐘擺就會永遠的擺動,但是實際由于和空氣之間產生摩擦,所以鐘擺最后一定會停止。而且不同質量的鐘擺從運動到停止的時間是不一樣的,最后還和重力有關系,同樣的鐘擺在月球上的運動軌跡和地球是有很大的差距的。
其實鐘擺來回擺動的這個效果就是spring animation 的效果。此時我們可以根據上述總結出如下屬性是影響spring animation的:
1. damping: 摩擦相關, 默認是10.0
2. mass: 質量,默認是1.0
3. stiffness: 重力相關, 默認是100.0
4. initialVelocity: 初始速度,默認是0.0
上述的四個屬性就是CASpringAnimation
所提供的,其中damping
,initialVelocity
我們在UIKit提供的spring animation 中就已經使用過,UIKit會根據我們所給的duration
來計算出其他兩個屬性的,從而產生對應的spring animation,所以有時候會感覺有點不真實。但我們現在可以使用CASpringAnimation
所提供的四個屬性來創建自己想要的同時更加真實的spring animation, 但是這種方式的缺點是,時間是不確定的,因為spring animation 從開始到停止的時間是根據你所提供的四個影響參數來計算出的。
所以我們設置spring animation的
duration
時,需要使用spring animation的settlingDuration
屬性,這個時間就是根據你所提供的四個影響參數來計算出的;
let flash = CASpringAnimation(keyPath: "borderColor")
flash.damping = 7.0
flash.stiffness = 200.0
flash.fromValue = UIColor(red: 1.0, green: 0.27, blue: 0.0, alpha: 1.0).cgColor
flash.toValue = UIColor.white.cgColor
flash.duration = flash.settlingDuration
textField.layer.add(flash, forKey: nil)
上述代碼創建了一個spring animation 改變文本輸入框的borderColor
,要想做出自己想要的spring 動畫,只需要不斷的調整上述的四個屬性即可。
keyframe動畫
UIKit 也提供了keyframe animation,但是和layer層的keyframe animation 相比是有區別的。UIKit的keyframe animation,是用來做動畫的連接的,可以在animations中創建多個keyframe動畫,這些動畫可以是設置在不同的view的不同屬性。
之前我們設置在layer上的basic animation, 我們都會設置fromValue
和toValue
,通過設置的duration
,Core Animation會自動的根據設置的value在給定的時間內改變layer的某個屬性,于是動畫產生了,而layer的keyframe animation則提供了讓我們自己控制動畫某個屬性的過程的功能:
let flight = CAKeyframeAnimation(keyPath: "position")
flight.duration = 12.0
flight.values = [
CGPoint(x: -50, y: 0.0),
CGPoint(x: view.frame.width + 50.0, y: 160.0),
CGPoint(x: -50.0, y: loginButton.center.y)]
.map { NSValue(cgPoint: $0) }
flight.keyTimes = [0.0, 0.5, 1.0]
balloon.add(flight, forKey: nil)
如上代碼所示,我們通過values
,keyTimes
,自己可以控制動畫的運行軌跡。
當創建的layer animation的keyPath是結構體時,需要使用NSValue進行包裝;
Specialized Layers
前面所說的Layer Animation,我們都是為
CALayer
的一些基本屬性做動畫的,但是如果想要做出一些其他的酷炫的動畫,哪些基本的可能滿足不了要求,好在CALayer
有很多有用的子類,我們通過它們的屬性做動畫,效果就會大不一樣。
CAShapeLayer
CAShapeLayer
通過你傳入的path
讓vector graphics
來畫你所定義的的圖形。下面看個栗子:
let squarePath = UIBezierPath(rect: bounds)
let animation = CABasicAnimation(keyPath: "path")
animation.duration = 0.25
animation.fromValue = circleLayer.path
animation.toValue = squarePath.cgPath
circleLayer.add(animation, forKey: nil)
circleLayer.path = squarePath.cgPath
maskLayer.add(animation, forKey: nil)
maskLayer.path = squarePath.cgPath
和之前的layer animation一樣,同樣的設置fromValue
和 toValue
,不過這次animation 的keyPath為CAShapeLayer
的path
屬性。
CAShapeLayer
的strokeEnd
屬性同樣是animatable
,所以根據這個屬性可以做出一個畫的過程的動畫:
let pathAnimation = CABasicAnimation(keyPath: "strokeEnd")
pathAnimation.duration = 10.0
pathAnimation.fromValue = 0.0
pathAnimation.toValue = 1.0
pathLayer?.add(pathAnimation, forKey: "strokeEnd")
完整的Demo下載地址CAShapeLayerAnimationDemo
CAShapeLayer
還有一個功能就是設置圓角,只需要設置一個shapeLayer作為layer 的mask
屬性即可。
CAGradientLayer
CAGradientLayer
可以通過設置多種顏色畫出新的漸變的效果,而且CAGradientLayer
有四個屬性是animatable
的:
startPoint, endPoint 為單元坐標系
colors: 漸變效果的顏色數組;
locations: 每種顏色的在漸變中的占比;
startPoint: 開始的點;
endPoint: 結束的點;
iOS之前的滑動進行解鎖的動畫就可以使用CAGradientLayer
來實現:
完整的Demo下載地址CAGradientLayerAnimationDemo
CAReplicatorLayer
CAReplicatorLayer
通常用來生成重復layer的集合,這樣比手動添加效率更高。但是CAReplicatorLayer
可以輕松的改變每個克隆layer的屬性,讓他們和他們的父親不一樣。最后CAReplicatorLayer
有一個特別的屬性instanceDelay
,當你設置該屬性為0.1秒同時在原layer上加了一個動畫,此時CAReplicatorLayer
生成的第一份克隆會延遲0.1秒執行動畫,第二份克隆則會延遲0.2秒,第三份克隆則會延遲0.3秒,以此類推。通過這個特性我們可以寫出一些復雜的動畫效果。以下是CAReplicatorLayer
三個重要的屬性:
instanceCount: 設置你想要的克隆個數;
instanceTransform: 設置每個克隆和上一個克隆的差距;
instanceDelay: 設置每個克隆和上一個克隆的動畫延遲;
利用CAReplicatorLayer
上述特性,我們可以發揮想象做出一些酷炫的動畫,例如下面這個動畫:
完整的Demo下載地址CAReplicatorLayerAnimationDemo
最后
未完待續第三彈