轉(zhuǎn)載原文地址：http://www.cocoachina.com/ios/20170124/18617.html

一、基礎(chǔ)知識

CAAnimation.png

二、CABasicAnimation

1. 動畫的屬性和解釋

2.屬性值的解釋

repeatCount : 如果在swift中需要一直不斷重復(fù)：Float.infinity，OC:HUGE_VALF

timingFunction:

timingFunction.png

kCAMediaTimingFunctionLinear--在整個動畫時間內(nèi)動畫都是以一個相同的速度來改變。也就是勻速運動。一個線性的計時函數(shù)，同樣也是CAAnimation的timingFunction屬性為空時候的默認函數(shù)。線性步調(diào)對于那些立即加速并且保持勻速到達終點的場景會有意義（例如射出槍膛的子彈）。

kCAMediaTimingFunctionEaseIn：動畫開始時會較慢，之后動畫會加速。一個慢慢加速然后突然停止的方法。對于之前提到的自由落體的例子來說很適合，或者比如對準一個目標的導(dǎo)彈的發(fā)射。

kCAMediaTimingFunctionEaSEOut：動畫在開始時會較快，之后動畫速度減慢。它以一個全速開始，然后慢慢減速停止。它有一個削弱的效果，應(yīng)用的場景比如一扇門慢慢地關(guān)上，而不是砰地一聲。

kCAMediaTimingFunctionEaseInEaseOut：動畫在開始和結(jié)束時速度較慢，中間時間段內(nèi)速度較快。創(chuàng)建了一個慢慢加速然后再慢慢減速的過程。這是現(xiàn)實世界大多數(shù)物體移動的方式，也是大多數(shù)動畫來說最好的選擇。如果只可以用一種緩沖函數(shù)的話，那就必須是它了。那么你會疑惑為什么這不是默認的選擇，實際上當(dāng)使用UIView的動畫方法時，他的確是默認的，但當(dāng)創(chuàng)建CAAnimation的時候，就需要手動設(shè)置它了。

kCAMediaTimingFunctionDefault：它和kCAMediaTimingFunctionEaseInEaseOut很類似，但是加速和減速的過程都稍微有些慢。它和kCAMediaTimingFunctionEaseInEaseOut的區(qū)別很難察覺，可能是蘋果覺得它對于隱式動畫來說更適合（然后對UIKit就改變了想法，而是使用kCAMediaTimingFunctionEaseInEaseOut作為默認效果），雖然它的名字說是默認的，但還是要記住當(dāng)創(chuàng)建顯式的CAAnimation它并不是默認選項（換句話說，默認的圖層行為動畫用kCAMediaTimingFunctionDefault作為它們的計時方法）。

使用方法:

fillMode

fillMode.png

kCAFillModeForwards：動畫開始之后layer的狀態(tài)將保持在動畫的最后一幀，而removedOnCompletion的默認屬性值是 YES，所以為了使動畫結(jié)束之后layer保持結(jié)束狀態(tài)，應(yīng)將removedOnCompletion設(shè)置為NO。

kCAFillModeBackwards：將會立即執(zhí)行動畫的第一幀，不論是否設(shè)置了 beginTime屬性。觀察發(fā)現(xiàn)，設(shè)置該值，剛開始視圖不見，還不知道應(yīng)用在哪里。

kCAFillModeBoth：該值是 kCAFillModeForwards 和 kCAFillModeBackwards的組合狀態(tài)

kCAFillModeRemoved：動畫將在設(shè)置的 beginTime 開始執(zhí)行（如沒有設(shè)置beginTime屬性，則動畫立即執(zhí)行），動畫執(zhí)行完成后將會layer的改變恢復(fù)原狀。

3.使用心得

盡量不要設(shè)置removedOnCompletion = false ，因為配合CAAnimationDelegate會帶來循環(huán)運用的問題，如果需要動畫停留在最后的狀態(tài)，可以直接設(shè)置View的center屬性在動畫結(jié)束的位置Point

之所以會出現(xiàn) 循環(huán)引用 因為由于CAAnimation的delegate使用的strong類型:看一下簡要的說明圖：

CAAnimationDelegate.png

解決有時視圖會閃動一下的問題，我們可以將layer的屬性值設(shè)置為我們的動畫最后要達到的值，然后再給我們的視圖添加layer動畫。

4.樣例展示

旋轉(zhuǎn)動畫

旋轉(zhuǎn)動畫.gif

位移動畫

位移動畫.gif

背景顏色變化動畫、背景圖片變化動畫、圓角變化動畫

動畫集合-1.gif

比例縮放動畫

比例縮放動畫-1.gif

size大小縮放、透明值變化動畫（可用作閃爍效果）

size大小縮放、透明值變化動畫.gif

5.常用KeyPath總結(jié)

三、CAKeyframeAnimation

CAKeyframeAnimation是核心動畫里面的幀動畫,它提供了按照指定的一串值進行動畫,好像拍電影一樣的一幀一幀的效果

1.屬性解釋

values： 是許多值組成的數(shù)組用來進行動畫的。這個屬性比較特別，只有在path屬性值為nil的時候才有作用

path:路徑,可以指定一個路徑,讓動畫沿著這個指定的路徑執(zhí)行。

