核心動畫CA

Core Animation的動畫執(zhí)行過程都是在后臺操作的，不會阻塞主線程。 Animation是直接作用在CALayer上，并非UIView。

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

核心動畫的繼承關(guān)系圖.png

CAAnimation——簡介

  • 是所有動畫對象的父類，負(fù)責(zé)控制動畫的持續(xù)時間和速度，是個抽象類，不能直接使用，應(yīng)該使用它具體的子類
  • 屬性說明：(前5個來自CAMediaTiming協(xié)議的屬性)
    1. duration：動畫的持續(xù)時間
    • repeatCount：重復(fù)次數(shù)，無限循環(huán)可以設(shè)置HUGE_VALF或者MAXFLOAT
    • repeatDuration：重復(fù)時間
    • fillMode：決定當(dāng)前對象在非 active 時間段的行為。比如動畫開始之前或者動畫結(jié)束之后
      • kCAFillModeRemoved 這個是默認(rèn)值，也就是說當(dāng)動畫開始前和動畫結(jié)束后，動畫對layer都沒有影響，動畫結(jié)束后，layer會恢復(fù)到之前的狀態(tài)。
      • kCAFillModeForwards 當(dāng)動畫結(jié)束后，layer會一直保持動畫最后的狀態(tài)。
      • kCAFillModeBackwards 在動畫開始前，只需要將動畫加入了一個layer，layer便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始。
      • kCAFillModeBoth 這個其實(shí)就是上面兩個的合成。動畫加入后開始之前，layer便處于動畫初始狀態(tài)，動畫結(jié)束后layer保持動畫最后的狀態(tài)。
    • beginTime：可以用來設(shè)置動畫延遲執(zhí)行時間，若想延遲2s，就設(shè)置為 -
      CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當(dāng)前時間
    • removedOnCompletion：默認(rèn)為YES，代表動畫執(zhí)行完畢后就從圖層上移除，圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過還要設(shè)置fillMode為kCAFillModeForwards
    • timingFunction：速度控制函數(shù)，控制動畫運(yùn)行的節(jié)奏
    • delegate：動畫代理 
      @interface NSObject (CAAnimationDelegate)
-(void)animationDidStart:(CAAnimation *)anim;
-(void)animationDidStop:(CAAnimation *)anim finished:(BOOL)flag;
@end

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

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

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

一、基本動畫

CABasicAnimation

屬性說明:
fromValue：keyPath相應(yīng)屬性的初始值
toValue：keyPath相應(yīng)屬性的結(jié)束值

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

    //例一：平移效果
    CABasicAnimation * ba = [CABasicAnimation animation];
    ba.keyPath = @"transform.translation.x";
    ba.fromValue = @0;
    ba.toValue = @200;
    
    ba.duration = 3.0;
    
    ba.fillMode = kCAFillModeBoth;
    ba.removedOnCompletion = NO;
    
    [self.orangeView.layer addAnimation:ba forKey:nil];

    //例二：心跳效果
    CABasicAnimation * ba = [CABasicAnimation animation];
    ba.keyPath = @"transform.scale";
    ba.toValue = @0;
    ba.duration = 0.6;
    ba.repeatCount = MAXFLOAT;
    ba.autoreverses = YES;
    [self.imageView.layer addAnimation:ba forKey:nil];

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

