聲明：本文是本人 編程小翁 原創(chuàng)，轉(zhuǎn)載請(qǐng)注明。

動(dòng)效設(shè)計(jì)一直是iOS平臺(tái)的優(yōu)勢(shì)，良好的動(dòng)效設(shè)計(jì)可以很好地提升用戶體驗(yàn)。而動(dòng)畫則是動(dòng)效的基礎(chǔ)支撐。本動(dòng)畫系列將從易到難逐步分析，本文就是第一站:CABasicAnimation。
通過(guò)本文，你能收獲到：

• 以拍電影的思路寫動(dòng)畫代碼

• 編寫自己的簡(jiǎn)單動(dòng)畫庫(kù)

一、概念

這個(gè)部分你需要了解以下概念: CALayer、CAAnimation、拍電影(R U kidding me?)

1、CALayer

CALayer是個(gè)與UIView很類似的概念，同樣有backgroundColor、frame等相似的屬性，我們可以將UIView看做一種特殊的CALayer。但實(shí)際上UIView是對(duì)CALayer封裝，在CALayer的基礎(chǔ)上再添加交互功能。UIView的顯示必須依賴于CALayer。
我們同樣可以跟新建view一樣新建一個(gè)layer，然后添加到某個(gè)已有的layer上，同樣可以對(duì)layer調(diào)整大小、位置、透明度等。
一般來(lái)說(shuō)，layer可以有兩種用途：一是對(duì)view相關(guān)屬性的設(shè)置，包括圓角、陰影、邊框等參數(shù)，更詳細(xì)的參數(shù)請(qǐng)點(diǎn)擊這里；二是實(shí)現(xiàn)對(duì)view的動(dòng)畫操控。因此對(duì)一個(gè)view進(jìn)行動(dòng)畫，本質(zhì)上是對(duì)該view的.layer進(jìn)行動(dòng)畫操縱。

2、CAAnimation

在iOS中Core Animation層的動(dòng)畫是依賴CAAnimation類實(shí)現(xiàn)的。這里提到一個(gè)概念，那就是Core Animation層動(dòng)畫。沒錯(cuò)，既然有所謂的Core Animation層動(dòng)畫那就應(yīng)該有其他層動(dòng)畫。看下面的圖：

1.png

在iOS的不同圖形層次中都可以寫動(dòng)畫代碼。越上層，封裝程度越高，動(dòng)畫實(shí)現(xiàn)越簡(jiǎn)潔越簡(jiǎn)單，但是自由度越低；反之亦然。本系列著重介紹Core Animation層的基本動(dòng)畫實(shí)現(xiàn)方案。
CAAnimation可以分為以下幾類：

• CABasicAnimation
  基礎(chǔ)動(dòng)畫，通過(guò)設(shè)定起始點(diǎn)，終點(diǎn)，時(shí)間，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)?？梢钥醋鎏厥獾腃AKeyFrameAnimation

• CAKeyframeAnimation
  關(guān)鍵幀動(dòng)畫，可定制度比CABasicAnimation高，也是本系列的接下來(lái)的內(nèi)容
• CAAnimationGroup
  組動(dòng)畫，支持多個(gè)CABasicAnimation或者CAKeyframeAnimation動(dòng)畫同時(shí)執(zhí)行

本文作為系列的第一篇文章，先從最簡(jiǎn)單的CABasicAnimation說(shuō)起。

3、拍電影

此刻你心里估計(jì)在想：What the f**k? 但其實(shí)實(shí)現(xiàn)CABasicAnimation動(dòng)畫的過(guò)程與拍電影的流程非常類似：

準(zhǔn)備演員--->CALayer，規(guī)定電影的主角是誰(shuí)
準(zhǔn)備劇本--->CAAnimation，規(guī)定電影該怎么演，怎么走，怎么變換
開拍--->AddAnimation，開始執(zhí)行

唯一的不同估計(jì)是電影里演員很重要，顏值擔(dān)當(dāng)那是必須的，只要顏值夠高，狗血?jiǎng)”疽埠苁軞g迎。但對(duì)于基礎(chǔ)動(dòng)畫，演員沒太大作用，關(guān)鍵是劇本要好要硬。也就是CABasicAnimation要足夠精彩。
不扯淡了，進(jìn)入下一部分。

