前言
本文主要面向的對象是那些沒有動畫基礎(chǔ)的入門引導，提供一個學習動畫的正確途徑，并且配以項目實戰(zhàn)的效果的重點講解。
正文
這篇文章要實現(xiàn)的效果如下圖
實現(xiàn)這個效果需要了解基本概念
http://www.cnblogs.com/mjios/tag/objective-c/default.html?page=2
這個是明杰大神的入門講解，
你需要從這幾篇文章中了解到以下的知識點
-
UIView和CALayer之間的關(guān)系（區(qū)別和聯(lián)系） -
Core Animation框架中使用的類 -
CALayer和Core Animation之間的聯(lián)系 -
CAAnimation的常用屬性
如果你對這些基本的知識點已經(jīng)全部理清楚，那么接下來你就可以繼續(xù)往下看了，我們實現(xiàn)動畫主要需要學習的類庫QuartzCore,首先看一下這個類庫
首先有我們熟悉的
CALayer``CAAnimation,對于從來沒有做過動畫的朋友來說，其他的類就不清楚了。下面我就簡單介紹一下主要的類之間關(guān)系，以及單獨類主要實現(xiàn)什么。
-
CAAnimation.h主要是各類動畫的基類，我們一般不會使用它來做動畫。基本常用屬性
//公有屬性定義動畫的節(jié)奏
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//代理，例如捕捉動畫的開始，動畫的結(jié)束等
@property(nullable, strong) id delegate;
//動畫執(zhí)行完是否移除
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
CABase.h可以忽略不看，是一些基本的配置CADisplayLink.h幀動畫，默認添加定時器，每秒刷多少幀,在gitHub上有facebook出品的一個pop動畫，據(jù)說是居于幀動畫
https://github.com/facebook/popCAEAGLLayer是和<OpenGLES/EAGLDrawable.h>這個框架聯(lián)合使用的，暫時用不到。CAEmitter相關(guān)的是粒子動畫，可以實現(xiàn)很多酷炫的效果CAShapeLayer非常重要的一個類，常常與UIKit框架的UIBezierPath貝塞爾曲線聯(lián)合使用，繪制曲線，圓形，各種復雜的圖形都會使用到，非常非常重要，我的上一篇文章就是他們兩個的結(jié)合CAGradientLayer常見應用于鎖屏底部閃爍的滑動來解鎖。CAReplicatorLayer它獨有的特性是，其子類具有相同的屬性，這篇文章主要是它的應用。
其他的類，我是沒有使用過，所以不做講解。
下面我們看就上述動畫講解一個最簡單，三個點加載動畫，作為入門。
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];
那么我們會看到這個效果
接下來我們需要添加點
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];
效果圖
接下來我們會想在創(chuàng)建兩個點，然后做動畫就可以，不錯這是一種可實現(xiàn)的思路，可以如果我們要做第一中類似旋轉(zhuǎn)的動畫，我們需要創(chuàng)建10個點，難道我們一個個去創(chuàng)建嗎？我們現(xiàn)在使用的是CAReplicatorLayer，它有個屬性instanceCount,是子類的個數(shù)，然后我們設置每個子類的位置即可
在上述代碼添加
replicatorLayer.instanceCount = 3;
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);
效果
需要說明的是instanceTransform這個屬性，它的作用是設置每個子Layer如何變化。CATransform3DMakeTranslation這個類的含義是使Layer根據(jù)X、Y、Z軸進行平移。我們需要的是平移，所以使用translation這個屬性，如果我們是第一種圓形排放，那么我們需要這樣設置
CGFloat count = 10.0;
replicatorLayer.instanceCount = count;
CGFloat angel = 2* M_PI/count;
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);
解釋一下CATransform3DMakeRotation，它是CATransform3D的一個結(jié)構(gòu)（矩陣結(jié)構(gòu)），含義是使Layer在X、Y、Z軸根據(jù)給定的角度旋轉(zhuǎn)。我們需要平面旋轉(zhuǎn)則坐標系為（0，0，1）。
看效果
接下來我們需要添加動畫
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屬性。
replicatorLayer.instanceDelay = 1.0/3;
編譯運行看效果
我們會發(fā)現(xiàn)動畫在開始前會有不流暢效果，我們應該給
dotLayer一個初始的大小
dotLayer.transform = CATransform3DMakeScale(0, 0, 0);
這樣我們就能實現(xiàn)這個比較簡單的等待動畫效果。
下面我們總結(jié)一下實現(xiàn)這個動畫的步驟：
1.首先創(chuàng)建一個可復用的
CAReplicatorLayer,創(chuàng)建這個的目的是為了我添加的子類可以復用，一勞永逸；2.添加子
Layer，設置子Layer所需要的樣式；3.將子
layer添加到CAReplicatorLayer上，并設置子layer個數(shù)和排布；4.給子
layer添加動畫效果，特別提醒一點transform一般針對的是縮放和旋轉(zhuǎn)動畫，當然也可以實現(xiàn)平移動畫。
下面我總結(jié)一下常用動畫的 keyPath
transform.rotation：旋轉(zhuǎn)動畫。
transform.rotation.x：按x軸旋轉(zhuǎn)動畫。
transform.rotation.y：按y軸旋轉(zhuǎn)動畫。
transform.rotation.z：按z軸旋轉(zhuǎn)動畫。
transform.scale：按比例放大縮小動畫。
transform.scale.x：在x軸按比例放大縮小動畫。
transform.scale.y：在y軸按比例放大縮小動畫。
transform.scale.z：在z軸按比例放大縮小動畫。
position：移動位置動畫。
opacity：透明度動畫。
最后向大家再分享一個閃爍的動畫，本來這是一篇單獨的文章，投稿首頁已經(jīng)通過審核，結(jié)果本人手賤不小心給刪除了這篇文章，所以在這篇文章補上，這里只附swift代碼，oc代碼demo中查看。
首先我們看一下效果：
閃爍動畫的實現(xiàn)主要是通過改變透明度，從而達成閃爍的效果，我將這個方法寫成了一個分類，給
CABasicAnimation添加一個分類，具體代碼如下
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添加閃爍動畫。
結(jié)尾
本文具體實現(xiàn)的代碼上傳gitHub，demo中對這些動畫進行了簡單的封裝，一是為了提高代碼的質(zhì)量和可讀性，二是為了更符合項目實戰(zhàn)，希望你在閱讀的時候提出寶貴的意見，當然也歡迎你的Star。
下一篇文章主要是想分享一下CAShapeLayer和貝塞爾曲線結(jié)合的例子，當然你有更好的動畫效果希望你能私信推薦給我，我會選擇一些好的實現(xiàn)并分享。
https://github.com/markdashi/LoadingAnimation
