iOS - Core Animation 核心動畫

1、UIView 動畫

• 具體講解見 iOS - UIView 動畫

2、UIImageView 動畫

• 具體講解見 iOS - UIImageView 動畫

3、CADisplayLink 定時器

• 具體講解見 iOS - OC NSTimer 定時器

• CADisplayLink 是一個能讓我們以和屏幕刷新率相同的頻率將內容畫到屏幕上的定時器。我們在應用中創建一個新的 CADisplayLink 對象，把它添加到一個 runloop 中，并給它提供一個 target 和 selector 在屏幕刷新的時候調用。

• CADisplayLink 使用場合相對專一，適合做 UI 的不停重繪，比如自定義動畫引擎或者視頻播放的渲染。NSTimer 的使用范圍要廣泛的多，各種需要單次或者循環定時處理的任務都可以使用。在 UI 相關的動畫或者顯示內容使用 CADisplayLink 比起用 NSTimer 的好處就是我們不需要再格外關心屏幕的刷新頻率了，因為它本身就是跟屏幕刷新同步的。

4、CALayer 繪圖層

• 具體講解見 iOS - CALayer 繪圖層

• 在 iOS 系統中，你能看得見摸得著的東西基本上都是 UIView，比如一個按鈕、一個文本標簽、一個文本輸入框、一個圖標等等，這些都是 UIView。其實 UIView 之所以能顯示在屏幕上，完全是因為它內部的一個層。在創建 UIView 對象時，UIView 內部會自動創建一個層（即 CALayer 對象），通過 UIView 的 layer 屬性可以訪問這個層。當 UIView 需要顯示到屏幕上時，會調用 drawRect: 方法進行繪圖，并且會將所有內容繪制在自己的層上，繪圖完畢后，系統會將層拷貝到屏幕上，于是就完成了 UIView 的顯示。換句話說，UIView 本身不具備顯示的功能，是它內部的層才有顯示功能。

5、核心動畫基本概念

• Core Animation 中文翻譯為核心動畫，它是一組非常強大的動畫處理 API，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍。也就是說，使用少量的代碼就可以實現非常強大的功能。Core Animation 可以用在 macOS 和 iOS 平臺。喬幫主在 2007 年的 WWDC 大會上親自為你演示 Core Animation 的強大：點擊查看視頻。

• Core Animation 的動畫執行過程都是在后臺操作的，不會阻塞主線程。

• 要注意的是，Core Animation 是直接作用在 CALayer 上的，并非 UIView。

• 核心動畫 和 UIView 動畫 的區別：

  • 核心動畫一切都是假象，并不會真實的改變圖層的屬性值，如果以后做動畫的時候，不需要與用戶交互，通常用核心動畫（轉場）。
  • UIView 動畫必須通過修改屬性的真實值，才有動畫效果。

5.1 核心動畫繼承結構

• 核心動畫繼承結構

  

5.2 核心動畫使用步驟

• Xcode6 之前的版本，使用它需要先添加 QuartzCore.framework 和引入對應的框架 <QuartzCore/QuartzCore.h>。

• 開發步驟:

  • 1、首先得有 CALayer。
  • 2、初始化一個 CAAnimation 對象，并設置一些動畫相關屬性。
  • 3、通過調用 CALayer 的 addAnimation:forKey: 方法，增加 CAAnimation 對象到 CALayer 中，這樣就能開始執行動畫了。
  • 4、通過調用 CALayer 的 removeAnimationForKey: 方法可以停止 CALayer 中的動畫。

5.3 CAAnimation

• 1、CAAnimation 簡介

  • CAAnimation 是所有動畫對象的父類，負責控制動畫的持續時間和速度，是個抽象類，不能直接使用，應該使用它具體的子類。

  • 屬性說明：

        removedOnCompletion ：默認為 YES，代表動畫執行完畢后就從圖層上移除，圖形會恢復到動畫執行前的狀態。如果想讓圖層保持顯示動畫執行后的狀態，那就設置為 NO，不過還要設置 fillMode 為 kCAFillModeForwards。timingFunction      ：速度控制函數，控制動畫運行的節奏。delegate            ：動畫代理，需要遵守協議 CAAnimationDelegate。// 來自 CAMediaTiming 協議的屬性duration       ：動畫的持續時間。repeatCount    ：重復次數，無限循環可以設置 HUGE_VALF 或者 MAXFLOAT。repeatDuration ：重復時間。fillMode       ：決定當前對象在非 active 時間段的行為。比如動畫開始之前或者動畫結束之后。beginTime      ：可以用來設置動畫延遲執行時間，若想延遲 2s，就設置為 CACurrentMediaTime()+2，CACurrentMediaTime() 為圖層的當前時間。

