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