二、開始拍電影

按照上面的解釋，要想實(shí)現(xiàn)一個(gè)類似圖2中藍(lán)色方塊的心跳效果就需要這么做：

step1: 準(zhǔn)備演員(CALayer初始化)

CALayer *scaleLayer = [[CALayer alloc] init];
 scaleLayer.backgroundColor = [UIColor blueColor].CGColor;
 scaleLayer.frame = CGRectMake(60, 20 + kYOffset, 50, 50);
 scaleLayer.cornerRadius = 10;
 [self.view.layer addSublayer:scaleLayer];
 [scaleLayer release];//MRC下

step2: 準(zhǔn)備劇本(配置CABasicAnimation)

//設(shè)定劇本
    CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale”];//keyPath不能填錯(cuò)，有特定被選值
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation.autoreverses = YES;
    scaleAnimation.fillMode = kCAFillModeForwards;
    scaleAnimation.removedOnCompletion = NO;
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.duration = 0.8;

step3: 開演

    [scaleLayer addAnimation:scaleAnimation forKey:@"scaleAnimation”];

圖2.gif

代碼中有幾個(gè)參數(shù)需要解釋一下：

• keyPath: 決定基礎(chǔ)動(dòng)畫的類型，該值不能隨便取，一旦取錯(cuò)就達(dá)不到想要的效果。要改變位置就取position，要改變透明度就取opacity，要等比例縮放就取transform.scale...更多key請(qǐng)看下面的表1，要盡量能記住這些內(nèi)容
• fromValue: 動(dòng)畫的起始狀態(tài)值，雖然iOS文檔給出的類型是id，不過(guò)這里應(yīng)該傳NSValue對(duì)象，比如NSNumber(NSNubmer繼承自NSValue)。其具體含義
• autoreverse: 當(dāng)動(dòng)畫執(zhí)行到toValue指定的狀態(tài)時(shí)是從toValue的狀態(tài)逆回去，還是直接跳到fromValue的狀態(tài)再執(zhí)行一遍
• fileMode: fillMode的作用就是決定當(dāng)前對(duì)象過(guò)了非active時(shí)間段的行為. 非active時(shí)間段是指動(dòng)畫開始之前以及動(dòng)畫結(jié)束之后。如果是一個(gè)動(dòng)畫CAAnimation,則需要將其removedOnCompletion設(shè)置為NO,要不然fillMode不起作用. 下面來(lái)講各個(gè)fillMode的意義：

• kCAFillModeRemoved 這個(gè)是默認(rèn)值,也就是說(shuō)當(dāng)動(dòng)畫開始前和動(dòng)畫結(jié)束后,動(dòng)畫對(duì)layer都沒有影響,動(dòng)畫結(jié)束后,layer會(huì)恢復(fù)到之前的狀態(tài)
• kCAFillModeForwards 當(dāng)動(dòng)畫結(jié)束后,layer會(huì)一直保持著動(dòng)畫最后的狀態(tài)
• kCAFillModeBackwards 這個(gè)和kCAFillModeForwards是相對(duì)的,就是在動(dòng)畫開始前,你只要將動(dòng)畫加入了一個(gè)layer,layer便立即進(jìn)入動(dòng)畫的初始狀態(tài)。因?yàn)橛锌赡艹霈F(xiàn)fromValue不是目前l(fā)ayer的初始狀態(tài)的情況，如果fromValue就是layer當(dāng)前的狀態(tài)，則這個(gè)參數(shù)就沒太大意義。
• kCAFillModeBoth 理解了上面兩個(gè),這個(gè)就很好理解了,這個(gè)其實(shí)就是上面兩個(gè)的合成.動(dòng)畫加入后開始之前,layer便處于動(dòng)畫初始狀態(tài),動(dòng)畫結(jié)束后layer保持動(dòng)畫最后的狀態(tài).

表1.png