• 2、CAAnimation 動畫填充模式

  • 設置 fillMode 屬性值（要想 fillMode 有效，需要設置 removedOnCompletion = NO）

        kCAFillModeRemoved   ：這個是默認值，也就是說當動畫開始前和動畫結束后，動畫對 layer 都沒有影響，動畫結束后，layer 會恢復到之前的狀態。kCAFillModeForwards  ：當動畫結束后，layer 會一直保持著動畫最后的狀態。kCAFillModeBackwards ：在動畫開始前，只需要將動畫加入了一個 layer，layer 便立即進入動畫的初始狀態并等待動畫開始。kCAFillModeBoth      ：這個其實就是上面兩個的合成，動畫加入后開始之前，layer 便處于動畫初始狀態，動畫結束后 layer 保持動畫最后的狀態。

• 3、CAAnimation 速度控制函數

  • CAMediaTimingFunction 速度控制函數

        kCAMediaTimingFunctionLinear        ：線性，勻速，給你一個相對靜態的感覺。kCAMediaTimingFunctionEaseIn        ：漸進，動畫緩慢進入，然后加速離開。kCAMediaTimingFunctionEaseOut       ：漸出，動畫全速進入，然后減速的到達目的地。kCAMediaTimingFunctionEaseInEaseOut ：漸進漸出，動畫緩慢的進入，中間加速，然后減速的到達目的地。這個是默認的動畫行為。

• 4、CAAnimation 動畫代理方法

  • CAAnimation 在分類中定義了代理方法

        @interface NSObject (CAAnimationDelegate)/* Called when the animation begins its active duration. */// 動畫開始執行的時候觸發這個方法- (void)animationDidStart:(CAAnimation *)anim;/* Called when the animation either completes its active duration or* is removed from the object it is attached to (i.e. the layer). 'flag'* is true if the animation reached the end of its active duration* without being removed. */// 動畫執行完畢的時候觸發這個方法- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

5.4 CAPropertyAnimation

• CAPropertyAnimation 是 CAAnimation 的子類，也是個抽象類，要想創建動畫對象，應該使用它的兩個子類：
  • CABasicAnimation
  • CAKeyframeAnimation

• 屬性說明：

      keyPath ：通過指定 CALayer 的一個屬性名稱為 keyPath（NSString 類型），并且對 CALayer 的這個屬性的值進行修改，達到相應的動畫效果。比如，指定 @“position” 為 keyPath，就修改 CALayer 的 position 屬性的值，以達到平移的動畫效果。

5.5 CALayer 上動畫的暫停和恢復

• 1、CALayer 上動畫的暫停

      // 暫停 CALayer 的動畫，自定義方法- (void)pauseLayer:(CALayer*)layer {CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];// 讓 CALayer 的時間停止走動layer.speed = 0.0;// 讓 CALayer 的時間停留在 pausedTime 這個時刻layer.timeOffset = pausedTime;}

• 2、CALayer 上動畫的恢復

      // 恢復 CALayer 的動畫，自定義方法- (void)resumeLayer:(CALayer*)layer {CFTimeInterval pausedTime = layer.timeOffset;// 讓 CALayer 的時間繼續行走layer.speed = 1.0;// 取消上次記錄的停留時刻layer.timeOffset = 0.0;// 取消上次設置的時間layer.beginTime = 0.0;// 計算暫停的時間（這里也可以用 CACurrentMediaTime() - pausedTime）CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;// 設置相對于父坐標系的開始時間（往后退 timeSincePause）layer.beginTime = timeSincePause;}

6、基本動畫

• CABasicAnimation 基本動畫，是 CAPropertyAnimation 的子類。

