demo 地址

內(nèi)容

• 關(guān)于圖層動(dòng)畫相關(guān)框架的介紹
• CoreAnimation結(jié)構(gòu)及圖層動(dòng)畫
• 簡(jiǎn)單demo使用

1. CoreGraphics，QuartzCore, CoreAnimation區(qū)別

對(duì)CoreGraphics汪诉，QuartzCore, CoreAnimation 這三個(gè)概念傻傻分不清祠够，先梳理一下

CoreGraphics(核心圖形)

它是iOS的核心圖形庫，包含Quartz2D繪圖API接口,常用的是point，size棋恼，rect等這些圖形萎坷，都定義在這個(gè)框架中，類名以CG開頭的都屬于CoreGraphics框架成艘，它提供的都是C語言函數(shù)接口赏半，是可以在iOS和mac OS 通用的

QuartzCore

Quartz是位于Mac OS X的Drawin核心之上的繪圖層，這個(gè)框架感覺不是很清晰淆两，但是看頭文件可以發(fā)現(xiàn)断箫，它就是CoreAnimation，這個(gè)框架頭文件只包含了CoreAnimation.h

CoreAnimation(核心動(dòng)畫)

• CoreAnimation翻譯過來就是核心動(dòng)畫,一組非常強(qiáng)大的API秋冰，用來做動(dòng)畫的仲义，非常的簡(jiǎn)單，但是效果非常絢麗
• CoreAnimation是跨平臺(tái)的剑勾，既可以支持IOS埃撵，也支持MAC OS
• CoreAnimation執(zhí)行動(dòng)畫是在后臺(tái)，不會(huì)阻塞主線程
• CoreAnimation作用在CALayer虽另，不是UIView

• CoreGraphics和CoreAnimation的關(guān)系

  首先它們都是跨iOS和Mac OS 使用的暂刘，這點(diǎn)區(qū)別于UIKit，并且CoreAnimation中大量使用到CoreGraphics中的類捂刺，因?yàn)閷?shí)現(xiàn)動(dòng)畫要用到圖形庫中的定西

• 為什么CA神馬神馬的谣拣，用的時(shí)候好多都要“.CGXXXX”呢？

  比如 ：
  layer.backgroundColor = [UIColor redColor].CGColor;

  首先叠萍，CALayer是定義在QuartzCore框架中的芝发，CGImageRef、CGColorRef兩種數(shù)據(jù)類型是定義在CoreGraphics框 架中的苛谷，而UIColor和UIImage是定義在UIKit框架中的辅鲸。

  其次，QuartzCore框架和CoreGraphics框架是可以跨平臺(tái)使用的腹殿，在iOS和Mac OS X上都能使用
  但是UIKit只能在iOS中使用独悴。

  所以，為了保證可移植性锣尉，QuartzCore不能使用UIImage刻炒、UIColor，只能使用CGImageRef自沧、CGColorRef坟奥。

框架關(guān)系

image

