動(dòng)畫(huà)分享

Core Animation結(jié)構(gòu)

繼承關(guān)系

626233-43bafe84d8aee5bf.png

其中灰色虛線表示繼承關(guān)系凿跳，紅色表示遵守協(xié)議秒裕。

核心動(dòng)畫(huà)中所有類(lèi)都遵守CAMediaTiming協(xié)議。
CAAnaimation是個(gè)抽象類(lèi)凉袱，不具備動(dòng)畫(huà)效果逗柴，必須用它的子類(lèi)才有動(dòng)畫(huà)效果。

CAAnimationGroup是個(gè)動(dòng)畫(huà)組院塞，可以同時(shí)進(jìn)行縮放遮晚，旋轉(zhuǎn)（同時(shí)進(jìn)行多個(gè)動(dòng)畫(huà)）。

CATransition是轉(zhuǎn)場(chǎng)動(dòng)畫(huà)拦止，界面之間跳轉(zhuǎn)（切換）都可以用轉(zhuǎn)場(chǎng)動(dòng)畫(huà)县遣。

CAPropertyAnimation也是個(gè)抽象類(lèi)，本身不具備動(dòng)畫(huà)效果汹族，只有子類(lèi)才有萧求。

CABasicAnimation和CAKeyframeAnimation：
CABasicAnimation基本動(dòng)畫(huà)，做一些簡(jiǎn)單效果顶瞒。
CAKeyframeAnimation幀動(dòng)畫(huà)夸政，做一些連續(xù)的流暢的動(dòng)畫(huà)。

CAMediaTiming協(xié)議

參考文章控制動(dòng)畫(huà)時(shí)間
Controlling Animation Timing

CAAnimation——簡(jiǎn)介

是所有動(dòng)畫(huà)對(duì)象的父類(lèi)字柠，負(fù)責(zé)控制動(dòng)畫(huà)的持續(xù)時(shí)間和速度探越，是個(gè)抽象類(lèi)，不能直接使用窑业，應(yīng)該使用它具體的子類(lèi)钦幔。

fillMode屬性的設(shè)置：

• kCAFillModeRemoved 這個(gè)是默認(rèn)值，也就是說(shuō)當(dāng)動(dòng)畫(huà)開(kāi)始前和動(dòng)畫(huà)結(jié)束后喷市，動(dòng)畫(huà)對(duì)layer都沒(méi)有影響相种，動(dòng)畫(huà)結(jié)束后，layer會(huì)恢復(fù)到之前的狀態(tài)

• kCAFillModeForwards 當(dāng)動(dòng)畫(huà)結(jié)束后品姓，layer會(huì)一直保持著動(dòng)畫(huà)最后的狀態(tài)

• kCAFillModeBackwards 在動(dòng)畫(huà)開(kāi)始前寝并，只需要將動(dòng)畫(huà)加入了一個(gè)layer箫措，layer便立即進(jìn)入動(dòng)畫(huà)的初始狀態(tài)并等待動(dòng)畫(huà)開(kāi)始。

• kCAFillModeBoth 這個(gè)其實(shí)就是上面兩個(gè)的合成.動(dòng)畫(huà)加入后開(kāi)始之前衬潦，layer便處于動(dòng)畫(huà)初始狀態(tài)蒂破，動(dòng)畫(huà)結(jié)束后layer保持動(dòng)畫(huà)最后的狀態(tài)

速度控制函數(shù)(CAMediaTimingFunction)：

• kCAMediaTimingFunctionLinear（線性）：勻速，給你一個(gè)相對(duì)靜態(tài)的感覺(jué)

• kCAMediaTimingFunctionEaseIn（漸進(jìn)）：動(dòng)畫(huà)緩慢進(jìn)入别渔，然后加速離開(kāi)

• kCAMediaTimingFunctionEaseOut（漸出）：動(dòng)畫(huà)全速進(jìn)入附迷，然后減速的到達(dá)目的地

• kCAMediaTimingFunctionEaseInEaseOut（漸進(jìn)漸出）：動(dòng)畫(huà)緩慢的進(jìn)入，中間加速哎媚，然后減速的到達(dá)目的地喇伯。這個(gè)是默認(rèn)的動(dòng)畫(huà)行為。

CAPropertyAnimation