cacluationMode:在關(guān)鍵幀動畫中還有一個非常重要的參數(shù),那便是calculationMode,計算模式.其主要針對的是每一幀的內(nèi)容為一個座標點的情況,也就是對anchorPoint 和 position 進行的動畫.當(dāng)在平面座標系中有多個離散的點的時候,可以是離散的,也可以直線相連后進行插值計算,也可以使用圓滑的曲線將他們相連后進行插值計算.

1）kCAAnimationLinear calculationMode的默認值,r自定義控制動畫的時間（線性）可以設(shè)置keyTimes,表示當(dāng)關(guān)鍵幀為座標點的時候,關(guān)鍵幀之間直接直線相連進行插值計算;

2）kCAAnimationDiscrete 離散的,就是不進行插值計算,所有關(guān)鍵幀直接逐個進行顯示;

3）kCAAnimationPaced 節(jié)奏動畫自動計算動畫的運動時間,使得動畫均勻進行,而不是按keyTimes設(shè)置的或者按關(guān)鍵幀平分時間,此時keyTimes和timingFunctions無效;

4）kCAAnimationCubic 對關(guān)鍵幀為座標點的關(guān)鍵幀進行圓滑曲線相連后插值計算,對于曲線的形狀還可以通過tensionValues,continuityValues,biasValues來進行調(diào)整自定義,這里的數(shù)學(xué)原理是Kochanek–Bartels spline,這里的主要目的是使得運行的軌跡變得圓滑,曲線動畫需要設(shè)置timingFunctions

kCAAnimationCubicPaced 看這個名字就知道和kCAAnimationCubic有一定聯(lián)系,其實就是在kCAAnimationCubic的基礎(chǔ)上使得動畫運行變得均勻,就是系統(tǒng)時間內(nèi)運動的距離相同,此時keyTimes以及timingFunctions也是無效的.

keyTimes:一個包含若干NSNumber對象值的數(shù)組，用來區(qū)分動畫的分割時機。值得注意的是,這些NSNumber對象的浮點型值在0.0~1.0之間。里面的值后一個比前一個要大或者相等。最好的結(jié)果是這個數(shù)組中的值和values里面的值或者path控制的值對應(yīng)，否則可能會出現(xiàn)不了你想要的結(jié)果。屬性為應(yīng)用在每一關(guān)鍵幀指定應(yīng)用到每一個關(guān)鍵幀上的計時器。該屬性只在calculationMode屬性被設(shè)置為kCAAnimationLinear，kCAAnimaitonDiscrete，kCAAnimationCubic時被使用。它不使用在節(jié)奏動畫中。keyTimes定義了應(yīng)用在每一關(guān)鍵幀的時間點。所有中間值的定時由定時函數(shù)控制，定時函數(shù)允許你對各個部分應(yīng)用緩入或緩出曲線定時。如果你不指定任何定時函數(shù)，動畫將會是線性的

rotationMode : 旋轉(zhuǎn)樣式

1）kCAAnimationRotateAuto 根據(jù)路徑自動旋轉(zhuǎn)

2）kCAAnimationRotateAutoReverse 根據(jù)路徑自動翻轉(zhuǎn)

2.樣例展示

CAKeyframeAnimation路徑動畫.gif

三、CATransition

主要用于轉(zhuǎn)場動畫從一個場景以動畫的形式過渡到另一個場景

1.屬性解釋

type：轉(zhuǎn)場動畫的類型，一個自定義的轉(zhuǎn)場動畫中指定的過濾器屬性

另外還有一些系統(tǒng)未公開的動畫效果：

效果，就不一一列舉了，可以看下效果圖

subtype：轉(zhuǎn)場動畫將要去往的方向

startPRogress、endProgress： 開始和結(jié)束的位置進度，數(shù)值介于[0,1]之間，結(jié)束值一定是大于開始值的

3.動畫樣例

CATransition路徑動畫.gif

四、CaspringAnimation

iOS9才引入的動畫類，在以前我們都是使用facebook的pop來做這種彈簧效果，它繼承于CABaseAnimation，用于制作彈簧動畫

1.參數(shù)說明

mass:質(zhì)量，影響圖層運動時的彈簧慣性，質(zhì)量越大，彈簧拉伸和壓縮的幅度越大，動畫的速度變慢，并且波動幅度變大

stiffness:剛度系數(shù)(勁度系數(shù)/彈性系數(shù))，剛度系數(shù)越大，形變產(chǎn)生的力就越大，運動越快

damping:阻尼系數(shù)，阻止彈簧伸縮的系數(shù)，阻尼系數(shù)越大，停止越快

initialVelocity:初始速率，動畫視圖的初始速度大小速率為正數(shù)時，速度方向與運動方向一致，速率為負數(shù)時，速度方向與運動方向相反如果

settlingDuration:結(jié)算時間 返回彈簧動畫到停止時的估算時間，根據(jù)當(dāng)前的動畫參數(shù)估算通常彈簧動畫的時間使用結(jié)算時間比較準確

2.例子展示

CASpringAnimation彈簧動畫.gif

五、一些有意思的動畫樣例

實現(xiàn)畫線過程的動畫，雖然很簡單，但看到很多人都問過，效果如下：

drawLine動畫.gif

利用正弦曲線做的，效果還行，相信很多人都做過：

water動畫.gif

左后奉上一個希望的小火苗，粒子動畫，效果很驚人，游戲用的比較多，有興趣，也可以研究下

fire動畫.gif

魚在魚池游動的動畫效果：

fish動畫.gif

最后的最后，奉上文章里部分例子的Demo地址：exampleForAnimation