• 可以看出树瞭，CoreGraphics是底層繪制框架，我們實(shí)際會(huì)用到的也就是CG開頭的一些底層繪制函數(shù)和變量爱谁，這是一個(gè)純C語言框架
• QuartzCore(包含CoreAnimation）框架晒喷，是iOS系統(tǒng)的基本渲染框架，是一個(gè)OC語言框架访敌，是一套基于CoreGraphics的OC語言封裝凉敲，封裝出了基本渲染類CALayer

2.CoreAnimation結(jié)構(gòu)及圖層動(dòng)畫 官方文檔

核心動(dòng)畫類結(jié)構(gòu)

image

• CALayer 圖層類
• CAAnimation 動(dòng)畫計(jì)時(shí)類
• CAAnimationGroup 是個(gè)動(dòng)畫組，可以同時(shí)進(jìn)行縮放寺旺，旋轉(zhuǎn)
• CAPropertyAnimation 也是個(gè)抽象類爷抓，本身不具備動(dòng)畫效果，只有子類才有阻塑。
• CATransition 轉(zhuǎn)場(chǎng)動(dòng)畫蓝撇，界面之間跳轉(zhuǎn)（切換）
• CAConstraint 布局約束類
• CATransaction 事物類，可以同時(shí)設(shè)置多個(gè)layer層的動(dòng)畫效果叮姑“Φ兀可以通過隱式和顯式兩種方式來進(jìn)行動(dòng)畫操作

2.1 關(guān)于圖層

CALayer基本屬性

@property CGRect bounds; //寬度和高度
@property CGPoint position; //位置(默認(rèn)指中點(diǎn)，具體由anchorPoint決定)
@property CGPoint anchorPoint; // 錨點(diǎn)(x,y的范圍都是0-1)传透，決定了position的位置
@property CGColorRef backgroundColor; // 背景顏色(CGColorRef類型)
@property CATransform3D transform; //形變屬性

可動(dòng)畫屬性特點(diǎn)：

* 直接對(duì)它付值可產(chǎn)生隱士動(dòng)畫
* CAAnimation的keyPath可以設(shè)置為這個(gè)屬性的名字

對(duì)這些屬性賦值的時(shí)候，layer會(huì)讓它的delegate調(diào)用actionForLayer:forKey:方法獲取一個(gè)返回值极颓，這個(gè)返回值可能是這樣幾種情況：
1朱盐、是一個(gè)nil，則layer會(huì)走自己的隱式動(dòng)畫菠隆；
2兵琳、是一個(gè)NSNull，則layer不會(huì)做任何動(dòng)畫骇径；
3躯肌、是一個(gè)實(shí)現(xiàn)了CAAction協(xié)議的對(duì)象，則layer會(huì)用這個(gè)對(duì)象生成一個(gè)CABasicAnimation加到自己身上執(zhí)行動(dòng)畫

CALayer與UIView的關(guān)系

• UIView之所以能顯示在屏幕上破衔，完全是因?yàn)樗鼉?nèi)部的一個(gè)圖層：

  在創(chuàng)建UIView對(duì)象時(shí)清女，UIView內(nèi)部會(huì)自動(dòng)創(chuàng)建一個(gè)圖層(即CALayer對(duì)象)，通過UIView的layer屬性可以訪問這個(gè)層晰筛。

  @property(nonatomic,readonly,retain) CALayer *layer;

  當(dāng)UIView需要顯示到屏幕上時(shí)嫡丙，會(huì)調(diào)用drawRect:方法進(jìn)行繪圖，并且會(huì)將所有內(nèi)容繪制在自己的圖層上读第，繪圖完畢后曙博， 系統(tǒng)會(huì)將圖層拷貝到屏幕上，于是就完成了UIView的顯示怜瞒。

  換句話說父泳，UIView本身不具備顯示的功能，是它內(nèi)部的層才有顯示功能。

• 對(duì)比CALayer惠窄，UIView多了一個(gè)事件處理的功能逝她。也就是說，CALayer不能處理用戶的觸摸事件睬捶，而UIView可以
  所以黔宛，如果顯示出來的東西需要跟用戶進(jìn)行交互的話，用UIView擒贸；如果不需要跟用戶進(jìn)行交互臀晃，用UIView或者CALayer都可以。當(dāng)然介劫，CALayer的性能會(huì)高一些徽惋，因?yàn)樗倭耸录幚淼墓δ埽虞p量級(jí)

總結(jié)：CALayer作為一個(gè)跨平臺(tái)框架（OS X和iOS）QuatzCore的類座韵，iOS系統(tǒng)
為了處理用戶交互事件（觸屏操作）用UIView封裝了一次CALayer险绘，UIView本
身負(fù)責(zé)處理交互事件，其持有一個(gè)Layer誉碴，用來負(fù)責(zé)繪制這個(gè)View的內(nèi)容宦棺。而
我們對(duì)UIView的和繪制相關(guān)的屬性賦值和訪問的時(shí)候（frame、
backgroundColor等）UIView實(shí)際上是直接調(diào)用其Layer對(duì)應(yīng)的屬性（frame對(duì)
應(yīng)frame黔帕，center對(duì)應(yīng)position等）的getter和setter代咸。

核心動(dòng)畫渲染框架

image

• 圖層樹：包含每一層的對(duì)象模型值。他們就是你設(shè)定的圖層的屬性值
• 呈現(xiàn)樹：包含了當(dāng)前動(dòng)畫發(fā)生時(shí)候?qū)⒁@示的值（例如你要給圖層背景顏色設(shè)置新的值的時(shí)候成黄，它會(huì)立即修改圖層樹里面相應(yīng)的值呐芥。但是在呈現(xiàn)樹里面背景顏色值在將要顯示給用戶的時(shí)候才被更新為新值）
• 渲染樹：在渲染圖層的時(shí)候使用呈現(xiàn)樹的值 （渲染樹負(fù)責(zé)執(zhí)行獨(dú)立于應(yīng)用活動(dòng)的復(fù)雜操作。渲染由一個(gè)單獨(dú)的進(jìn)程或線程來執(zhí)行奋岁，使其對(duì)應(yīng)用程序的運(yùn)行循環(huán)影響最兴嘉痢）

圖層幾何屬性(mac os 下坐標(biāo)系)

image

