前言
本文主要面向的物件是那些沒有動畫基礎的入門引導，提供一個學習動畫的正確途徑，並且配以專案實戰的效果的重點講解。
正文
這篇文章要實現的效果如下圖
實現這個效果需要了解基本概念
http://www.cnblogs.com/mjios/tag/objective-c/default.html?page=2
這個是明傑大神的入門講解，
你需要從這幾篇文章中瞭解到以下的知識點
UIView和CALayer之間的關係（區別和聯絡）Core Animation框架中使用的類CALayer和Core Animation之間的聯絡CAAnimation的常用屬性
如果你對這些基本的知識點已經全部理清楚，那麼接下來你就可以繼續往下看了，我們實現動畫主要需要學習的類庫QuartzCore,首先看一下這個類庫
首先有我們熟悉的CALayer,對於從來沒有做過動畫的朋友來說，其他的類就不清楚了。下面我就簡單介紹一下主要的類之間關係，以及單獨類主要實現什麼。CAAnimation
CAAnimation.h主要是各類動畫的基類，我們一般不會使用它來做動畫。基本常用屬性
|
1 2 3 4 5 6 |
//公有屬性定義動畫的節奏 @property(nullable, strong) CAMediaTimingFunction *timingFunction; //代理，例如捕捉動畫的開始，動畫的結束等 @property(nullable, strong) id delegate; //動畫執行完是否移除 @property(getter=isRemovedOnCompletion) BOOL removedOnCompletion; |
CABase.h可以忽略不看，是一些基本的配置CADisplayLink.h幀動畫，預設新增定時器，每秒刷多少幀,在gitHub上有facebook出品的一個pop動畫，據說是居於幀動畫
https://github.com/facebook/popCAEAGLLayer是和這個框架聯合使用的，暫時用不到。CAEmitter相關的是粒子動畫，可以實現很多酷炫的效果CAShapeLayer非常重要的一個類，常常與UIKit框架的UIBezierPath貝塞爾曲線聯合使用，繪製曲線，圓形，各種複雜的圖形都會使用到，非常非常重要，我的上一篇文章就是他們兩個的結合CAGradientLayer常見應用於鎖屏底部閃爍的滑動來解鎖。CAReplicatorLayer它獨有的特性是，其子類具有相同的屬性，這篇文章主要是它的應用。
其他的類，我是沒有使用過，所以不做講解。
下面我們看就上述動畫講解一個最簡單，三個點載入動畫，作為入門。
|
1 2 3 4 5 6 7 |
CAReplicatorLayer *replicatorLayer = [CAReplicatorLayer layer]; replicatorLayer.bounds = CGRectMake(0, 0, 100, 100); replicatorLayer.cornerRadius = 10.0; replicatorLayer.position = self.view.center; replicatorLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.2].CGColor; [self.view.layer addSublayer:replicatorLayer]; |
那麼我們會看到這個效果
接下來我們需要新增點
|
1 2 3 4 5 6 7 |
CALayer *dotLayer = [CALayer layer]; dotLayer.bounds = CGRectMake(0, 0, 15, 15); dotLayer.position = CGPointMake(15, replicatorLayer.frame.size.height/2 ); dotLayer.backgroundColor = [UIColor colorWithRed:0.1 green:0.1 blue:0.1 alpha:0.6].CGColor; dotLayer.cornerRadius = 7.5; [replicatorLayer addSublayer:dotLayer]; |
效果圖
接下來我們會想在建立兩個點，然後做動畫就可以，不錯這是一種可實現的思路，可以如果我們要做第一中類似旋轉的動畫，我們需要建立10個點，難道我們一個個去建立嗎？我們現在使用的是CAReplicatorLayer，它有個屬性instanceCount,是子類的個數，然後我們設定每個子類的位置即可
在上述程式碼新增
|
1 2 |
replicatorLayer.instanceCount = 3; replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0); |
效果
需要說明的是instanceTransform這個屬性，它的作用是設定每個子Layer如何變化。CATransform3DMakeTranslation這個類的含義是使Layer根據X、Y、Z軸進行平移。我們需要的是平移，所以使用translation這個屬性，如果我們是第一種圓形排放，那麼我們需要這樣設定
|
1 2 3 4 |
CGFloat count = 10.0; replicatorLayer.instanceCount = count; CGFloat angel = 2* M_PI/count; replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1); |
解釋一下CATransform3DMakeRotation，它是CATransform3D的一個結構（矩陣結構），含義是使Layer在X、Y、Z軸根據給定的角度旋轉。我們需要平面旋轉則座標系為（0，0，1）。
看效果
接下來我們需要新增動畫
|
1 2 3 4 5 6 |
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"]; animation.duration = 1.0; animation.fromValue = @1; animation.toValue = @0; animation.repeatCount = MAXFLOAT; [dotLayer addAnimation:animation forKey:nil]; |
編譯執行看效果：
這不是我們需要的真實效果，我們還需要設定每一個sublayer的instanceDelay屬性。
|
1 |
replicatorLayer.instanceDelay = 1.0/3; |
編譯執行看效果
我們會發現動畫在開始前會有不流暢效果，我們應該給dotLayer一個初始的大小
|
1 |
dotLayer.transform = CATransform3DMakeScale(0, 0, 0); |
這樣我們就能實現這個比較簡單的等待動畫效果。
下面我們總結一下實現這個動畫的步驟：
- 1.首先建立一個可複用的
CAReplicatorLayer,建立這個的目的是為了我新增的子類可以複用，一勞永逸； - 2.新增子
Layer，設定子Layer所需要的樣式； - 3.將子
layer新增到CAReplicatorLayer上，並設定子layer個數和排布； - 4.給子
layer新增動畫效果，特別提醒一點transform一般針對的是縮放和旋轉動畫，當然也可以實現平移動畫。
下面我總結一下常用動畫的 keyPath
transform.rotation：旋轉動畫。
transform.rotation.x：按x軸旋轉動畫。
transform.rotation.y：按y軸旋轉動畫。
transform.rotation.z：按z軸旋轉動畫。
transform.scale：按比例放大縮小動畫。
transform.scale.x：在x軸按比例放大縮小動畫。
transform.scale.y：在y軸按比例放大縮小動畫。
transform.scale.z：在z軸按比例放大縮小動畫。
position：移動位置動畫。
opacity：透明度動畫。
最後向大家再分享一個閃爍的動畫，本來這是一篇單獨的文章，投稿首頁已經通過稽核，結果本人手賤不小心給刪除了這篇文章，所以在這篇文章補上，這裡只附swift程式碼，oc程式碼demo中檢視。
首先我們看一下效果：
閃爍動畫的實現主要是通過改變透明度，從而達成閃爍的效果，我將這個方法寫成了一個分類，給CABasicAnimation新增一個分類，具體程式碼如下
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
import UIKit class catergory: CABasicAnimation { class func opacityForever_Animation(time : NSTimeInterval) -> CABasicAnimation { let animation = CABasicAnimation(keyPath:"opacity") animation.fromValue = 1 animation.toValue = 0 animation.duration = time animation.autoreverses = true animation.removedOnCompletion = false animation.fillMode = kCAFillModeForwards animation.timingFunction = CAMediaTimingFunction.init(name: kCAMediaTimingFunctionEaseIn) return animation } } |
這樣我們在外部可以給任何一個UIView新增閃爍動畫。
結尾
本文具體實現的程式碼上傳gitHub，demo中對這些動畫進行了簡單的封裝，一是為了提高程式碼的質量和可讀性，二是為了更符合專案實戰，希望你在閱讀的時候提出寶貴的意見，當然也歡迎你的Star。
下一篇文章主要是想分享一下CAShapeLayer和貝塞爾曲線結合的例子，當然你有更好的動畫效果希望你能私信推薦給我，我會選擇一些好的實現並分享。
https://github.com/markdashi/LoadingAnimation