CAKeyframeAnimation

  • 關(guān)鍵幀動畫，也是CAPropertyAnimation的子類，與CABasicAnimation的區(qū)別是：
  • CABasicAnimation只能從一個數(shù)值fromValue變到另一個數(shù)值toValue，而CAKeyframeAnimation會使用一個NSArray保存這些數(shù)值。
  • 屬性說明：
  • 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)的時間點(diǎn)，其取值范圍為0到1.0，keyTimes中的每一個時間值都對應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes，各個關(guān)鍵幀的時間是平分的。
  • CABasicAnimation可看做是只有 2個關(guān)鍵幀 的CAKeyframeAnimation。
    //例一：圖標(biāo)左右搖擺
    CAKeyframeAnimation *keyframeA = [CAKeyframeAnimation animation];
    keyframeA.keyPath = @"transform.rotation";
    keyframeA.values = @[@(M_PI*3/180.0), @(-M_PI*3/180.0)];
        
    keyframeA.duration = 0.15;
    keyframeA.repeatCount = MAXFLOAT;
    keyframeA.autoreverses = YES;
        
    [self.imageView.layer addAnimation:keyframeA forKey:nil];

    //按軌跡運(yùn)動
    CAKeyframeAnimation *keyframeA = [CAKeyframeAnimation animation];
    keyframeA.keyPath = @"position";
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(self.grassImgV.bounds.size.width*0.5, self.grassImgV.bounds.size.width*0.5) radius:self.grassImgV.bounds.size.width*0.5-35 startAngle:-M_PI endAngle:0 clockwise:YES];
    keyframeA.path = path.CGPath;
    
    keyframeA.duration = 5.0;
    keyframeA.removedOnCompletion = NO;
    keyframeA.fillMode = @"both";
    
    [self.sunL addAnimation:keyframeA forKey:nil];

三、動畫組

CAAnimationGroup

  • 動畫組，是CAAnimation的子類，可以保存一組動畫對象，將CAAnimationGroup對象加入層后，組中所有動畫對象可以同時并發(fā)運(yùn)行。
  • 屬性說明：
- `animations`：用來保存一組動畫對象的`NSArray`。
- 默認(rèn)情況下，一組動畫對象是同時運(yùn)行的，也可以通過設(shè)置動畫對象的`beginTime`屬性來更改動畫的開始時間。

    //例：向下平移 的同時 縮小0.5倍
    CABasicAnimation *animation1 = [CABasicAnimation animation];
    animation1.keyPath = @"transform.translation.y";
    animation1.toValue = @400;
    
    CABasicAnimation *animation2 = [CABasicAnimation animation];
    animation2.keyPath = @"transform.scale";
    animation2.toValue = @0.5;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations = @[animation1, animation2];
    group.duration = 1.0;
    group.fillMode = @"both";
    group.removedOnCompletion = NO;
    
    [self.redView.layer addAnimation:group forKey:nil];

四、轉(zhuǎn)場動畫

CATransition

  • CATransition 是CAAnimation的子類，用于做轉(zhuǎn)場動畫，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭赢嬓ЧOS比Mac OS X的轉(zhuǎn)場動畫效果少一點(diǎn)。
  • UINavigationController就是通過CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動畫效果。
  • 動畫屬性：
    • type：動畫過渡類型
      • fade, 交叉淡化過渡（關(guān)鍵字）
      • push, 新視圖把舊視圖推出去（關(guān)鍵字）
      • moveIn, 新視圖移到舊視圖上面（關(guān)鍵字）
      • reveal, 將舊視圖移開,顯示下面的新視圖（關(guān)鍵字）
      • cube, 立方體翻滾效果
      • oglFlip, 上下左右翻轉(zhuǎn)效果
      • suckEffect, 收縮效果，如一塊布被抽走（沒有方向）
      • rippleEffect, 水滴效果 （沒有方向）
      • pageCurl, 向上翻頁效果
      • pageUnCurl, 向下翻頁效果
      • cameraIrisHollowOpen, 相機(jī)鏡頭打開效果（沒有方向）
      • cameraIrisHollowClose, 相機(jī)鏡頭關(guān)閉效果（沒有方向）
    • subtype：動畫過渡方向
    • startProgress：動畫起點(diǎn)(在整體動畫的百分比)
    • endProgress：動畫終點(diǎn)(在整體動畫的百分比)
    //例：一個imageView連續(xù)播放三張圖片
    //動畫的內(nèi)容 和 動畫的設(shè)置，要放在一個方法內(nèi)

    //動畫的內(nèi)容
    i++;
    if (i==4) i=1;
    UIImage *image = [UIImage imageNamed:[NSString stringWithFormat:@"%i", i]];
    self.imageView.image = image;
    
    //動畫的設(shè)置
    CATransition *transiton = [CATransition animation];
    transiton.type = @"rippleEffect"; //水滴效果
    transiton.duration = 1.0;
    //transiton.subtype = @"fromRight"; //方向
    //transiton.startProgress = 0.2;
    //transiton.endProgress = 0.8;
    [self.imageView.layer addAnimation:transiton forKey:nil];
  • 使用UIView動畫函數(shù)實(shí)現(xiàn)轉(zhuǎn)場動畫 --- 單視圖