• position：屬性是一個(gè)CGPoint值， 指定圖層相當(dāng)于它父圖層的位置, 該值基于父圖層的坐標(biāo)系
• bounds：屬性是CGRect值闻伶， 指定圖層的大小(bounds.size)和圖層的 原點(diǎn)(bounds.origin)
• anchorPoint:屬性是CGPoint值滨攻，anchorPoint指定了bounds相對(duì)于position的值，同時(shí)作為變換的支點(diǎn)虾攻，錨點(diǎn)使用單元空間坐標(biāo)系表示铡买，（0，0）接近圖層的原點(diǎn)霎箍，（1奇钞，1）原點(diǎn)的對(duì)角點(diǎn)。（當(dāng)你設(shè)置圖層的 frame 屬性的時(shí)候,position 會(huì)根據(jù)錨點(diǎn)(anchorPoint)相應(yīng)的改變,而當(dāng)你設(shè)置圖層的 position 屬性的候,bounds 會(huì)根據(jù)錨點(diǎn)(anchorPoint)做相應(yīng)的改變）
  （錨點(diǎn)就是layer的那一個(gè)點(diǎn)在point上）

圖層的 frame漂坏、bounds景埃、position 和 anchorPoint 關(guān)系如下圖所示

image

anchorPoint 默認(rèn)值為(0.5,0.5),位于圖層的中心點(diǎn)媒至。圖層的 position 值為(100.0,100.0),bounds 為(0.0,0.0,120,80.0)。通過計(jì)算得到圖層的 frame為(40.0,60.0,120.0,80.0)

幾種常用的Layer

• CAEmitterLayer

  CAEmitterLayer是CoreAnimation框架中的粒子發(fā)射層谷徙，博客中有詳細(xì)的介紹和范例拒啰，這里不再重復(fù)，地址如下：粒子效果的應(yīng)用和火焰范例

• CAGradientLayer

  CAGradientLayer是用于色彩梯度展示的layer圖層完慧，通過CAGradientLayer谋旦，我們可以很輕松的創(chuàng)建出有過渡效果的色彩圖

• CAReplicatorLayer

  CAReplocatorLayer是拷貝視圖容器，我們可以通過它屈尼，將其中的子layer進(jìn)行拷貝册着，并進(jìn)行一些差異處理

• CAShapeLayer

  CAShapeLayer是圖形layer層，我們可以自定義這個(gè)層的形狀

• CATextLayer

  CATextLayer可以進(jìn)行文本的繪制

2.2 關(guān)于動(dòng)畫

UIViewAnimation動(dòng)畫

iOS開發(fā)中脾歧，UIKit為我們封裝好的核心動(dòng)畫層的方法甲捏，通過這些方法，基本能達(dá)到我們項(xiàng)目的大多需求,其中UIView動(dòng)畫使用簡(jiǎn)便鞭执，開發(fā)中應(yīng)用十分廣泛

• UIView動(dòng)畫執(zhí)行的兩種方式

1. 使用begin和commit方式

例如：
  UIView * view = [[UIView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
  [self.view addSubview:view];
  view.backgroundColor=[UIColor redColor];
  [UIView beginAnimations:@"test" context:nil];
  [UIView setAnimationDuration:3];
  view.backgroundColor=[UIColor orangeColor];
  [UIView commitAnimations];//執(zhí)行commit后司顿，動(dòng)畫即開始執(zhí)行  
  
  ``` 
 
 2. 使用block塊api
 

例如：
[UIView animateWithDuration:1 animations:^{
_myView.alpha=0;
} completion:^(BOOL finished) {
if (finished) {
_myView.alpha=1;
}
}];
```
支持動(dòng)畫的屬性

image

CAAnimation

如果你想更加自由的通過動(dòng)畫操作視圖的屬性，你就需要跳過UIKit的封裝兄纺，使用CoreAnimation核心動(dòng)畫層的方法來實(shí)現(xiàn)動(dòng)畫,CoreAnimation能夠?qū)崿F(xiàn)更多復(fù)雜大溜、好看、高效的動(dòng)畫效果

* 陰影囤热，圓角猎提，帶顏色的邊框。
* 3D變化旁蔼。
* 透明遮罩
* 多級(jí)非線性動(dòng)畫

CAAnimation是CoreAnimation框架中執(zhí)行動(dòng)畫的基類，是個(gè)抽象類疙教，不具備動(dòng)畫效果棺聊，必須用它的子類才有動(dòng)畫效果,是所有動(dòng)畫對(duì)象的父類，負(fù)責(zé)控制動(dòng)畫的持續(xù)時(shí)間和速度

• 隱式動(dòng)畫：不指定任何動(dòng)畫類型贞谓，僅改變非根層layer(手動(dòng)創(chuàng)建的layer)動(dòng)畫屬性限佩，coreAnimation會(huì)決定如何何時(shí)去做動(dòng)畫，你不用做額外操作
• 顯式動(dòng)畫：需要?jiǎng)?chuàng)建一個(gè)動(dòng)畫對(duì)象裸弦，并設(shè)置開始和結(jié)束值祟同，直到把動(dòng)畫應(yīng)用到某圖層上，動(dòng)畫才開始執(zhí)行

