iOS CABasicAnimation

1、什么是核心動(dòng)畫

Core Animation(核心動(dòng)畫)是一組功能強(qiáng)大、效果華麗的動(dòng)畫API，無論在iOS系統(tǒng)或者在你開發(fā)的App中，都有大量應(yīng)用。
　　核心動(dòng)畫所在的位置如下圖所示：


CoreAnimation.png

可以看到，核心動(dòng)畫位于UIKit的下一層，相比UIView動(dòng)畫，它可以實(shí)現(xiàn)更復(fù)雜的動(dòng)畫效果。

核心動(dòng)畫作用在CALayer（Core animation layer）上，CALayer從概念上類似UIView，我們可以將UIView看成是一種特殊的CALayer（可以響應(yīng)事件）。
　　實(shí)際上，每一個(gè)view都有其對(duì)應(yīng)的layer，這個(gè)layer是root layer：

 @property(nonatomic,readonly,strong)                 CALayer  *layer;

    給view加上動(dòng)畫，本質(zhì)上是對(duì)其layer進(jìn)行操作，layer包含了各種支持動(dòng)畫的屬性，動(dòng)畫則包含了屬性變化的值、變化的速度、變化的時(shí)間等等，兩者結(jié)合產(chǎn)生動(dòng)畫的過程。
    核心動(dòng)畫和UIView動(dòng)畫的對(duì)比：UIView動(dòng)畫可以看成是對(duì)核心動(dòng)畫的封裝，和UIView動(dòng)畫不同的是，通過核心動(dòng)畫改變layer的狀態(tài)（比如position），動(dòng)畫執(zhí)行完畢后實(shí)際上是沒有改變的（表面上看起來已改變）。

總體來說核心動(dòng)畫的優(yōu)點(diǎn)有：

1）性能強(qiáng)大，使用硬件加速，可以同時(shí)向多個(gè)圖層添加不同的動(dòng)畫效果
　　2）接口易用，只需要少量的代碼就可以實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。
　　3）運(yùn)行在后臺(tái)線程中，在動(dòng)畫過程中可以響應(yīng)交互事件（UIView動(dòng)畫默認(rèn)動(dòng)畫過程中不響應(yīng)交互事件）。

2、核心動(dòng)畫類的層次結(jié)構(gòu)

CoreAnimationclassesandprotocol.png

CAAnimation是所有動(dòng)畫對(duì)象的父類，實(shí)現(xiàn)CAMediaTiming協(xié)議，負(fù)責(zé)控制動(dòng)畫的時(shí)間、速度和時(shí)間曲線等等，是一個(gè)抽象類，不能直接使用。
　　CAPropertyAnimation ：是CAAnimation的子類，它支持動(dòng)畫地顯示圖層的keyPath，一般不直接使用。
　　iOS9.0之后新增CASpringAnimation類，它實(shí)現(xiàn)彈簧效果的動(dòng)畫，是CABasicAnimation的子類。

綜上，核心動(dòng)畫類中可以直接使用的類有：

    CABasicAnimation

CAKeyframeAnimation
　　CATransition
　　CAAnimationGroup
　　CASpringAnimation

３、核心動(dòng)畫類的核心方法

1.初始化CAAnimation對(duì)象
　　一般使用animation方法生成實(shí)例

 + (instancetype)animation;

如果是CAPropertyAnimation的子類，還可以通過animationWithKeyPath生成實(shí)例

 + (instancetype)animationWithKeyPath:(nullable NSString *)path;

2.設(shè)置動(dòng)畫的相關(guān)屬性
　　設(shè)置動(dòng)畫的執(zhí)行時(shí)間，執(zhí)行曲線，keyPath的目標(biāo)值，代理等

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

 - (void)addAnimation:(CAAnimation *)anim forKey:(nullable NSString *)key;

調(diào)用CALayer的removeAnimation方法停止CALayer中的動(dòng)畫

 - (void)removeAnimationForKey:(NSString *)key;
     - (void)removeAllAnimations;

４、核心動(dòng)畫類的常用屬性