• 屬性說明：

      fromValue ：keyPath 相應屬性的初始值toValue   ：keyPath 相應屬性的結束值byValue   ：keyPath 相應屬性的改變值

• 動畫過程說明：

  • keyPath 內容是 CALayer 的可動畫 Animatable 屬性。
  • 隨著動畫的進行，在長度為 duration 的持續時間內，keyPath 相應屬性的值從 fromValue 漸漸地變為 toValue。
  • 如果 fillMode = kCAFillModeForwards 同時 removedOnComletion = NO，那么在動畫執行完畢后，圖層會保持顯示動畫執行后的狀態。但在實質上，圖層的屬性值還是動畫執行前的初始值，并沒有真正被改變。

• CABasicAnimation 雖然能夠做很多基本的動畫效果，但是有個局限性，只能讓 CALayer 的屬性從某個值漸變到另一個值，僅僅是在 2 個值之間漸變。

6.1 平移動畫

• 1、方法 1

      // 說明這個動畫對象要對 CALayer 的 position 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"position"];// 動畫持續 1.5sanim.duration = 1.5;// position 屬性值從 (50, 80) 漸變到 (300, 350)anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(50, 80)];anim.toValue = [NSValue valueWithCGPoint:CGPointMake(250, 350)];// 設置動畫的代理anim.delegate = self;// 保持動畫執行后的狀態anim.removedOnCompletion = NO;anim.fillMode = kCAFillModeForwards;// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:@"translate"];

  • 第 2 行設置的 keyPath 是 @"position"，說明要修改的是 CALayer 的 position 屬性，也就是會執行平移動畫。

  • 注意第 8、9 行，這里并不是直接使用 CGPoint 這種結構體類型，而是要先包裝成 NSValue 對象后再使用。這 2 行代碼表示 CALayer 從位置 (50, 80) 移動到位置 (250, 350)。

  • 如果將第 9 行的 toValue 換成 byValue，代表 CALayer 從位置 (50, 80) 開始向右移動 250、向下移動 350，也就是移動到位置 (300, 430)。

        anim.byValue = [NSValue valueWithCGPoint:CGPointMake(250, 350)];

  • 默認情況下，動畫執行完畢后，動畫會自動從 CALayer 上移除，CALayer 又會回到原來的狀態。為了保持動畫執行后的狀態，可以加入第 15、16 行代碼。

  • 第 19 行后面的 @"translate" 是給動畫對象起個名稱，以后可以調用 CALayer 的 removeAnimationForKey: 方法根據動畫名稱停止相應的動畫。

  • 第 12 行是設置動畫的代理，可以監聽動畫的執行過程，這里設置控制器為代理。需要遵守協議 CAAnimationDelegate，代理需要實現的方法有：

        - (void)animationDidStart:(CAAnimation *)anim {NSLog(@"%s", __func__);}- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag {NSLog(@"%s", __func__);}

  • 打印結果為：

        09:11:10.880 CALayerDemo[12721:622836] -[ViewController animationDidStart:]09:11:12.419 CALayerDemo[12721:622836] -[ViewController animationDidStop:finished:]，position:{50, 80}

  • 實際上，動畫執行完畢后，并沒有真正改變 CALayer 的 position 屬性的值。

  • 效果

    

• 2、方法 2

      // 說明這個動畫對象要對 CALayer 的 transform 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];// 動畫持續 1.5sanim.duration = 1.5;// 平移，x 軸移動 250，y 軸移動 350，z 軸移動 0CATransform3D form = CATransform3DMakeTranslation(250, 350, 0);anim.toValue = [NSValue valueWithCATransform3D:form];// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

6.2 縮放動畫

