前段時間有部分朋友一緻咨詢關于QQ空間頁面點贊動畫的實現,最近難得的空閑時間将iOS的動畫整理了下,簡單實現了點贊的發散動畫,在這裡稍作總結.

一、首先展示效果圖片

1

2

3

4

代碼實現

4>其他屬性:設置時長,延遲,曲線,重複次數,單獨監聽動畫開始和結束的方法

5>特點:可以實現翻轉,旋轉,偏移,翻頁,縮放,轉場等高級動畫效果,但是操作稍微麻煩!

Block動畫

1>鑒于首尾式動畫的操作稍複雜,block将動畫的設置屬性和操作過程一步封裝回調操作簡便

2>block動畫的操作步驟 直接調用[UIView animationwith…..] 方法即可

3>簡單實現分大概4個方法參數由少到多;演示參數較多的方法

代碼演示

參數介紹: duration：動畫的持續時間

delay：動畫延遲delay秒後開始

dampingRatio:動畫的振幅 取值範圍0-1

velocity:動畫的速度

options：動畫的節奏控制選項

animations：将動畫代碼放在這個block中

completion：監聽動畫結束後block

通過振幅可以實現水滴滴答的動畫和點贊動畫中圖案放大原理都是一樣的.

1>轉場動畫

代碼演示

參數介紹: duration：動畫的持續時間

delay：動畫延遲delay秒後開始

options：轉場動畫的樣式

animations：切換圖片的代碼放在這個block中

completion：監聽動畫結束後block

相對核心動畫的轉場動畫來說系統的轉場樣式比較少,不夠豐富

核心動畫 Core Animation

談到核心動畫CAAnimation第一點必須明确的是CAAnimtion是直接作用于UIView的内部CALayer上的, Core Animation負責所有的平移、旋轉,縮放以及所有的iOS動畫效果,操作簡單,節省CPU,原因是所有的動畫執行都是放在後台操作的不會阻塞主線程;從圖形處理方面的動畫來看,drawRect的多次重繪會占用主線程資源,消耗更多的CPU,不及CAAnimation的處理效果

CAAnimation的動畫分類

分類示意圖

從圖中可以看出在CAAnimation的抽象類的下面由各個不同功能的子類來實現不同的動畫效果,當然CAPropertyAnimation也是個抽象類. 主要分為:基本動畫CABasicAnimation,關鍵幀動畫CAKeyframeAnimation,組動畫CAAnimationGroup,轉場動畫CATransition,

CAAnimation的操作步驟:

1>創建動畫對象

2>設置動畫相關屬性

3>添加動畫對象到對應的layer上

4>想删除已經播放的動畫可以使用:removeAnimationForKey:

代碼 演示

CAAnimation的動畫特點:

1>動畫改變的不是控件的真實位置, 如果動畫結束需要真實位置發生改變需要手動實現

2>動畫播放軌迹每次都會自動返回

a)組織動畫返回的方法

ban.removedOnCompletion = NO;

ban.fillMode = kCAFillModeForwards

CAAnimation四個子動畫的特點:

1>基本動畫CABasicAnimation:隻能實現旋轉,縮放,平移動畫,2D,3D均可;缺點每次隻能執行一個動畫,不能多個同時,或者一次性實現多個動畫軌迹.

2>關鍵幀動畫CAKeyframeAnimation:通過values,path兩個屬性可以一次性實現多幀動畫,這樣指定特定的形狀, 貝塞爾曲線動畫實現特别方便.

3>組動畫CAAnimationGroup:可以同時将多個動畫組合同時播放.

4>轉場動畫CATransition:相對于UIView的轉場 樣式豐富.

QQ點贊動畫的實現原理:

我們通過對系統動畫的剖析,接下來分析點贊動畫的實現過程:

1>首先從動畫的複雜度來看 UView的動畫實現困難,CAAnimation中關鍵幀動畫CAKeyframeAnimation

2>接下來針對環狀繪制動畫來說,規則不固定 需要結合UIBezierPath和CALayer的子類CAShapeLayer結合實現;因為CALayer默認是方形的

a)圖片本身的縮放動畫原理改變關鍵幀動畫的values的取值,一大一小就可以實現

b)

代碼演示

c)圓環的變化原理将一個圓環shapeLayer的path屬性的半徑從1到對應的比例變化,放到關鍵幀動畫中實現播放

d)

代碼示意

3>再次周圍擴散動畫,小圓點由大變小在到無,也是需要CAShapeLayer加核心動畫來播放,根據需求的圓點個數使用循環添加shapelayer,根據個數計算出每個圓點的動畫和角度位置實現動畫效果

a)

代碼示意

4>最後的閃爍動畫,需要使用定時器和核心動畫實現

a)獲取每個小圓點

b)創建CADisplayLink

c)設置link的刷幀頻率來改變圓點的色彩變化實現閃爍

5>每個動畫階段執行結束需要移除動畫,避免多個核心動畫的幹擾

6>link在不使用的時候需要考慮CPU消耗問題,需要銷毀

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!