Core Animation(核心動畫)

1、什么是核心動畫

Core Animation(核心動畫)可以用在Mac OS X和iOS平臺, 是一組功能強大、效果華麗的動畫API,無論在iOS系統或者在你開發(fā)的App中,都有大量應用。

核心動畫所在的位置如下圖所示:


1644426-330ae214a7101048.png

可以看到,核心動畫位于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的狀態(tài)(比如position),動畫執(zhí)行完畢后實際上是沒有改變的(表面上看起來已改變)。

總體來說核心動畫的優(yōu)點有:

  • 性能強大,使用硬件加速,可以同時向多個圖層添加不同的動畫效果
  • 接口易用,只需要少量的代碼就可以實現復雜的動畫效果
  • 運行在后臺線程中,在動畫過程中可以響應交互事件(UIView動畫默認動畫過程中不響應交互事件)。
2、核心動畫類的層次結構
1644426-7d5b97696b996ed5.png

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.設置動畫的相關屬性
設置動畫的執(zhí)行時間,執(zhí)行曲線,keyPath的目標值,代理等等

3.動畫的添加和移除
調用CALayer的addAnimation:forKey:方法將動畫添加到CALayer中,這樣動畫就開始執(zhí)行了

- (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:動畫的持續(xù)時間

repeatCount:動畫的重復次數

timingFunction:動畫的時間節(jié)奏控制

 timingFunctionName的enum值如下:
     kCAMediaTimingFunctionLinear 勻速
     kCAMediaTimingFunctionEaseIn 慢進
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢進慢出
     kCAMediaTimingFunctionDefault 默認值(慢進慢出)

fillMode:視圖在非Active時的行為

removedOnCompletion:動畫執(zhí)行完畢后是否從圖層上移除,默認為YES(視圖會恢復到動畫前的狀態(tài)),可設置為NO(圖層保持動畫執(zhí)行后的狀態(tài),前提是fillMode設置為kCAFillModeForwards)

beginTime:動畫延遲執(zhí)行時間(通過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"];
}
1644426-e376a4199763c39a.gif
CAKeyframeAnimation

可以設定keyPath起點、中間關鍵點(不止一個)、終點的值,每一幀所對應的時間,動畫會沿著設定點進行移動。

CAKeyframeAnimation的重要屬性:

values:關鍵幀數組對象,里面每一個元素即為一個關鍵幀,動畫會在對應的時間段內,依次執(zhí)行數組中每一個關鍵幀的動畫。

path:動畫路徑對象,可以指定一個路徑,在執(zhí)行動畫時路徑會沿著路徑移動,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"];
}
1644426-870c4f1a7da41532.gif

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"];
}
1644426-ae84aa8ce2d54925.gif
CATransition

轉場動畫,比UIVIew轉場動畫具有更多的動畫效果,比如Nav的默認Push視圖的效果就是通過CATransition的kCATransitionPush類型來實現。

CATransition的重要屬性:

type:過渡動畫的類型

 type的enum值如下:
    kCATransitionFade 漸變
    kCATransitionMoveIn 覆蓋
    kCATransitionPush 推出
    kCATransitionReveal 揭開

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"];
}
1644426-c6c0bc393093bb31.gif
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"];
}
1644426-b738557ab9ca1201.gif
CAAnimationGroup

使用Group可以將多個動畫合并一起加入到層中,Group中所有動畫并發(fā)執(zhí)行,可以方便地實現需要多種類型動畫的場景。

以實現視圖的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"];
}
1644426-b738557ab9ca1201.gif
CATransaction

最后講一下事務,在核心動畫里面存在事務(CATransaction)這樣一個概念,它負責協調多個動畫原子更新顯示操作。

簡單來說事務是核心動畫里面的一個基本的單元,動畫的產生必然伴隨著layer的Animatable屬性的變化,而layer屬性的變化必須屬于某一個事務。

因此,核心動畫依賴事務。

事務的作用:保證一個或多個layer的一個或多個屬性變化同時進行

事務分為隱式和顯式:

1.隱式:沒有明顯調用事務的方法,由系統自動生成事務。比如直接設置一個layer的position屬性,則會在當前線程自動生成一個事務,并在下一個runLoop中自動commit事務。

2.顯式:明顯調用事務的方法([CATransaction begin]和[CATransaction commit])。

CA事務的可設置屬性(會覆蓋隱式動畫的設置):

animationDuration:動畫時間
    animationTimingFunction:動畫時間曲線
    disableActions:是否關閉動畫
    completionBlock:動畫執(zhí)行完畢的回調

原文鏈接:http://www.itdecent.cn/p/d05d19f70bac

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容