keyPath：可以指定keyPath為CALayer的屬性值，并對(duì)它的值進(jìn)行修改，以達(dá)到對(duì)應(yīng)的動(dòng)畫效果，需要注意的是部分屬性值是不支持動(dòng)畫效果的。
　　以下是具有動(dòng)畫效果的keyPath：

//CATransform3D Key Paths : (example)transform.rotation.z
     //rotation.x
     //rotation.y
     //rotation.z
     //rotation 旋轉(zhuǎn)
     //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：動(dòng)畫的持續(xù)時(shí)間
repeatCount：動(dòng)畫的重復(fù)次數(shù)
timingFunction：動(dòng)畫的時(shí)間節(jié)奏控制

    timingFunctionName的enum值如下：
     kCAMediaTimingFunctionLinear 勻速
     kCAMediaTimingFunctionEaseIn 慢進(jìn)
     kCAMediaTimingFunctionEaseOut 慢出
     kCAMediaTimingFunctionEaseInEaseOut 慢進(jìn)慢出
     kCAMediaTimingFunctionDefault 默認(rèn)值（慢進(jìn)慢出）

fillMode：視圖在非Active時(shí)的行為
　　removedOnCompletion：動(dòng)畫執(zhí)行完畢后是否從圖層上移除，默認(rèn)為YES（視圖會(huì)恢復(fù)到動(dòng)畫前的狀態(tài)），可設(shè)置為NO（圖層保持動(dòng)畫執(zhí)行后的狀態(tài)，前提是fillMode設(shè)置為kCAFillModeForwards）
　　beginTime：動(dòng)畫延遲執(zhí)行時(shí)間（通過CACurrentMediaTime() + your time 設(shè)置）
　　delegate：代理

代理方法如下：
     - (void)animationDidStart:(CAAnimation *)anim;  //動(dòng)畫開始
     - (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag; //動(dòng)畫結(jié)束

CABasicAnimation

CABasicAnimation可以設(shè)定keyPath的起點(diǎn)，終點(diǎn)的值，動(dòng)畫會(huì)沿著設(shè)定點(diǎn)進(jìn)行移動(dòng)，CABasicAnimation可以看成是只有兩個(gè)關(guān)鍵點(diǎn)的特殊的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"];
}
position.gif

　下面是部分keyPath對(duì)應(yīng)的動(dòng)畫效果（圖片名為其對(duì)應(yīng)的keyPath）：


positionX.gif

rotation.gif

scale.gif

translation.gif

bounds.gif
size.gif

opacity.gif

cornerRadius.gif

CAKeyframeAnimation

可以設(shè)定keyPath起點(diǎn)、中間關(guān)鍵點(diǎn)（不止一個(gè)）、終點(diǎn)的值，每一幀所對(duì)應(yīng)的時(shí)間，動(dòng)畫會(huì)沿著設(shè)定點(diǎn)進(jìn)行移動(dòng)。

CAKeyframeAnimation的重要屬性：

values：關(guān)鍵幀數(shù)組對(duì)象，里面每一個(gè)元素即為一個(gè)關(guān)鍵幀，動(dòng)畫會(huì)在對(duì)應(yīng)的時(shí)間段內(nèi)，依次執(zhí)行數(shù)組中每一個(gè)關(guān)鍵幀的動(dòng)畫。
　　path：動(dòng)畫路徑對(duì)象，可以指定一個(gè)路徑，在執(zhí)行動(dòng)畫時(shí)路徑會(huì)沿著路徑移動(dòng)，Path在動(dòng)畫中只會(huì)影響視圖的Position。
　　keyTimes：設(shè)置關(guān)鍵幀對(duì)應(yīng)的時(shí)間點(diǎn)，范圍：0-1。如果沒有設(shè)置該屬性，則每一幀的時(shí)間平分。

下面以讓視圖繞圈為例演示其使用：

1、設(shè)置values使其沿正方形運(yùn)動(dòng)