CAAnimation相關(guān)的幾個(gè)動(dòng)畫類的關(guān)系圖

image

CAPropertyAnimation

是CAAnimation的子類理疙，也是個(gè)抽象類晕城，要想創(chuàng)建動(dòng)畫對(duì)象，應(yīng)該使用它的兩個(gè)子類：CABasicAnimation和CAKeyframeAnimation

• @property(nullable, copy) NSString *keyPath;

通過指定CALayer的一個(gè)屬性名稱為keyPath（NSString類型）窖贤，并且對(duì)CALayer的這個(gè)屬性的值進(jìn)行修改砖顷，達(dá)到相應(yīng)的動(dòng)畫效果

CABasicAnimation

基本動(dòng)畫贰锁，通過設(shè)定起始點(diǎn)，終點(diǎn)滤蝠，時(shí)間豌熄，動(dòng)畫會(huì)沿著你這設(shè)定點(diǎn)進(jìn)行移動(dòng)，
隨著動(dòng)畫的進(jìn)行物咳，在長(zhǎng)度為duration的持續(xù)時(shí)間內(nèi)锣险，keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue。

CAKeyframeAnimation

主要操作屬性有keyPath和values值組合览闰，以通過設(shè)定CALayer的始點(diǎn)芯肤、中間關(guān)鍵點(diǎn)、終點(diǎn)的frame焕济，時(shí)間纷妆，動(dòng)畫會(huì)沿你設(shè)定的軌跡進(jìn)行移動(dòng)
與CABasicAnimation的區(qū)別是：

• CABasicAnimation只能從一個(gè)數(shù)值（fromValue）變到另一個(gè)數(shù)值（toValue），而CAKeyframeAnimation會(huì)使用一個(gè)NSArray保存這些數(shù)值
• CABasicAnimation可看做是只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation

CAAnimationGroup

可以保存一組動(dòng)畫對(duì)象晴弃，將CAAnimationGroup對(duì)象加入層后掩幢，組中所有動(dòng)畫對(duì)象可以同時(shí)并發(fā)運(yùn)行

CATransition

用于做轉(zhuǎn)場(chǎng)動(dòng)畫，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫效果上鞠。iOS比Mac OS X的轉(zhuǎn)場(chǎng)動(dòng)畫效果少一點(diǎn)际邻。

UINavigationController就是通過CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫效果。

使用CoreAnimation做動(dòng)畫的時(shí)候芍阎，遵循四步就好
1.創(chuàng)建CAAnmation子對(duì)象
2.設(shè)置CAAnmation的屬性
3.調(diào)用CALayer的addAnimation:forKey將CAAnimation對(duì)象添加到CALayer上世曾，就能執(zhí)行動(dòng)畫
4.調(diào)用CALayer的removeAnimationForKey方法可以停止CALayer中的動(dòng)畫

遺留問題

1. 隱式動(dòng)畫，顯式動(dòng)畫和隱式事務(wù)谴咸，顯示事務(wù)混淆
2. 沒有用到CATransaction begin轮听，commit 依然有動(dòng)畫效果

概念補(bǔ)充

顯式動(dòng)畫&隱式動(dòng)畫

• CALayer的動(dòng)畫分為隱式動(dòng)畫和顯式動(dòng)畫,UIView內(nèi)部關(guān)聯(lián)了一個(gè)CALayer，叫它“Root CALayer”.
• 所有的非Root CALayer的“Animatable”屬性在修改的時(shí)候會(huì)默認(rèn)的產(chǎn)生隱式動(dòng)畫

CATransaction 事務(wù)

CATransaction 是核心動(dòng)畫里負(fù)責(zé)協(xié)調(diào)多個(gè)動(dòng)畫更新顯示操作岭佳，保證多個(gè)動(dòng)畫同時(shí)進(jìn)行血巍，用于配置隱式動(dòng)畫，即CALayer屬性修改依賴CATransaction.

和動(dòng)畫類似CATransaction也分為隱式事務(wù)和顯式事務(wù)

隱式事務(wù)：在某次RunLoop中設(shè)置了一個(gè)“Animatable”屬性珊随，如果當(dāng)前沒有設(shè)置事務(wù)述寡，則會(huì)自動(dòng)創(chuàng)建一個(gè)CATransaction，并在當(dāng)前線程的下一個(gè)RunLoop中commit這個(gè)CATransaction

顯式事務(wù)：直接調(diào)用CATransaction的[CATransaction begin]叶洞，[CATransaction commit]等相關(guān)方法

另外事務(wù)可以嵌套鲫凶，當(dāng)事務(wù)嵌套時(shí)候，只有最外層的事務(wù)commit了之后衩辟，整個(gè)動(dòng)畫才會(huì)執(zhí)行螟炫。

參考資料

幾種常用Layer的使用解析

貝塞爾曲線原理(簡(jiǎn)單闡述)