• 1、方法 1

      // 說明這個動畫對象要對 CALayer 的 bounds 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];// 動畫持續 2sanim.duration = 2;// 縮放，width 從 100 變為 30，height 從 100 變為 30// anim.fromValue = [NSValue valueWithCGPoint:CGPointMake(100, 100)];  // fromValue 可以省略anim.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 30, 30)];// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 2、方法 2

      // 說明這個動畫對象要對 CALayer 的 transform 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];// 動畫持續 1.5sanim.duration = 1.5;// 縮放，width 從 100 變為 200，height 從 100 變為 150// anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeScale(1.0, 1.0, 1.0)];anim.toValue  = [NSValue valueWithCATransform3D:CATransform3DMakeScale(2.0, 1.5, 1.0)];// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 3、心跳效果

      // 說明這個動畫對象要對 CALayer 的 transform.scale 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];// 動畫持續 1.0sanim.duration = 1.0;// 縮放倍數anim.toValue = @0.5;// 設置動畫執行次數anim.repeatCount = MAXFLOAT;// 保持動畫執行后的狀態anim.removedOnCompletion = NO;anim.fillMode = kCAFillModeForwards;// 添加動畫對象到圖層上[imageView.layer addAnimation:anim forKey:nil];

  • 效果

    

6.3 旋轉動畫

• 1、方法

      // 說明這個動畫對象要對 CALayer 的 transform.rotation 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];// 動畫持續 3.5sanim.duration = 3.5;// 縮放倍數anim.toValue = @(M_PI_4 * 3);// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 2、方法

      // 說明這個動畫對象要對 CALayer 的 transform 屬性執行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];// 動畫持續 3.5sanim.duration = 3.5;// 繞著 (0, 0, 1) 這個向量軸順時針旋轉 45°// anim.fromValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(0, 0, 0, 1)];anim.toValue = [NSValue valueWithCATransform3D:CATransform3DMakeRotation(M_PI_4 * 3, 0, 0, 1)];// 設置動畫執行次數anim.repeatCount = MAXFLOAT;// 保持動畫執行后的狀態anim.removedOnCompletion = NO;anim.fillMode = kCAFillModeForwards;// 添加動畫對象到圖層上[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

7、關鍵幀動畫

• CAKeyframeAnimation 關鍵幀動畫，是 CAPropertyAnimation 的子類。

• 與 CABasicAnimation 的區別是：

  • CABasicAnimation 只能從一個數值（fromValue）變到另一個數值（toValue），而 CAKeyframeAnimation 會使用一個 NSArray 保存這些數值。
  • CABasicAnimation 可看做是只有2個關鍵幀的 CAKeyframeAnimation。

• 屬性說明：

      values   ：上述的 NSArray 對象。里面的元素稱為 “關鍵幀” (keyframe)。動畫對象會在指定的時間（duration）內，依次顯示 values 數組中的每一個關鍵幀。path     ：可以設置一個 CGPathRef、CGMutablePathRef，讓圖層按照路徑軌跡移動。path 只對 CALayer 的 anchorPoint 和 position 起作用。如果設置了 path，那么 values 將被忽略。keyTimes ：可以為對應的關鍵幀指定對應的時間點，其取值范圍為 0 到 1.0，keyTimes 中的每一個時間值都對應 values 中的每一幀。如果沒有設置 keyTimes，各個關鍵幀的時間是平分的。

7.1 平移動畫