- (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"];
}
valueKeyframeAni.gif
2、設(shè)置path使其繞圓圈運(yùn)動(dòng)
- (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

轉(zhuǎn)場(chǎng)動(dòng)畫，比UIVIew轉(zhuǎn)場(chǎng)動(dòng)畫具有更多的動(dòng)畫效果，比如Nav的默認(rèn)Push視圖的效果就是通過CATransition的kCATransitionPush類型來實(shí)現(xiàn)。

CAKeyframeAnimation的重要屬性：

type：過渡動(dòng)畫的類型

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

還有一些私有動(dòng)畫類型，效果很炫酷，不過不推薦使用。
　　私有動(dòng)畫類型的值有："cube"、"suckEffect"、"oglFlip"、 "rippleEffect"、"pageCurl"、"pageUnCurl"等等。

subtype： 過渡動(dòng)畫的方向

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"];
}
kCATransitionFade.gif

以下是另外三種轉(zhuǎn)場(chǎng)類型的動(dòng)畫效果（圖片名稱對(duì)應(yīng)其type類型）：


kCATransitionMoveIn.gif

以下是部分私有轉(zhuǎn)場(chǎng)類型的動(dòng)畫效果（圖片名稱對(duì)應(yīng)其type類型）：


transitionAni - cube.gif

transitionAni - pageCurl.gif

transitionAni - suckEffect.gif

CASpringAnimation

CASpringAnimation是iOS9新加入動(dòng)畫類型，是CABasicAnimation的子類，用于實(shí)現(xiàn)彈簧動(dòng)畫。

CASpringAnimation的重要屬性：

mass：質(zhì)量（影響彈簧的慣性，質(zhì)量越大，彈簧慣性越大，運(yùn)動(dòng)的幅度越大）
　　stiffness：彈性系數(shù)（彈性系數(shù)越大，彈簧的運(yùn)動(dòng)越快）
　　damping：阻尼系數(shù)（阻尼系數(shù)越大，彈簧的停止越快）
　　initialVelocity：初始速率（彈簧動(dòng)畫的初始速度大小，彈簧運(yùn)動(dòng)的初始方向與初始速率的正負(fù)一致，若初始速率為0，表示忽略該屬性）
　　settlingDuration：結(jié)算時(shí)間（根據(jù)動(dòng)畫參數(shù)估算彈簧開始運(yùn)動(dòng)到停止的時(shí)間，動(dòng)畫設(shè)置的時(shí)間最好根據(jù)此時(shí)間來設(shè)置）

CASpringAnimation和UIView的SpringAnimation對(duì)比：

1.CASpringAnimation 可以設(shè)置更多影響彈簧動(dòng)畫效果的屬性，可以實(shí)現(xiàn)更復(fù)雜的彈簧動(dòng)畫效果，且可以和其他動(dòng)畫組合。
　　2.UIView的SpringAnimation實(shí)際上就是通過CASpringAnimation來實(shí)現(xiàn)。

以實(shí)現(xiàn)視圖的bounds變化的彈簧動(dòng)畫效果為例：

- (void)springAni {
    CASpringAnimation * ani = [CASpringAnimation animationWithKeyPath:@"bounds"];
    ani.mass = 10.0; //質(zhì)量，影響圖層運(yùn)動(dòng)時(shí)的彈簧慣性，質(zhì)量越大，彈簧拉伸和壓縮的幅度越大
    ani.stiffness = 5000; //剛度系數(shù)(勁度系數(shù)/彈性系數(shù))，剛度系數(shù)越大，形變產(chǎn)生的力就越大，運(yùn)動(dòng)越快
    ani.damping = 100.0;//阻尼系數(shù)，阻止彈簧伸縮的系數(shù)，阻尼系數(shù)越大，停止越快
    ani.initialVelocity = 5.f;//初始速率，動(dòng)畫視圖的初始速度大小;速率為正數(shù)時(shí)，速度方向與運(yùn)動(dòng)方向一致，速率為負(fù)數(shù)時(shí)，速度方向與運(yùn)動(dòng)方向相反
    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"];
}
springAni.gif

CAAnimationGroup

