前言
本文主要面向的對象是那些沒有動(dòng)畫基礎(chǔ)的入門引導(dǎo)，提供一個(gè)學(xué)習(xí)動(dòng)畫的正確途徑，并且配以項(xiàng)目實(shí)戰(zhàn)的效果的重點(diǎn)講解。
正文
這篇文章要實(shí)現(xiàn)的效果如下圖
實(shí)現(xiàn)這個(gè)效果需要了解基本概念
http://www.cnblogs.com/mjios/tag/objective-c/default.html?page=2
這個(gè)是明杰大神的入門講解拌屏，
你需要從這幾篇文章中了解到以下的知識點(diǎn)
-
UIView和CALayer之間的關(guān)系（區(qū)別和聯(lián)系） -
Core Animation框架中使用的類 -
CALayer和Core Animation之間的聯(lián)系 -
CAAnimation的常用屬性
如果你對這些基本的知識點(diǎn)已經(jīng)全部理清楚，那么接下來你就可以繼續(xù)往下看了术荤，我們實(shí)現(xiàn)動(dòng)畫主要需要學(xué)習(xí)的類庫QuartzCore,首先看一下這個(gè)類庫
首先有我們熟悉的
CALayer``CAAnimation,對于從來沒有做過動(dòng)畫的朋友來說倚喂，其他的類就不清楚了。下面我就簡單介紹一下主要的類之間關(guān)系瓣戚，以及單獨(dú)類主要實(shí)現(xiàn)什么端圈。
-
CAAnimation.h主要是各類動(dòng)畫的基類焦读，我們一般不會使用它來做動(dòng)畫〔杖ǎ基本常用屬性
//公有屬性定義動(dòng)畫的節(jié)奏
@property(nullable, strong) CAMediaTimingFunction *timingFunction;
//代理矗晃，例如捕捉動(dòng)畫的開始，動(dòng)畫的結(jié)束等
@property(nullable, strong) id delegate;
//動(dòng)畫執(zhí)行完是否移除
@property(getter=isRemovedOnCompletion) BOOL removedOnCompletion;
CABase.h可以忽略不看宴倍，是一些基本的配置CADisplayLink.h幀動(dòng)畫张症，默認(rèn)添加定時(shí)器，每秒刷多少幀,在gitHub上有facebook出品的一個(gè)pop動(dòng)畫鸵贬，據(jù)說是居于幀動(dòng)畫
https://github.com/facebook/popCAEAGLLayer是和<OpenGLES/EAGLDrawable.h>這個(gè)框架聯(lián)合使用的吠冤，暫時(shí)用不到。CAEmitter相關(guān)的是粒子動(dòng)畫恭理，可以實(shí)現(xiàn)很多酷炫的效果CAShapeLayer非常重要的一個(gè)類拯辙，常常與UIKit框架的UIBezierPath貝塞爾曲線聯(lián)合使用，繪制曲線颜价，圓形涯保，各種復(fù)雜的圖形都會使用到，非常非常重要周伦，我的上一篇文章就是他們兩個(gè)的結(jié)合CAGradientLayer常見應(yīng)用于鎖屏底部閃爍的滑動(dòng)來解鎖夕春。CAReplicatorLayer它獨(dú)有的特性是，其子類具有相同的屬性专挪，這篇文章主要是它的應(yīng)用及志。
其他的類，我是沒有使用過寨腔，所以不做講解速侈。
下面我們看就上述動(dòng)畫講解一個(gè)最簡單，三個(gè)點(diǎn)加載動(dòng)畫迫卢，作為入門倚搬。
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];
那么我們會看到這個(gè)效果
接下來我們需要添加點(diǎn)
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)建兩個(gè)點(diǎn)，然后做動(dòng)畫就可以乾蛤，不錯(cuò)這是一種可實(shí)現(xiàn)的思路每界，可以如果我們要做第一中類似旋轉(zhuǎn)的動(dòng)畫，我們需要?jiǎng)?chuàng)建10個(gè)點(diǎn)家卖，難道我們一個(gè)個(gè)去創(chuàng)建嗎眨层？我們現(xiàn)在使用的是CAReplicatorLayer，它有個(gè)屬性instanceCount,是子類的個(gè)數(shù)上荡，然后我們設(shè)置每個(gè)子類的位置即可
在上述代碼添加
replicatorLayer.instanceCount = 3;
replicatorLayer.instanceTransform = CATransform3DMakeTranslation(replicatorLayer.frame.size.width/3, 0, 0);
效果
需要說明的是instanceTransform這個(gè)屬性趴樱，它的作用是設(shè)置每個(gè)子Layer如何變化。CATransform3DMakeTranslation這個(gè)類的含義是使Layer根據(jù)X、Y伊佃、Z軸進(jìn)行平移窜司。我們需要的是平移，所以使用translation這個(gè)屬性航揉，如果我們是第一種圓形排放塞祈，那么我們需要這樣設(shè)置
CGFloat count = 10.0;
replicatorLayer.instanceCount = count;
CGFloat angel = 2* M_PI/count;
replicatorLayer.instanceTransform = CATransform3DMakeRotation(angel, 0, 0, 1);
解釋一下CATransform3DMakeRotation，它是CATransform3D的一個(gè)結(jié)構(gòu)（矩陣結(jié)構(gòu)）帅涂，含義是使Layer在X议薪、Y、Z軸根據(jù)給定的角度旋轉(zhuǎn)媳友。我們需要平面旋轉(zhuǎn)則坐標(biāo)系為（0斯议，0，1）醇锚。
看效果
接下來我們需要添加動(dòng)畫
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"transform.scale"];
animation.duration = 1.0;
animation.fromValue = @1;
animation.toValue = @0;
animation.repeatCount = MAXFLOAT;
[dotLayer addAnimation:animation forKey:nil];
編譯運(yùn)行看效果：
這不是我們需要的真實(shí)效果哼御，我們還需要設(shè)置每一個(gè)sublayer的instanceDelay屬性。
replicatorLayer.instanceDelay = 1.0/3;
編譯運(yùn)行看效果
我們會發(fā)現(xiàn)動(dòng)畫在開始前會有不流暢效果焊唬，我們應(yīng)該給
dotLayer一個(gè)初始的大小
dotLayer.transform = CATransform3DMakeScale(0, 0, 0);
這樣我們就能實(shí)現(xiàn)這個(gè)比較簡單的等待動(dòng)畫效果恋昼。
下面我們總結(jié)一下實(shí)現(xiàn)這個(gè)動(dòng)畫的步驟：
1.首先創(chuàng)建一個(gè)可復(fù)用的
CAReplicatorLayer,創(chuàng)建這個(gè)的目的是為了我添加的子類可以復(fù)用，一勞永逸赶促；2.添加子
Layer液肌，設(shè)置子Layer所需要的樣式；3.將子
layer添加到CAReplicatorLayer上鸥滨，并設(shè)置子layer個(gè)數(shù)和排布嗦哆；4.給子
layer添加動(dòng)畫效果，特別提醒一點(diǎn)transform一般針對的是縮放和旋轉(zhuǎn)動(dòng)畫婿滓，當(dāng)然也可以實(shí)現(xiàn)平移動(dòng)畫老速。
下面我總結(jié)一下常用動(dòng)畫的 keyPath
transform.rotation：旋轉(zhuǎn)動(dòng)畫。
transform.rotation.x：按x軸旋轉(zhuǎn)動(dòng)畫空幻。
transform.rotation.y：按y軸旋轉(zhuǎn)動(dòng)畫烁峭。
transform.rotation.z：按z軸旋轉(zhuǎn)動(dòng)畫。
transform.scale：按比例放大縮小動(dòng)畫秕铛。
transform.scale.x：在x軸按比例放大縮小動(dòng)畫。
transform.scale.y：在y軸按比例放大縮小動(dòng)畫缩挑。
transform.scale.z：在z軸按比例放大縮小動(dòng)畫但两。
position：移動(dòng)位置動(dòng)畫。
opacity：透明度動(dòng)畫供置。
最后向大家再分享一個(gè)閃爍的動(dòng)畫谨湘，本來這是一篇單獨(dú)的文章，投稿首頁已經(jīng)通過審核，結(jié)果本人手賤不小心給刪除了這篇文章紧阔，所以在這篇文章補(bǔ)上坊罢，這里只附swift代碼，oc代碼demo中查看擅耽。
首先我們看一下效果：
閃爍動(dòng)畫的實(shí)現(xiàn)主要是通過改變透明度活孩，從而達(dá)成閃爍的效果，我將這個(gè)方法寫成了一個(gè)分類乖仇，給
CABasicAnimation添加一個(gè)分類憾儒，具體代碼如下
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
}
}
這樣我們在外部可以給任何一個(gè)UIView添加閃爍動(dòng)畫民珍。
結(jié)尾
本文具體實(shí)現(xiàn)的代碼上傳gitHub捞附，demo中對這些動(dòng)畫進(jìn)行了簡單的封裝讼庇，一是為了提高代碼的質(zhì)量和可讀性俘枫，二是為了更符合項(xiàng)目實(shí)戰(zhàn)梨州，希望你在閱讀的時(shí)候提出寶貴的意見嘶炭，當(dāng)然也歡迎你的Star瞻颂。
下一篇文章主要是想分享一下CAShapeLayer和貝塞爾曲線結(jié)合的例子腥放，當(dāng)然你有更好的動(dòng)畫效果希望你能私信推薦給我蜀铲，我會選擇一些好的實(shí)現(xiàn)并分享缭保。
https://github.com/markdashi/LoadingAnimation
