iOS - 核心動畫

作者:Mitchell

一、基本概念

  • CoreAnimation 可用在 Mac OS X和iOS平臺
  • CoreAnimation 的動畫執(zhí)行過程都是在后臺操作的，不會阻塞主線程。
  • CoreAnimation 是直接作用在CALayer 上的，并不是UIView。
  • 用一張圖來簡要介紹一下核心動畫成員之間的關(guān)系。
圖1.png
  • 為何要封裝成這么多的類？
    • 體現(xiàn)了面向?qū)ο蟮奶匦?，就是每個對象都控制著不同的特性，每個類控制動畫一方面。

二、基本動畫

  • CAAnimation：
    • 是多有動畫對象的父類，負(fù)責(zé)控制動畫的持續(xù)時間和速度，是個抽象類，不能直接使用。
    • 屬性的簡單說明：
      • duration：動畫的持續(xù)時間
      • repeatCount：重復(fù)次數(shù)，無線循環(huán)可設(shè)置為HUGE_VALF或者M(jìn)AXFLOAT
      • removeOnCompletion：默認(rèn)為YES，代表動畫執(zhí)行完畢后就從圖層上移除，圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)，如果想讓圖層保持顯示動畫執(zhí)行后的狀態(tài)，那就設(shè)置為NO，不過還要設(shè)置fillMode為kCAFillMOdeForwards。
      • fillModes：決定當(dāng)前對象在非 active 時間段的行為。比如動畫開始之前或者動畫結(jié)束之后
      • beginTime：可以用來設(shè)置動畫延遲執(zhí)行的時間，如果想延遲10S，就設(shè)置為CACurrentMediaTime（）+2。 CACurrentMediaTime（）為圖層的當(dāng)前時間
      • timingFunction：速度控制函數(shù)，控制畫運(yùn)行的節(jié)奏
      • delegate：動畫代理
    • fillMode 屬性值(要想 fillMode 有效，最好設(shè)置removedOnComletion = NO)
      • 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 這個其實就是上面兩個的合成.動畫加入后開始之前，layer便處于動畫初始狀態(tài)，動畫結(jié)束后layer保持動畫最后的狀態(tài)
    • 速度控制函數(shù)（CAMediaTimingFunction）
      • kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態(tài)的感覺
      • kCAMediaTimingFunctionEaseIn（漸進(jìn)）：動畫緩慢進(jìn)入，然后加速離開
      • kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進(jìn)入，然后減速的到達(dá)目的地
      • kCAMediaTimingFunctionEaseInEaseOut（漸進(jìn)漸出）：動畫緩慢的進(jìn)入，中間加速，然后減速的到達(dá)目的地。這個是默認(rèn)的動畫行為。
  • CAPropertyAnimation
    • 是 CAAnimation 的子類，也是抽象類，要想創(chuàng)建動畫對象，應(yīng)該使用它的兩個子類：
      • CABasicAnimation
      • CAKeyframeAnimation
    • keyPath：通過指定 CALayer 的屬性名稱keyPath，對layer的這個屬性的值進(jìn)行修改，達(dá)到相應(yīng)的動畫效果。比如@“position” 是修改 position 達(dá)到移動的效果。
  • CABasicAniamtion
    • 基本動畫是 CAPropertyAnimation 的子類
    • 屬性說明
      • fromValue：keyPath相應(yīng)屬性的初始值
      • toValue：keyPath相應(yīng)屬性的結(jié)束值

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

  • CAKeyframeAnimation
    • 關(guān)鍵幀動畫，是CAPropertyAnimation的子類
    • 與 CABasicAniamtion 的區(qū)別是 CABasicAniamtion 是從fromValue 到 toValue 兩個值的變化，而 CAKeyframeAnimation 可以使用 NSArray 來保存這些數(shù)值。
    • 屬性說明：
      • values：NSArray 對象，里面的元素就是“關(guān)鍵幀”，動畫會在指定的時間內(nèi)，依次顯示 values 數(shù)組中的每一個關(guān)鍵幀。
      • path：可以設(shè)置CGPathRef、CGMutablePathRef，讓圖層按照軌跡移動，path只對CALayer的 anchorPoint 和 point 起作用。如果設(shè)置了 path， 那么values將被忽略。
      • keyTimes：關(guān)鍵幀指定對應(yīng)的時間點，取值范圍從0~1，keyTimes中的每一個時間值對應(yīng)values中的每一幀，如果沒有設(shè)置，時間是平分的。
    • CABasicAniamtion 可看做 只有兩個關(guān)鍵幀的 CAKeyframeAnimation。

四、動畫組

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

五、轉(zhuǎn)場動畫

  • CATransition
    • 為層提供移出屏幕和移入屏幕的動畫效果。
    • UINavigationController就是通過CATransition實現(xiàn)了將控制器推入屏幕的動畫效果
    • 動畫屬性：
      • type：動畫過渡類型
      • subtype：動畫過渡方向
      • startProgress：動畫起點
      • endProgress：動畫終點