• 1、添加動畫關鍵幀

      CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation"];// CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];anim.duration = 5.0;// 動畫起始位置，從 position 點出開始NSValue *pointVal1 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];// 水平移動 200 - 0，垂直方向不變（0 - 0 = 0）NSValue *pointVal2 = [NSValue valueWithCGPoint:CGPointMake(200, 0)];// 垂直移動 200 - 0，水平位置不變（200 - 200 = 0）NSValue *pointVal3 = [NSValue valueWithCGPoint:CGPointMake(200, 200)];// 水平移動 0 - 200，垂直方向不變（200 - 200 = 0）NSValue *pointVal4 = [NSValue valueWithCGPoint:CGPointMake(0, 200)];// 垂直移動 0 - 200，水平位置不變（0 - 0 = 0）NSValue *pointVal5 = [NSValue valueWithCGPoint:CGPointMake(0, 0)];// 添加動畫關鍵幀anim.values = @[pointVal1, pointVal2, pointVal3, pointVal4, pointVal5];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 2、添加動畫路徑

      CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.translation"];// CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"position"];anim.duration = 5.0;// 添加動畫路徑anim.path = [UIBezierPath bezierPathWithRect:CGRectMake(0, 0, 200, 200)].CGPath;[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 3、劃定路徑移動

  • DrawView.m

        @interface DrawView ()@property (nonatomic, strong) UIBezierPath *path;@end@implementation DrawView/// 觸摸開始- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 移除上一個動畫[self.subviews.firstObject.layer removeAnimationForKey:@"drawAnimation"];// 獲取觸摸起始點位置CGPoint startPoint = [touches.anyObject locationInView:self];// 創建路徑self.path = [UIBezierPath bezierPath];// 設置起點[self.path moveToPoint:startPoint];}/// 觸摸移動- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 獲取觸摸點位置CGPoint touchPoint = [touches.anyObject locationInView:self];[self.path addLineToPoint:touchPoint];[self setNeedsDisplay];}/// 觸摸結束- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 添加關鍵幀動畫CAKeyframeAnimation *anim = [CAKeyframeAnimation animation];anim.keyPath = @"position";// 添加動畫路徑anim.path = self.path.CGPath;anim.duration = 3;anim.repeatCount = MAXFLOAT;anim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];// 給子視圖添加核心動畫[self.subviews.firstObject.layer addAnimation:anim forKey:@"drawAnimation"];}/// 觸摸取消- (void)touchesCancelled:(NSSet *)touches withEvent:(nullable UIEvent *)event {[self touchesEnded:touches withEvent:event];}/// 繪圖- (void)drawRect:(CGRect)rect {[self.path stroke];}@end

  • ViewController.m

        DrawView *myDrawView = [[DrawView alloc] initWithFrame:self.view.bounds];myDrawView.backgroundColor = [UIColor whiteColor];[self.view addSubview:myDrawView];UIImageView *imv = [[UIImageView alloc] initWithFrame:CGRectMake(100, 100, 50, 50)];imv.image = [UIImage imageNamed:@"heart2"];[myDrawView addSubview:imv];

    • 效果

      

7.2 縮放動畫

• 縮放動畫

      CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.scale"];anim.duration = 5.0;// 動畫起始大小，1 不縮放NSNumber *scaleVal1 = @1;// 放大 2 倍NSNumber *scaleVal2 = @2;// 不縮放，縮小至原來大小NSNumber *scaleVal3 = @1;// 縮小 0.5 倍NSNumber *scaleVal4 = @0.5;// 不縮放，放大至原來大小NSNumber *scaleVal5 = @1;// 添加動畫關鍵幀anim.values = @[scaleVal1, scaleVal2, scaleVal3, scaleVal4, scaleVal5];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

7.3 旋轉動畫

• 1、旋轉動畫

      CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];anim.duration = 5.0;// 動畫起始角度，0 不旋轉NSNumber *rotationVal1 = @0;// 旋轉 M_PI_4 * 1NSNumber *rotationVal2 = @(M_PI_4 * 1);// 旋轉 M_PI_4 * 2NSNumber *rotationVal3 = @(M_PI_4 * 2);// 旋轉 M_PI_4 * 3NSNumber *rotationVal4 = @(M_PI_4 * 3);// 旋轉 M_PI_4 * 4NSNumber *rotationVal5 = @(M_PI_4 * 4);// 添加動畫關鍵幀anim.values = @[rotationVal1, rotationVal2, rotationVal3, rotationVal4, rotationVal5];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

• 2、圖標抖動

      CAKeyframeAnimation *anim = [CAKeyframeAnimation animationWithKeyPath:@"transform.rotation"];anim.repeatCount = MAXFLOAT;NSNumber *rotationVal1 = @(-5 / 180.0 * M_PI);NSNumber *rotationVal2 = @(5 / 180.0 * M_PI);NSNumber *rotationVal3 = @(-5 / 180.0 * M_PI);// 添加動畫關鍵幀anim.values = @[rotationVal1, rotationVal2, rotationVal3];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

8、轉場動畫

• CATransition 轉場動畫，是 CAAnimation 的子類，用于做轉場動畫，能夠為層提供移出屏幕和移入屏幕的動畫效果。UINavigationController 就是通過 CATransition 實現了將控制器的視圖推入屏幕的動畫效果。

• 動畫屬性：

      type          ：動畫類型。subtype       ：動畫方向。startProgress ：動畫起點（在整體動畫的百分比）。endProgress   ：動畫終點（在整體動畫的百分比）。

