偶然間在CocoaChina上看到了一個動畫類的文章，還有支付寶咻一咻的動圖。俗話說，自己動手，豐衣足食，從而就出現了下面這個動圖（動圖做的稍有偏差）。源代碼查看仿支付寶咻一咻。
其實這個功能實現起來并不是很困難，我是用的最笨的辦法，創建了三個圖層，利用定時器來控制不同圖層添加動畫的不同時間。可以先添加一個圖層來實現類似的效果。
顯而易見的是，在單個圖層的動畫中，包括大小的變化和透明度的變化，這個時候就需要一個動畫組CAAnimationGroup，將不同的動畫添加到數組中負值給CAAnimationGroup唯一的屬性animations之后，所有的動畫就可以并發執行。需要注意的是，動畫組中的動畫不會被壓縮，所以超出動畫組時常的部分將要被剪掉。在設置動畫組的時候還需要提到的一個是CAMediaTimingFunction —— 速度控制函數，顧名思義，就是用來控制動畫的執行速度效果的。他包括以下幾種類型：
kCAMediaTimingFunctionLinear（線性）：勻速，給你一個相對靜態的感覺
kCAMediaTimingFunctionEaseIn（漸進）：動畫緩慢進入，然后加速離開
kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進入，然后減速的到達目的地
kCAMediaTimingFunctionEaseInEaseOut（漸近漸出）：動畫緩慢的進入，中間加速，然后減速的到達目的地。這個是動畫的默認行為
kCAMediaTimingFunctionDefault（默認）：同上
說完動畫組接下來就是更重要的添加到動畫組中的動畫了。我在寫demo的過程中用了兩種，分別是CABasicAnimation和CAKeyframeAnimation。
先說一下他們的共同的屬性，如下：
duration：動畫的時長
repeatCount：重復的次數
repeatDuration：設置動畫的時間。在該時間內動畫一直執行，不計次數。
beginTime：指定動畫開始的時間。從開始延遲幾秒的話，設置為【CACurrentMediaTime() +秒數】的方式
timingFunction：設置動畫的速度變化
autoreverses：動畫結束時是否執行逆動畫
一些常用的animationWithKeyPath值的總結:
transform.scale：比例轉化，例如：@(0.8)
transform.scale.x：寬的比例，例如：@(0.8)
transform.scale.y：高的比例，例如：@(0.8)
transform.rotation.x：圍繞x軸旋轉，例如：@(M_PI)
transform.rotation.y：圍繞y軸旋轉，例如：@(M_PI)
transform.rotation.z：圍繞z軸旋轉，例如：@(M_PI)
cornerRadius：圓角的設置，例如：@(50)
backgroundColor：背景顏色的變化，例如：(id)[UIColor purpleColor].CGColor
bounds：大小，中心不變，例如：[NSValue valueWithCGRect:CGRectMake(0, 0, 200, 200)];
position：位置(中心點的改變)，例如：[NSValue valueWithCGPoint:CGPointMake(300, 300)];
contents：內容，例如：UIImageView的圖片imageAnima.toValue = (id)[UIImage imageNamed:@"to"].CGImage;
opacity：透明度，例如：@(0.7)
contentsRect.size.width：橫向拉伸縮放，例如：@(0.4)最好是0~1之間的
接下來就是他們的區別了：CABasicAnimation只能從一個數值(fromValue)變到另一個數值(toValue)，而CAKeyframeAnimation會使用一個NSArray保存這些數值，如下：
values：就是上述的NSArray對象。里面的元素稱為”關鍵幀”(keyframe)。動畫對象會在指定的時間(duration)內，依次顯示values數組中的每一個關鍵幀
keyTimes：可以為對應的關鍵幀指定對應的時間點,其取值范圍為0到1.0,keyTimes中的每一個時間值都對應values中的每一幀.當keyTimes沒有設置的時候,各個關鍵幀的時間是平分的。
其實CABasicAnimation可看做是最多只有2個關鍵幀的CAKeyframeAnimation。
代碼對比如下：
創建完動畫之后，將動畫添加到圖層上就可以實現單個圖層的動畫了，那么想要實現類似支付寶咻一咻的動畫需要怎么做呢？前面也說了，我用的是最笨的方法，創建了三個圖層，通過定時器來控制不同圖層的動畫執行時間。這里需要注意的一點就是動畫的時長duration、圖層的個數還有定時器的時間是相互牽制的，不然就會出現每個圖層出現的很混亂的結果。想要什么樣的效果就自己慢慢調吧。