六、實際應(yīng)用

  • CABasicAnimation:
CABasicAnimation *ani3 = [CABasicAnimation animation];
    ani3.keyPath = @"opacity";
    ani3.fromValue = @1;
    ani3.toValue = @0;
    ani3.duration = 1;
    ani3.repeatCount = MAXFLOAT;
    ani3.removedOnCompletion = NO;
    ani3.fillMode = kCAFillModeBackwards;
  • CAKeyframeAnimation
    • 按照路徑移動
CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
    ani.keyPath = @"position";
    UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    ani.path = path.CGPath;
    ani.repeatCount = MAXFLOAT;
    ani.duration = 2;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeBoth;

- 抖動

#define angle2Radion(angle) (angle / 180.0 * M_PI)
CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
    ani2.keyPath = @"transform.rotation";
    ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    ani2.duration = 0.15;
    ani2.repeatCount = MAXFLOAT;
  • CAAnimationGroup
  • `注意`：每一次group循環(huán)內(nèi)的動畫仍舊是由每個動畫各自的屬性控制，`有一點需要注意就是duration這個屬性，為了保證動畫的連貫性，group的duration屬性最好設(shè)置成與動畫數(shù)組內(nèi)時間最長的動畫一致。` 

 //group
    CAAnimationGroup *group = [CAAnimationGroup animation];
 //位移
    CAKeyframeAnimation* ani = [CAKeyframeAnimation animation];
    ani.keyPath = @"position";
    UIBezierPath *path =[UIBezierPath bezierPathWithArcCenter:_img.center radius:100 startAngle:0 endAngle:M_PI*2 clockwise:YES];
    ani.path = path.CGPath;
    ani.repeatCount = MAXFLOAT;
    ani.duration = 2;
    ani.removedOnCompletion = NO;
    ani.fillMode = kCAFillModeBoth;
 //抖動
    CAKeyframeAnimation*ani2 = [CAKeyframeAnimation animation];
    ani2.keyPath = @"transform.rotation";
    ani2.values = @[@(angle2Radion(-5)),@(angle2Radion(5)),@(angle2Radion(-5))];
    ani2.duration = 0.15;
    ani2.repeatCount = MAXFLOAT;
//透明度
    CABasicAnimation *ani3 = [CABasicAnimation animation];
    ani3.keyPath = @"opacity";
    ani3.fromValue = @1;
    ani3.toValue = @0;
    ani3.duration = 1;
    ani3.repeatCount = MAXFLOAT;
    ani3.removedOnCompletion = NO;
    ani3.fillMode = kCAFillModeBackwards;
//將動畫添加進(jìn)group
    group.animations = @[ani,ani2,ani3];
    group.duration = 2;
    group.repeatCount = MAXFLOAT;
    group.removedOnCompletion = NO;
    group.fillMode = kCAFillModeBackwards;
    [_img.layer addAnimation:group forKey:nil];
  • CATransition
// 界面切換的代碼
    static int i = 2;
    NSString *imageName = [NSString stringWithFormat:@"%d",i];
    _imageView.image = [UIImage imageNamed:imageName];
    i++;
    if (i > 3) {
        i = 1;
    }
    // 只要切換界面 都可以使用轉(zhuǎn)場動畫
    // 誰切換界面 就添加到誰上
    // 轉(zhuǎn)場動畫代碼必須和界面切換的代碼放在一起
    // 轉(zhuǎn)場動畫
    CATransition *anim = [CATransition animation];
    // 指定轉(zhuǎn)場類型
    anim.type = @"pageCurl";
    // 設(shè)置轉(zhuǎn)場的方向
    anim.subtype = kCATransitionFromLeft;
    // 設(shè)置動畫的進(jìn)度
    anim.startProgress = 0;
    anim.endProgress = 1;
    anim.duration = 0.5;
    [_imageView.layer addAnimation:anim forKey:nil];

七、核心動畫與UIView動畫的區(qū)別

  • 核心動畫的一切都是假象，并不會真是改變layer的值
  • UIView 真實改變屬性才能有動畫
  • 使用場景：
    • UIView 用在需要交互的地方
    • 核心動畫用在不需要交互的地方。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

推薦閱讀更多精彩內(nèi)容

  • Core Animation Core Animation，中文翻譯為核心動畫，它是一組非常強(qiáng)大的動畫處理API，...
    45b645c5912e閱讀 3,056評論 0贊 21
  • "小畫板程序"完成"小畫板"程序。 下載地址：http://git.oschina.net/changyou/my...
    _淺墨_閱讀 702評論 0贊 5
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫，幀動畫，自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,155評論 1贊 23
  • 核心動畫（Core Animation） 一、Core animation簡單介紹 1.Core Animatio...
    亦晴工作室閱讀 552評論 0贊 0
  • 一、關(guān)于核心動畫的介紹 1、核心動畫作用于layer層， layer有兩個屬性Position和achroPoin...
    GPUImage閱讀 336評論 0贊 0