• 設置動畫類型

      基本型：kCATransitionFade      交叉淡化過渡kCATransitionPush      新視圖把舊視圖推出去kCATransitionMoveIn    新視圖移到舊視圖上面kCATransitionReveal    將舊視圖移開,顯示下面的新視圖用字符串表示的類型：fade   push   moveIn   reveal   和系統自帶的四種一樣pageCurl               向上翻頁效果pageUnCurl             向下翻頁效果rippleEffect           水滴效果suckEffect             收縮效果，如一塊布被抽走cube                   立方體翻滾效果alignedCube            立方體翻滾效果flip                   翻轉效果alignedFlip            翻轉效果oglFlip                翻轉效果rotate                 旋轉cameraIrisHollowOpen   相機鏡頭打開效果cameraIrisHollowClose  相機鏡頭關閉效果cameraIris             相機鏡頭打開關閉效果

  • kCATransitionFade 和 fade 效果，kCATransitionPush 和 push 效果

    

  • kCATransitionMoveIn 和 moveIn 效果，kCATransitionReveal 和 reveal 效果

    

  • pageCurl 效果，pageUnCurl 效果

    

  • rippleEffect 效果，suckEffect 效果

    

  • cube、alignedCube 效果，flip、alignedFlip、oglFlip 效果

    

  • rotate 效果，cameraIris 效果

    

  • cameraIrisHollowOpen 效果，cameraIrisHollowClose 效果

    

• 設置動畫方向

      四種預設，某些類型中此設置無效：kCATransitionFromRightkCATransitionFromLeftkCATransitionFromTopkCATransitionFromBottom

• UIView 實現轉場動畫方法

      // 單視圖+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;參數說明：view：需要進行轉場動畫的視圖duration：動畫的持續時間options：轉場動畫的類型animations：將改變視圖屬性的代碼放在這個 block 中completion：動畫結束后，會自動調用這個 block// 雙視圖+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;參數說明：duration：動畫的持續時間options：轉場動畫的類型completion：動畫結束后，會自動調用這個 block

8.1 添加轉場動畫

• 添加轉場動畫

      @property (weak, nonatomic) IBOutlet UIView *animView;@property (weak, nonatomic) IBOutlet UIImageView *imageView;- (IBAction)btnClick:(id)sender {static int i = 2;// 加載圖片self.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"page%d", i]];i = (i == 2) ? 1 : i + 1;// 添加轉場動畫CATransition *anim = [CATransition animation];// 設置動畫效果anim.type = @"flip";// 設置動畫方向anim.subtype = kCATransitionFromLeft;// 設置動畫時間anim.duration = 1.0;// 添加轉場動畫[self.animView.layer addAnimation:anim forKey:nil];}

  

  • 效果

    

9、動畫組

• CAAnimationGroup 動畫組，是 CAAnimation 的子類，可以保存一組動畫對象，將 CAAnimationGroup 對象加入層后，組中所有動畫對象可以同時并發運行。

• 屬性說明：

      animations ：用來保存一組動畫對象的 NSArray。默認情況下，一組動畫對象是同時運行的，也可以通過設置動畫對象的 beginTime 屬性來更改動畫的開始時間。

9.1 添加動畫組

• 添加動畫組

      // 同時旋轉，縮放，平移CAAnimationGroup *anim = [CAAnimationGroup animation];CABasicAnimation *rotation = [CABasicAnimation animationWithKeyPath:@"transform.rotation"];rotation.toValue = @(M_PI_4 * 3);CABasicAnimation *scale = [CABasicAnimation animationWithKeyPath:@"transform.scale"];scale.toValue = @0.5;CABasicAnimation *translation = [CABasicAnimation animationWithKeyPath:@"transform.translation"];translation.toValue = [NSValue valueWithCGPoint:CGPointMake(300, 300)];// 添加動畫anim.animations = @[rotation, scale, translation];anim.duration = 3.0;anim.removedOnCompletion = NO;anim.fillMode = kCAFillModeForwards;// 添加動畫組[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

    

10、核心動畫的使用

• 具體講解見 iOS - Core Animation 核心動畫的使用