接下來(lái)我們來(lái)看一下怎么實(shí)現(xiàn)多個(gè)動(dòng)畫同時(shí)執(zhí)行，這里會(huì)用到上面提到的CAAnimationGroup類。我們的目標(biāo)是實(shí)現(xiàn)圖2中最底下的紫色方塊的動(dòng)畫，縮放、移動(dòng)、旋轉(zhuǎn)同時(shí)進(jìn)行。
這時(shí)候你可以再回想一下拍電影的過(guò)程：

• 演員，CALayer對(duì)象
• 劇本，這時(shí)候就需要準(zhǔn)備CAAnimationGroup來(lái)當(dāng)劇本了，劇本由諸如縮放、移動(dòng)等小劇本合成。
• 開演，addAnimation

直接看劇本的代碼：
縮放：

CABasicAnimation *scaleAnimation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
    scaleAnimation.fromValue = [NSNumber numberWithFloat:1.0];
    scaleAnimation.toValue = [NSNumber numberWithFloat:1.5];
    scaleAnimation.autoreverses = YES;
    scaleAnimation.repeatCount = MAXFLOAT;
    scaleAnimation.duration = 0.8;

移動(dòng):

CABasicAnimation *moveAnimation = [CABasicAnimation animationWithKeyPath:@"position"];
    moveAnimation.fromValue = [NSValue valueWithCGPoint:groupLayer.position];
    moveAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(320 - 80, groupLayer.position.y)];
    moveAnimation.autoreverses = YES;
    moveAnimation.repeatCount = MAXFLOAT;
    moveAnimation.duration = 2;

旋轉(zhuǎn)：

CABasicAnimation *rotateAnimation = [CABasicAnimation animationWithKeyPath:@"transform.rotation.x"];
    rotateAnimation.fromValue = [NSNumber numberWithFloat:0.0];
    rotateAnimation.toValue = [NSNumber numberWithFloat:6.0 * M_PI];
    rotateAnimation.autoreverses = YES;
    rotateAnimation.repeatCount = MAXFLOAT;
    rotateAnimation.duration = 2;

你也注意到了，你可以認(rèn)為其實(shí)每個(gè)小劇本都是獨(dú)立的，他們之間唯一的聯(lián)系就是一起被放到GroupAnimation中：

CAAnimationGroup *groupAnnimation = [CAAnimationGroup animation];
    groupAnnimation.duration = 2;
    groupAnnimation.autoreverses = YES;
    groupAnnimation.animations = @[moveAnimation, scaleAnimation, rotateAnimation];
    groupAnnimation.repeatCount = MAXFLOAT;

最后把整合后的大劇本groupAnimation交給導(dǎo)演開拍：

[groupLayer addAnimation:groupAnnimation forKey:@"groupAnnimation”];

這樣動(dòng)畫就會(huì)自動(dòng)執(zhí)行。

三、編寫自己的動(dòng)畫庫(kù)

從第二節(jié)我們知道，實(shí)現(xiàn)基本動(dòng)畫最重要的要有一個(gè)CABasicAnimation。于是乎，我們可以用一個(gè)工具類或者類擴(kuò)展提前寫好一些動(dòng)畫類型(劇本)，返回值是CABasicAnimation對(duì)象。每想到一種新的動(dòng)畫類型就可以往里面加，逐漸形成自己動(dòng)畫代碼庫(kù)。比如這樣：

圖3 動(dòng)畫庫(kù)舉例.png

要用的時(shí)候直接取來(lái)用：

圖4 動(dòng)畫庫(kù)應(yīng)用舉例.png

以上代碼取自我的一份開源的角標(biāo)庫(kù)一句話實(shí)現(xiàn)badge效果，動(dòng)畫庫(kù)文件是CAAnimation+WAnimation.h，歡迎star哦。

四、The End

以上就是CABasicAnimation基本動(dòng)畫的全部?jī)?nèi)容了，以拍電影的思路去寫代碼，再記住一些keypath以及annimation的屬性含義，你就可以實(shí)現(xiàn)自己的炫酷基礎(chǔ)動(dòng)畫！

歡迎留言，如果寫的不對(duì)的地方還請(qǐng)不吝指出。

• 喜歡本文可以點(diǎn)一下喜歡并關(guān)注我，或者留個(gè)言示個(gè)愛(拋媚眼中)
• 不喜歡可以留言提建議，我必虛心接受
• 歡迎轉(zhuǎn)載