導(dǎo)語
這段時(shí)間我們部門組織學(xué)習(xí)分享Core Animation电湘，所以我就稍微整理了下關(guān)于動(dòng)畫這塊的分享次企。
Core Animation其實(shí)是一個(gè)令人誤解的命名迹辐，大多數(shù)人認(rèn)為它只是用來做動(dòng)畫的溺蕉，但實(shí)際上市一個(gè)叫做Layer Kit演變而來某宪，所以動(dòng)畫只是Core Animation特性的冰山一角而已福压，接下來我們就討論下這個(gè)冰山一角的常規(guī)用法掏秩，純粹是拋磚引玉。
一荆姆、基礎(chǔ)知識
1蒙幻、動(dòng)畫的本質(zhì)
- 一定時(shí)間內(nèi)屬性值的變化，屬性為位置胆筒、透明度邮破、旋轉(zhuǎn)等
2、動(dòng)畫實(shí)現(xiàn)方式
- 逐幀：需要處理動(dòng)畫的每一幀，這樣的實(shí)現(xiàn)動(dòng)畫的方式叫做逐幀動(dòng)畫
- 關(guān)鍵幀：我們只需給定幾個(gè)關(guān)鍵幀的畫面抒和，其余過度幀都由計(jì)算機(jī)自動(dòng)生成
二队询、動(dòng)畫實(shí)現(xiàn)
關(guān)鍵幀動(dòng)畫
1、CABasicAnimation
1构诚、動(dòng)畫的屬性
1485148932685541.png
2蚌斩、屬性值的解釋
- repeatCount：一直不斷重復(fù)：swift:Float.infinity，OC:HUGE_VALF
- timingFunction:
kCAMediaTimingFunctionLinear:勻速改變
kCAMediaTimingFunctionEaseIn:漸入
kCAMediaTimingFunctionEaseOut: 漸出
kCAMediaTimingFunctionEaseInEaseOut:漸入漸出
kCAMediaTimingFunctionDefault:隱式動(dòng)畫更加適合
使用方法
pathAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
- fillMode
kCAFillModeForwards：動(dòng)畫開始之后layer的狀態(tài)將保持在動(dòng)畫的最后一幀范嘱，而removedOnCompletion的默認(rèn)屬性值是 YES送膳，所以為了使動(dòng)畫結(jié)束之后layer保持結(jié)束狀態(tài)，應(yīng)將removedOnCompletion設(shè)置為NO丑蛤。
kCAFillModeBackwards：將會立即執(zhí)行動(dòng)畫的第一幀叠聋，不論是否設(shè)置了 beginTime屬性。觀察發(fā)現(xiàn)受裹，設(shè)置該值碌补，剛開始視圖不見，還不知道應(yīng)用在哪里棉饶。
kCAFillModeBoth：該值是 kCAFillModeForwards 和kCAFillModeBackwards的組合狀態(tài)
kCAFillModeRemoved：動(dòng)畫將在設(shè)置的 beginTime 開始執(zhí)行（如沒有設(shè)置beginTime屬性厦章，則動(dòng)畫立即執(zhí)行），動(dòng)畫執(zhí)行完成后將會layer的改變恢復(fù)原狀照藻。
示例
- 旋轉(zhuǎn)動(dòng)畫
旋轉(zhuǎn)動(dòng)畫.gif
-
位移動(dòng)畫
位移動(dòng)畫.gif - 背景顏色變化動(dòng)畫辞嗡、背景圖片變化動(dòng)畫纽乱、圓角變化動(dòng)畫
背景顏色變化動(dòng)畫.gif
- 比例縮放動(dòng)畫
1485149752466446.gif
- size大小縮放催什、透明值變化動(dòng)畫（可用作閃爍效果）
size大小縮放凤覆、透明值變化動(dòng)畫.gif
2、CAKeyframeAnimation
CAKeyframeAnimation是核心動(dòng)畫里面的幀動(dòng)畫,它提供了按照指定的一串值進(jìn)行動(dòng)畫,好像拍電影一樣的一幀一幀的效果
UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(50, 100, 250, 250)];
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:tempView.frame];
UIView *animView = [[UIView alloc] initWithFrame:CGRectMake(50, 50, 70, 80)];
animView.backgroundColor = [UIColor redColor];
[self.view addSubview:animView];
CAKeyframeAnimation *orbitAnim = [CAKeyframeAnimation animationWithKeyPath:@"position"];
orbitAnim.duration = 5;
orbitAnim.path = bezierPath.CGPath;
orbitAnim.calculationMode = kCAAnimationPaced;
orbitAnim.fillMode = kCAFillModeForwards;
orbitAnim.repeatCount = INFINITY;
orbitAnim.rotationMode = kCAAnimationRotateAutoReverse;
[animView.layer addAnimation:orbitAnim forKey:@"orbitAnim"];
CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
shapeLayer.strokeColor = [UIColor purpleColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 0.5;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = bezierPath.CGPath;
[self.view.layer addSublayer:shapeLayer];
- 示例
CAKeyframeAnimation路徑動(dòng)畫.gif
3发乔、CATransition
主要用于轉(zhuǎn)場動(dòng)畫從一個(gè)場景以動(dòng)畫的形式過渡到另一個(gè)場景
另外還有一些系統(tǒng)未公開的動(dòng)畫效果：
["cube", "suckEffect", "rippleEffect", "pageCurl", "pageUnCurl", "oglFlip", "cameraIrisHollowOpen", "cameraIrisHollowClose", "spewEffect","genieEffect","unGenieEffect","twist","tubey","swirl","charminUltra", "zoomyIn", "zoomyOut", "oglApplicationSuspend"]
代碼示例：
CATransition *pageCurlAnim = [[CATransition alloc] init];
pageCurlAnim.delegate = self;
pageCurlAnim.duration = 1.0;
pageCurlAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseOut];
pageCurlAnim.type = animArr[index];
pageCurlAnim.subtype = kCATransitionFromLeft;
pageCurlAnim.repeatCount = 1;
[pageCurlAnim setValue:@"transitionAnim" forKey:@"anim"];
[transitionLab.layer addAnimation:pageCurlAnim forKey:@"transition"];
4熟妓、CASpringAnimation
iOS9才引入的動(dòng)畫類，在以前我們都是使用facebook的pop來做這種彈簧效果栏尚，它繼承于CABaseAnimation起愈，用于制作彈簧動(dòng)畫
參數(shù)說明
- mass:質(zhì)量，影響圖層運(yùn)動(dòng)時(shí)的彈簧慣性抵栈，質(zhì)量越大告材，彈簧拉伸和壓縮的幅度越大，動(dòng)畫的速度變慢古劲，并且波動(dòng)幅度變大
- stiffness:剛度系數(shù)(勁度系數(shù)/彈性系數(shù))斥赋，剛度系數(shù)越大，形變產(chǎn)生的力就越大产艾，運(yùn)動(dòng)越快
- damping:阻尼系數(shù)疤剑，阻止彈簧伸縮的系數(shù)滑绒，阻尼系數(shù)越大，停止越快
- initialVelocity:初始速率隘膘，動(dòng)畫視圖的初始速度大小速率為正數(shù)時(shí)疑故，速度方向與運(yùn)動(dòng)方向一致，速率為負(fù)數(shù)時(shí)弯菊，速度方向與運(yùn)動(dòng)方向相反如果
- settlingDuration:結(jié)算時(shí)間 返回彈簧動(dòng)畫到停止時(shí)的估算時(shí)間纵势，根據(jù)當(dāng)前的動(dòng)畫參數(shù)估算通常彈簧動(dòng)畫的時(shí)間使用結(jié)算時(shí)間比較準(zhǔn)確
-
示例
彈簧.gif
逐幀動(dòng)畫
實(shí)際就是周期性的(CADisplayLink)對UIView背后的CALayer的修改
著名的facebook的pop動(dòng)畫框架，就是使用CADisplayLink這種逐幀繪制的方式管钳。
三钦铁、關(guān)鍵幀與逐幀對比
- 關(guān)鍵幀：只需要修改某個(gè)屬性值，簡單方便才漆，但涉及深層次內(nèi)容較多牛曹，需要更多的理解和聯(lián)系。
- 逐幀：實(shí)現(xiàn)原理簡單醇滥，但繪制動(dòng)畫的過程復(fù)雜黎比，處理的事情多開銷大，繪制過程中需要數(shù)學(xué)鸳玩、物理學(xué)知識計(jì)算中間量阅虫。
四、一些有意思的動(dòng)畫
-
曲線劃線動(dòng)畫
曲線劃線動(dòng)畫.gif 利用正弦曲線做的怀喉，也是逐幀動(dòng)畫书妻，相信很多人都做過：
正弦曲線.gif
- 粒子動(dòng)畫
粒子動(dòng)畫.gif