+(void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration
options:(UIViewAnimationOptions)options
animations:(void (^)(void))animations
completion:(void (^)(BOOL finished))completion;

>**參數(shù)說明：**
`duration`：動畫的持續(xù)時間
`view`：需要進(jìn)行轉(zhuǎn)場動畫的視圖
`options`：轉(zhuǎn)場動畫的類型
`animations`：將改變視圖屬性的代碼放在這個block中
`completion`：動畫結(jié)束后，會自動調(diào)用這個block


- #####使用`UIView`動畫函數(shù)實(shí)現(xiàn)轉(zhuǎn)場動畫 --- 雙視圖
>```
+(void)transitionFromView:(UIView *)fromView toView:(UIView *)toView 
                                     duration:(NSTimeInterval)duration 
                                   options:(UIViewAnimationOptions)options
                                   animations:(void (^)(void))animations 
                                completion:(void (^)(BOOL finished))completion;

參數(shù)說明：
duration：動畫的持續(xù)時間
options：轉(zhuǎn)場動畫的類型
animations：將改變視圖屬性的代碼放在這個block中
completion：動畫結(jié)束后，會自動調(diào)用這個block

UIView與核心動畫區(qū)別?

  • 核心動畫： 只作用在layer。
  • 核心動畫： 看到的都是假像，它并沒有去修改UIView的真實(shí)位置。

什么時候使用核心動畫?
1、當(dāng)不需要與用戶進(jìn)行交互，使用核心動畫。
2、當(dāng)要根據(jù)路徑做動畫時，使用核心動畫。
3、當(dāng)做轉(zhuǎn)場動畫時，使用核心動畫 。(核心動畫轉(zhuǎn)場類型比較多)

定時器CADisplayLink

  • CADisplayLink是一種以屏幕刷新頻率觸發(fā)的時鐘機(jī)制，每秒鐘執(zhí)行大約60次左右。
  • CADisplayLink是一個計(jì)時器，可以使繪圖代碼與視圖的刷新頻率保持同步。而NSTimer無法確保計(jì)時器實(shí)際被觸發(fā)的準(zhǔn)確時間。
  • 使用方法：
    • 定義CADisplayLink并制定觸發(fā)調(diào)用方法。
    • 將CADisplayLink添加到主運(yùn)行循環(huán)隊(duì)列。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

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

  • 1 CALayer IOS SDK詳解之CALayer（一） http://doc.okbase.net/Hell...
    Kevin_Junbaozi閱讀 5,338評論 3贊 23
  • 在iOS中隨處都可以看到絢麗的動畫效果，實(shí)現(xiàn)這些動畫的過程并不復(fù)雜，今天將帶大家一窺iOS動畫全貌。在這里你可以看...
    F麥子閱讀 5,270評論 5贊 13
  • 在iOS中隨處都可以看到絢麗的動畫效果，實(shí)現(xiàn)這些動畫的過程并不復(fù)雜，今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,696評論 6贊 30
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,326評論 1贊 23
  • 在iOS實(shí)際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉(zhuǎn)場動畫。下面我們逐個介紹。...
    4b5cb36a2ee2閱讀 433評論 0贊 0

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