使用Group可以將多個(gè)動(dòng)畫合并一起加入到層中，Group中所有動(dòng)畫并發(fā)執(zhí)行，可以方便地實(shí)現(xiàn)需要多種類型動(dòng)畫的場(chǎng)景。

以實(shí)現(xiàn)視圖的position、bounds和opacity改變的組合動(dòng)畫為例

- (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"];
}
groupAni.gif

CATransaction

最后講一下事務(wù)，在核心動(dòng)畫里面存在事務(wù)（CATransaction）這樣一個(gè)概念，它負(fù)責(zé)協(xié)調(diào)多個(gè)動(dòng)畫原子更新顯示操作。
　　簡(jiǎn)單來說事務(wù)是核心動(dòng)畫里面的一個(gè)基本的單元，動(dòng)畫的產(chǎn)生必然伴隨著layer的Animatable屬性的變化，而layer屬性的變化必須屬于某一個(gè)事務(wù)。
　　因此，核心動(dòng)畫依賴事務(wù)。
事務(wù)的作用：保證一個(gè)或多個(gè)layer的一個(gè)或多個(gè)屬性變化同時(shí)進(jìn)行
　　事務(wù)分為隱式和顯式：
　　1.隱式：沒有明顯調(diào)用事務(wù)的方法，由系統(tǒng)自動(dòng)生成事務(wù)。比如直接設(shè)置一個(gè)layer的position屬性，則會(huì)在當(dāng)前線程自動(dòng)生成一個(gè)事務(wù)，并在下一個(gè)runLoop中自動(dòng)commit事務(wù)。
　　2.顯式：明顯調(diào)用事務(wù)的方法（[CATransaction begin]和[CATransaction commit]）。

CA事務(wù)的可設(shè)置屬性（會(huì)覆蓋隱式動(dòng)畫的設(shè)置）：

     animationDuration：動(dòng)畫時(shí)間
    animationTimingFunction：動(dòng)畫時(shí)間曲線
    disableActions：是否關(guān)閉動(dòng)畫
    completionBlock：動(dòng)畫執(zhí)行完畢的回調(diào)

事務(wù)支持嵌套使用：當(dāng)最外層的事務(wù)commit后動(dòng)畫才會(huì)開始。
使用實(shí)例：

[CATransaction begin];
    [CATransaction setAnimationDuration:2.0];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
//    [CATransaction setDisableActions:YES]; //設(shè)置為YES就關(guān)閉動(dòng)畫
    self.subLayer.bounds = self.centerShow.layer.bounds;
    [CATransaction commit];

注意：只有非root layer才有隱式動(dòng)畫，如果你是直接設(shè)置self.cartCenter.layer.bounds = self.centerShow.layer.bounds;是不會(huì)有動(dòng)畫效果的。

原文作者: 明仔Su
原文鏈接：http://www.itdecent.cn/p/d05d19f70bac

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺ios動(dòng)畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,688評(píng)論 6贊 30
  • 在iOS實(shí)際開發(fā)中常用的動(dòng)畫無非是以下四種：UIView動(dòng)畫，核心動(dòng)畫，幀動(dòng)畫，自定義轉(zhuǎn)場(chǎng)動(dòng)畫。 1.UIView...
    請(qǐng)叫我周小帥閱讀 3,313評(píng)論 1贊 23
  • 在iOS中隨處都可以看到絢麗的動(dòng)畫效果，實(shí)現(xiàn)這些動(dòng)畫的過程并不復(fù)雜，今天將帶大家一窺iOS動(dòng)畫全貌。在這里你可以看...
    F麥子閱讀 5,261評(píng)論 5贊 13
  • 前言 本文只要描述了iOS中的Core Animation(核心動(dòng)畫：隱式動(dòng)畫、顯示動(dòng)畫)、貝塞爾曲線、UIVie...
    GitHubPorter閱讀 3,736評(píng)論 7贊 11
  • 一、CoreAnimation（核心動(dòng)畫） 1.什么是核心動(dòng)畫 Core Animation可以用在 Mac OS...
    就叫yang閱讀 9,282評(píng)論 1贊 34

友情鏈接更多精彩內(nèi)容