基本概念
1、什么是核心動畫
Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統或者在你開發的App中,都有大量應用。
核心動畫所在的位置如下圖所示:
可以看到,核心動畫位于UIKit的下一層,相比UIView動畫,它可以實現更復雜的動畫效果。
核心動畫作用在CALayer(Core animation layer)上,CALayer從概念上類似UIView,我們可以將UIView看成是一種特殊的CALayer(可以響應事件)。
實際上,每一個view都有其對應的layer,這個layer是root layer:
@property(nonatomic,readonly,strong) CALayer *layer;
給view加上動畫,本質上是對其layer進行操作,layer包含了各種支持動畫的屬性,動畫則包含了屬性變化的值、變化的速度、變化的時間等等,兩者結合產生動畫的過程。
核心動畫和UIView動畫的對比:UIView動畫可以看成是對核心動畫的封裝,和UIView動畫不同的是,通過核心動畫改變layer的狀態(比如position),動畫執行完畢后實際上是沒有改變的(表面上看起來已改變)。
總體來說核心動畫的優點有:
1)性能強大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果
2)接口易用,只需要少量的代碼就可以實現復雜的動畫效果。
3)運行在后臺線程中,在動畫過程中可以響應交互事件(UIView動畫默認動畫過程中不響應交互事件)。
2、核心動畫類的層次結構
CAAnimation是所有動畫對象的父類,實現CAMediaTiming協議,負責控制動畫的時間、速度和時間曲線等等,是一個抽象類,不能直接使用。
CAPropertyAnimation :是CAAnimation的子類,它支持動畫地顯示圖層的keyPath,一般不直接使用。
iOS9.0之后新增CASpringAnimation類,它實現彈簧效果的動畫,是CABasicAnimation的子類。
綜上,核心動畫類中可以直接使用的類有:
CABasicAnimation
CAKeyframeAnimation
CATransition
CAAnimationGroup
CASpringAnimation
3、核心動畫類的核心方法
1.初始化CAAnimation對象
一般使用animation方法生成實例
+ (instancetype)animation;
如果是CAPropertyAnimation的子類,還可以通過animationWithKeyPath生成實例
+ (instancetype)animationWithKeyPath:(nullable NSString *)path;
2.設置動畫的相關屬性
設置動畫的執行時間,執行曲線,keyPath的目標值,代理等等
3.動畫的添加和移除
調用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中,這樣動畫就開始執行了
- (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;
調用CALayer的removeAnimation方法停止CALayer中的動畫
- (void)removeAnimationForKey:(NSString *)key;
- (void)removeAllAnimations;
4、核心動畫類的常用屬性
keyPath:可以指定keyPath為CALayer的屬性值,并對它的值進行修改,以達到對應的動畫效果,需要注意的是部分屬性值是不支持動畫效果的。
以下是具有動畫效果的keyPath:
//CATransform3D Key Paths : (example)transform.rotation.z
//rotation.x
//rotation.y
//rotation.z
//rotation 旋轉
//scale.x
//scale.y
//scale.z
//scale 縮放
//translation.x
//translation.y
//translation.z
//translation 平移
//CGPoint Key Paths : (example)position.x
//x
//y
//CGRect Key Paths : (example)bounds.size.width
//origin.x
//origin.y
//origin
//size.width
//size.height
//size
//opacity
//backgroundColor
//cornerRadius
//borderWidth
//contents
//Shadow Key Path:
//shadowColor
//shadowOffset
//shadowOpacity
//shadowRadius
duration:動畫的持續時間
repeatCount:動畫的重復次數
timingFunction:動畫的時間節奏控制
timingFunctionName的enum值如下:
kCAMediaTimingFunctionLinear 勻速
kCAMediaTimingFunctionEaseIn 慢進
kCAMediaTimingFunctionEaseOut 慢出
kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
kCAMediaTimingFunctionDefault 默認值(慢進慢出)
fillMode:視圖在非Active時的行為
removedOnCompletion:動畫執行完畢后是否從圖層上移除,默認為YES(視圖會恢復到動畫前的狀態),可設置為NO(圖層保持動畫執行后的狀態,前提是fillMode設置為kCAFillModeForwards)
beginTime:動畫延遲執行時間(通過CACurrentMediaTime() + your time 設置)
delegate:代理
代理方法如下:
- (void)animationDidStart:(CAAnimation *)anim; //動畫開始
- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //動畫結束
CABasicAnimation
CABasicAnimation可以設定keyPath的起點,終點的值,動畫會沿著設定點進行移動,CABasicAnimation可以看成是只有兩個關鍵點的特殊的CAKeyFrameAnimation。
下面以改變視圖的position為例演示其使用:
- (void)position {
CABasicAnimation * ani = [CABasicAnimation animationWithKeyPath:@"position"];
ani.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"PostionAni"];
}
動畫效果:
下面是部分keyPath對應的動畫效果(圖片名為其對應的keyPath):
CAKeyframeAnimation
可以設定keyPath起點、中間關鍵點(不止一個)、終點的值,每一幀所對應的時間,動畫會沿著設定點進行移動。
CAKeyframeAnimation的重要屬性:
values:關鍵幀數組對象,里面每一個元素即為一個關鍵幀,動畫會在對應的時間段內,依次執行數組中每一個關鍵幀的動畫。
path:動畫路徑對象,可以指定一個路徑,在執行動畫時路徑會沿著路徑移動,Path在動畫中只會影響視圖的Position。
keyTimes:設置關鍵幀對應的時間點,范圍:0-1。如果沒有設置該屬性,則每一幀的時間平分。
下面以讓視圖繞圈為例演示其使用:
1、設置values使其沿正方形運動
- (void)valueKeyframeAni {
CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
ani.duration = 4.0;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
NSValue * value1 = [NSValue valueWithCGPoint:CGPointMake(150, 200)];
NSValue *value2=[NSValue valueWithCGPoint:CGPointMake(250, 200)];
NSValue *value3=[NSValue valueWithCGPoint:CGPointMake(250, 300)];
NSValue *value4=[NSValue valueWithCGPoint:CGPointMake(150, 300)];
NSValue *value5=[NSValue valueWithCGPoint:CGPointMake(150, 200)];
ani.values = @[value1, value2, value3, value4, value5];
[self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframeValueAni"];
}
動畫效果:
2、設置path使其繞圓圈運動
- (void)pathKeyframeAni {
CAKeyframeAnimation * ani = [CAKeyframeAnimation animationWithKeyPath:@"position"];
CGMutablePathRef path = CGPathCreateMutable();
CGPathAddEllipseInRect(path, NULL, CGRectMake(130, 200, 100, 100));
ani.path = path;
CGPathRelease(path);
ani.duration = 4.0;
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
[self.centerShow.layer addAnimation:ani forKey:@"PostionKeyframePathAni"];
}
動畫效果:
CATransition
轉場動畫,比UIVIew轉場動畫具有更多的動畫效果,比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現。
CAKeyframeAnimation的重要屬性:
type:過渡動畫的類型
type的enum值如下:
kCATransitionFade 漸變
kCATransitionMoveIn 覆蓋
kCATransitionPush 推出
kCATransitionReveal 揭開
還有一些私有動畫類型,效果很炫酷,不過不推薦使用。
私有動畫類型的值有:"cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"等等。
subtype: 過渡動畫的方向
subtype的enum值如下:
kCATransitionFromRight 從右邊
kCATransitionFromLeft 從左邊
kCATransitionFromTop 從頂部
kCATransitionFromBottom 從底部
以漸變效果為例
- (void)transitionAni {
CATransition * ani = [CATransition animation];
ani.type = kCATransitionFade;
ani.subtype = kCATransitionFromLeft;
ani.duration = 1.5;
self.centerShow.image = [UIImage imageNamed:@"Raffle"];
[self.centerShow.layer addAnimation:ani forKey:@"transitionAni"];
}
動畫效果:
以下是另外三種轉場類型的動畫效果(圖片名稱對應其type類型):
以下是部分私有轉場類型的動畫效果(圖片名稱對應其type類型):
CASpringAnimation
CASpringAnimation是iOS9新加入動畫類型,是CABasicAnimation的子類,用于實現彈簧動畫。
CASpringAnimation的重要屬性:
mass:質量(影響彈簧的慣性,質量越大,彈簧慣性越大,運動的幅度越大)
stiffness:彈性系數(彈性系數越大,彈簧的運動越快)
damping:阻尼系數(阻尼系數越大,彈簧的停止越快)
initialVelocity:初始速率(彈簧動畫的初始速度大小,彈簧運動的初始方向與初始速率的正負一致,若初始速率為0,表示忽略該屬性)
settlingDuration:結算時間(根據動畫參數估算彈簧開始運動到停止的時間,動畫設置的時間最好根據此時間來設置)
CASpringAnimation和UIView的SpringAnimation對比:
1.CASpringAnimation 可以設置更多影響彈簧動畫效果的屬性,可以實現更復雜的彈簧動畫效果,且可以和其他動畫組合。
2.UIView的SpringAnimation實際上就是通過CASpringAnimation來實現。
以實現視圖的bounds變化的彈簧動畫效果為例:
- (void)springAni {
CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
ani.mass = 10.0; //質量,影響圖層運動時的彈簧慣性,質量越大,彈簧拉伸和壓縮的幅度越大
ani.stiffness = 5000; //剛度系數(勁度系數/彈性系數),剛度系數越大,形變產生的力就越大,運動越快
ani.damping = 100.0;//阻尼系數,阻止彈簧伸縮的系數,阻尼系數越大,停止越快
ani.initialVelocity = 5.f;//初始速率,動畫視圖的初始速度大小;速率為正數時,速度方向與運動方向一致,速率為負數時,速度方向與運動方向相反
ani.duration = ani.settlingDuration;
ani.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
ani.removedOnCompletion = NO;
ani.fillMode = kCAFillModeForwards;
ani.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:ani forKey:@"boundsAni"];
}
動畫效果:
CAAnimationGroup
使用Group可以將多個動畫合并一起加入到層中,Group中所有動畫并發執行,可以方便地實現需要多種類型動畫的場景。
以實現視圖的position、bounds和opacity改變的組合動畫為例
- (void)groupAni {
CABasicAnimation * posAni = [CABasicAnimation animationWithKeyPath:@"position"];
posAni.toValue = [NSValue valueWithCGPoint:self.centerShow.center];
CABasicAnimation * opcAni = [CABasicAnimation animationWithKeyPath:@"opacity"];
opcAni.toValue = [NSNumber numberWithFloat:1.0];
opcAni.toValue = [NSNumber numberWithFloat:0.7];
CABasicAnimation * bodAni = [CABasicAnimation animationWithKeyPath:@"bounds"];
bodAni.toValue = [NSValue valueWithCGRect:self.centerShow.bounds];
CAAnimationGroup * groupAni = [CAAnimationGroup animation];
groupAni.animations = @[posAni, opcAni, bodAni];
groupAni.duration = 1.0;
groupAni.fillMode = kCAFillModeForwards;
groupAni.removedOnCompletion = NO;
groupAni.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
[self.cartCenter.layer addAnimation:groupAni forKey:@"groupAni"];
}
動畫效果:
CATransaction
最后講一下事務,在核心動畫里面存在事務(CATransaction)這樣一個概念,它負責協調多個動畫原子更新顯示操作。
簡單來說事務是核心動畫里面的一個基本的單元,動畫的產生必然伴隨著layer的Animatable屬性的變化,而layer屬性的變化必須屬于某一個事務。
因此,核心動畫依賴事務。
事務的作用:保證一個或多個layer的一個或多個屬性變化同時進行
事務分為隱式和顯式:
1.隱式:沒有明顯調用事務的方法,由系統自動生成事務。比如直接設置一個layer的position屬性,則會在當前線程自動生成一個事務,并在下一個runLoop中自動commit事務。
2.顯式:明顯調用事務的方法([CATransaction begin]和[CATransaction commit])。
CA事務的可設置屬性(會覆蓋隱式動畫的設置):
animationDuration:動畫時間
animationTimingFunction:動畫時間曲線
disableActions:是否關閉動畫
completionBlock:動畫執行完畢的回調
事務支持嵌套使用:當最外層的事務commit后動畫才會開始。
使用實例:
[CATransaction begin];
[CATransaction setAnimationDuration:2.0];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
// [CATransaction setDisableActions:YES]; //設置為YES就關閉動畫
self.subLayer.bounds = self.centerShow.layer.bounds;
[CATransaction commit];
注意:只有非root layer才有隱式動畫,如果你是直接設置self.cartCenter.layer.bounds = self.centerShow.layer.bounds;
是不會有動畫效果的。
本文demo地址:
https://github.com/DaMingShen/CAAnimation
Next
接下來將更新iOS繪圖引擎Quartz2D