1、UIView 動畫

• 具體講解見 iOS - UIView 動畫

2、UIImageView 動畫

• 具體講解見 iOS - UIImageView 動畫

3、CADisplayLink 定時器

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

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

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

4、CALayer 繪圖層

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

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

5、核心動畫基本概念

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

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

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

• 核心動畫 和 UIView 動畫 的區(qū)別：

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

5.1 核心動畫繼承結(jié)構(gòu)

• 核心動畫繼承結(jié)構(gòu)

5.2 核心動畫使用步驟

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

• 開發(fā)步驟:

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

5.3 CAAnimation

• 1、CAAnimation 簡介

  • CAAnimation 是所有動畫對象的父類，負(fù)責(zé)控制動畫的持續(xù)時間和速度，是個抽象類，不能直接使用，應(yīng)該使用它具體的子類。

  • 屬性說明：

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

• 2、CAAnimation 動畫填充模式

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

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

• 3、CAAnimation 速度控制函數(shù)

  • CAMediaTimingFunction 速度控制函數(shù)

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

• 4、CAAnimation 動畫代理方法

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

    @interface NSObject (CAAnimationDelegate)/* Called when the animation begins its active duration. */// 動畫開始執(zhí)行的時候觸發(fā)這個方法- (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. */// 動畫執(zhí)行完畢的時候觸發(fā)這個方法- (void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;@end

5.4 CAPropertyAnimation

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

• 屬性說明：

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

5.5 CALayer 上動畫的暫停和恢復(fù)

• 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 上動畫的恢復(fù)

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

6、基本動畫

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

• 屬性說明：

  fromValue ：keyPath 相應(yīng)屬性的初始值toValue ：keyPath 相應(yīng)屬性的結(jié)束值byValue ：keyPath 相應(yīng)屬性的改變值

• 動畫過程說明：

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

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

6.1 平移動畫

• 1、方法 1

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

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

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

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

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

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

  • 第 19 行后面的 @"translate" 是給動畫對象起個名稱，以后可以調(diào)用 CALayer 的 removeAnimationForKey: 方法根據(jù)動畫名稱停止相應(yīng)的動畫。

  • 第 12 行是設(shè)置動畫的代理，可以監(jiān)聽動畫的執(zhí)行過程，這里設(shè)置控制器為代理。需要遵守協(xié)議 CAAnimationDelegate，代理需要實現(xiàn)的方法有：

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

  • 打印結(jié)果為：

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

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

  • 效果

• 2、方法 2

  // 說明這個動畫對象要對 CALayer 的 transform 屬性執(zhí)行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];// 動畫持續(xù) 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 屬性執(zhí)行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"bounds"];// 動畫持續(xù) 2sanim.duration = 2;// 縮放，width 從 100 變?yōu)?30，height 從 100 變?yōu)?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 屬性執(zhí)行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform"];// 動畫持續(xù) 1.5sanim.duration = 1.5;// 縮放，width 從 100 變?yōu)?200，height 從 100 變?yōu)?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 屬性執(zhí)行動畫CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"transform.scale"];// 動畫持續(xù) 1.0sanim.duration = 1.0;// 縮放倍數(shù)anim.toValue = @0.5;// 設(shè)置動畫執(zhí)行次數(shù)anim.repeatCount = MAXFLOAT;// 保持動畫執(zhí)行后的狀態(tài)anim.removedOnCompletion = NO;anim.fillMode = kCAFillModeForwards;// 添加動畫對象到圖層上[imageView.layer addAnimation:anim forKey:nil];

  • 效果

6.3 旋轉(zhuǎn)動畫

• 1、方法

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

  • 效果

• 2、方法

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

  • 效果

7、關(guān)鍵幀動畫

• CAKeyframeAnimation 關(guān)鍵幀動畫，是 CAPropertyAnimation 的子類。

• 與 CABasicAnimation 的區(qū)別是：

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

• 屬性說明：

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

7.1 平移動畫

• 1、添加動畫關(guān)鍵幀

  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)];// 添加動畫關(guān)鍵幀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];// 創(chuàng)建路徑self.path = [UIBezierPath bezierPath];// 設(shè)置起點[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];}/// 觸摸結(jié)束- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event {// 添加關(guān)鍵幀動畫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;// 添加動畫關(guān)鍵幀anim.values = @[scaleVal1, scaleVal2, scaleVal3, scaleVal4, scaleVal5];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

7.3 旋轉(zhuǎn)動畫

• 1、旋轉(zhuǎn)動畫

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

  • 效果

• 2、圖標(biāo)抖動

  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);// 添加動畫關(guān)鍵幀anim.values = @[rotationVal1, rotationVal2, rotationVal3];[self.myView.layer addAnimation:anim forKey:nil];

  • 效果

8、轉(zhuǎn)場動畫

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

• 動畫屬性：

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

• 設(shè)置動畫類型

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

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

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

  • pageCurl 效果，pageUnCurl 效果

  • rippleEffect 效果，suckEffect 效果

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

  • rotate 效果，cameraIris 效果

  • cameraIrisHollowOpen 效果，cameraIrisHollowClose 效果

• 設(shè)置動畫方向

  四種預(yù)設(shè)，某些類型中此設(shè)置無效：kCATransitionFromRightkCATransitionFromLeftkCATransitionFromTopkCATransitionFromBottom

• UIView 實現(xiàn)轉(zhuǎn)場動畫方法

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

8.1 添加轉(zhuǎn)場動畫

• 添加轉(zhuǎn)場動畫

  @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;// 添加轉(zhuǎn)場動畫CATransition *anim = [CATransition animation];// 設(shè)置動畫效果anim.type = @"flip";// 設(shè)置動畫方向anim.subtype = kCATransitionFromLeft;// 設(shè)置動畫時間anim.duration = 1.0;// 添加轉(zhuǎn)場動畫[self.animView.layer addAnimation:anim forKey:nil];}

  • 效果

9、動畫組

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

• 屬性說明：

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

9.1 添加動畫組

• 添加動畫組

  // 同時旋轉(zhuǎn)，縮放，平移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 核心動畫的使用

轉(zhuǎn)載于:https://www.cnblogs.com/QianChia/p/6359714.html

總結(jié)

以上是生活随笔為你收集整理的iOS - Core Animation 核心动画的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。