是CAAnimation的子類(lèi)拨与，也是個(gè)抽象類(lèi)稻据，要想創(chuàng)建動(dòng)畫(huà)對(duì)象，應(yīng)該使用它的兩個(gè)子類(lèi)：CABasicAnimation和CAKeyframeAnimation买喧。

CATransition——轉(zhuǎn)場(chǎng)動(dòng)畫(huà)

CATransition是CAAnimation的子類(lèi)捻悯，用于做轉(zhuǎn)場(chǎng)動(dòng)畫(huà)，能夠?yàn)閷犹峁┮瞥銎聊缓鸵迫肫聊坏膭?dòng)畫(huà)效果淤毛。

UINavigationController就是通過(guò)CATransition實(shí)現(xiàn)了將控制器的視圖推入屏幕的動(dòng)畫(huà)效果今缚。我們可以通過(guò)CATransition來(lái)自定義轉(zhuǎn)場(chǎng)動(dòng)畫(huà)。

|類(lèi)型字符串 | 效果說(shuō)明 | 對(duì)應(yīng)常量
|---|---|---|---|
|fade | 交叉淡化過(guò)渡 | kCATransitionFade
|push | 新視圖把舊視圖推出去 |kCATransitionPush
|moveIn| 新視圖移到舊視圖上面| kCATransitionReveal
|reveal |將舊視圖移開(kāi),顯示下面的新視圖| kCATransitionMoveIn
|cube |立方體翻滾效果 | 私有
|oglFlip |上下左右翻滾效果 | 私有
|suckEffect |收縮效果,如一塊布被抽走 | 私有
|rippleEffect |水滴效果 | 私有
|pageCurl |向上翻頁(yè)效果 | 私有
|pageUnCurl |向下翻頁(yè)效果 | 私有
|cameraIrisHollowOpen |相機(jī)鏡頭打開(kāi)效果| 私有
|cameraIrisHollowClose |相機(jī)鏡頭關(guān)閉效果| 私有

CABasicAnimation——基本動(dòng)畫(huà)

屬性說(shuō)明：

動(dòng)畫(huà)過(guò)程說(shuō)明：

隨著動(dòng)畫(huà)的進(jìn)行低淡，在長(zhǎng)度為duration的持續(xù)時(shí)間內(nèi)姓言，keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue。

keyPath內(nèi)容是CALayer的可以用來(lái)制作動(dòng)畫(huà)(Animatable)的屬性蔗蹋。動(dòng)畫(huà)的產(chǎn)生是由于CABasicAnimation的這些valuse作用到了keyPath何荚，也就是CALayer中的Animatable類(lèi)型的屬性上，如transform猪杭，position等餐塘。

如果fillMode = kCAFillModeForwards同時(shí)removedOnComletion = NO，那么在動(dòng)畫(huà)執(zhí)行完畢后皂吮，圖層會(huì)保持顯示動(dòng)畫(huà)執(zhí)行后的狀態(tài)戒傻。但在實(shí)質(zhì)上，圖層的屬性值還是動(dòng)畫(huà)執(zhí)行前的初始值涮较，并沒(méi)有真正被改變稠鼻。

CAKeyframeAnimation——關(guān)鍵幀動(dòng)畫(huà)

關(guān)鍵幀動(dòng)畫(huà)，也是CAPropertyAnimation的子類(lèi)狂票，與CABasicAnimation的區(qū)別是：

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

CAAnimationGroup——?jiǎng)赢?huà)組

動(dòng)畫(huà)組，是CAAnimation的子類(lèi)孵睬，可以保存一組動(dòng)畫(huà)對(duì)象播歼，將CAAnimationGroup對(duì)象加入層后，組中所有動(dòng)畫(huà)對(duì)象可以同時(shí)并發(fā)運(yùn)行掰读。

默認(rèn)情況下秘狞，一組動(dòng)畫(huà)對(duì)象是同時(shí)運(yùn)行的，也可以通過(guò)設(shè)置動(dòng)畫(huà)對(duì)象的beginTime屬性來(lái)更改動(dòng)畫(huà)的開(kāi)始時(shí)間蹈集。

CASpringAnimation 彈性動(dòng)畫(huà)

CASpringAnimation是ios9及以上版本才可以使用叙甸，想要適配ios9以前版本的話 需要自己動(dòng)手來(lái)完成彈性動(dòng)畫(huà)

阻尼震蕩

496px-Damped_oscillation_graph.svg.png

D103F63B-50DE-4ED6-97AA-10FD39E4B5DB.png

14981914785849.png

參考資料粘性動(dòng)畫(huà)

查看數(shù)學(xué)函數(shù)對(duì)應(yīng)的圖像的網(wǎng)站

CAKeyframeAnimation 關(guān)鍵幀動(dòng)畫(huà)

AnimationWithKeyPath的值

屬性后面的描述中帶有Animatable的都可以作為keyPath
如CAlayer的transform贮缕，position等等

水波動(dòng)畫(huà)

正弦型函數(shù)解析式：y=Asin（ωx+φ）+h
各常數(shù)值對(duì)函數(shù)圖像的影響：
φ（初相位）：決定波形與X軸位置關(guān)系或橫向移動(dòng)距離（左加右減）
ω：決定周期（最小正周期T=2π/|ω|）
A：決定峰值（即縱向拉伸壓縮的倍數(shù)）
h：表示波形在Y軸的位置關(guān)系或縱向移動(dòng)距離（上加下減）

CATransFrom3D

iOS設(shè)備上，是按照左手系的三維空間俺榆，即正面面對(duì)設(shè)備屏幕感昼，坐標(biāo)原點(diǎn)從屏幕左上方起，x軸指向右方罐脊，y軸指向下方定嗓，z軸為屏幕指向眼球。而macOS上是右手系萍桌，原點(diǎn)是屏幕左下角宵溅，x軸指向右方，y軸指向上方（相反）梗夸，z軸同樣為屏幕指向眼球层玲，要注意

5c010c6b630ab7aa0892428016d7e.jpeg

3D效果中平移、旋轉(zhuǎn)反症、縮放辛块、都是通過(guò)矩陣的變換得到的

CATransform3D結(jié)構(gòu)體
struct CATransform3D
{
  CGFloat m11, m12, m13, m14;
  CGFloat m21, m22, m23, m24;
  CGFloat m31, m32, m33, m34;
  CGFloat m41, m42, m43, m44;
};

這個(gè)結(jié)構(gòu)體對(duì)應(yīng)這樣一個(gè)4x4的矩陣

C8B0A3D9-796D-40BF-A5A8-7AB02E249230.png

4196_131230104304_1.png

這里的矩陣變換主要是兩個(gè)矩陣相乘，將坐標(biāo)向量乘以變換的矩陣铅碍，得到變換后的坐標(biāo)润绵。

4196_131230104316_1.png

1.平移

2766C09E-7B01-48C2-B42B-77A1E56B29FB.png

對(duì)應(yīng)API:
CATransform3D CATransform3DMakeTranslation(CGFloat tx, CGFloat ty, CGFloat tz);

2.縮放

BDCEC978-9B92-4149-8530-148A80C22C6B.png

對(duì)應(yīng)API:
CATransform3D CATransform3DMakeScale(CGFloat sx, CGFloat sy, CGFloat sz);

3.旋轉(zhuǎn)

59C76777-3EEB-4887-9C0E-18E6B3163D4E.png

4.為什么設(shè)置m34
當(dāng)我們要實(shí)現(xiàn)近大遠(yuǎn)小的效果的時(shí)候，為什么只需要設(shè)置m34的值就可以了胞谈？

透視投影

眼睛從實(shí)際平行的兩條線段發(fā)出（相當(dāng)于z軸方向的向量）尘盼，人眼看起來(lái)會(huì)相交于一點(diǎn)上（焦點(diǎn)，F(xiàn)ocal point）烦绳，這才產(chǎn)生了3D感

a7ed0efe4aebcddaef0d090c631b4.jpeg.png

m34 = -1 / d (d值的是人眼到屏幕的距離,值一般在500 - 1000之間比較合適)卿捎；

Core Animation 3D仿射變換知識(shí)

ios7之后提供的物理動(dòng)效

UIGravityBehavior 重力
UICollisionBehavior 碰撞
UISnapBehavior 吸附
UIPushBehavior 推力
UIAttachmentBehavior 關(guān)聯(lián)