一、簡(jiǎn)介
iOS動(dòng)畫主要是指Core Animation框架。官方使用文檔地址為：Core Animation Guide。Core Animation是iOS和macOS平臺(tái)上負(fù)責(zé)圖形渲染與動(dòng)畫的基礎(chǔ)框架。Core Animation可以作用與動(dòng)畫視圖或者其他可視元素，為你完成了動(dòng)畫所需的大部分繪幀工作。你只需要配置少量的動(dòng)畫參數(shù)（如開始點(diǎn)的位置和結(jié)束點(diǎn)的位置）即可使用Core Animation的動(dòng)畫效果。Core Animation將大部分實(shí)際的繪圖任務(wù)交給了圖形硬件來處理，圖形硬件會(huì)加速圖形渲染的速度。這種自動(dòng)化的圖形加速技術(shù)讓動(dòng)畫擁有更高的幀率并且顯示效果更加平滑，不會(huì)加重CPU的負(fù)擔(dān)而影響程序的運(yùn)行速度。
喬幫主在2007年的WWDC大會(huì)上親自為你演示Core Animation的強(qiáng)大：點(diǎn)擊查看視頻
二.iOS動(dòng)畫的調(diào)用方式
第一種調(diào)用方式:
_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView animateWithDuration:1.0f animations:^{
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
} completion:^(BOOL finished) {
_demoView.frame = CGRectMake(SCREEN_WIDTH/2-25, SCREEN_HEIGHT/2-50, 50, 50);
}];
第二種：UIView [begin commit]模式(首尾式)
_demoView.frame = CGRectMake(0, SCREEN_HEIGHT/2-50, 50, 50);
[UIView beginAnimations:nil context:nil];
[UIView setAnimationDuration:1.0f];
_demoView.frame = CGRectMake(SCREEN_WIDTH, SCREEN_HEIGHT/2-50, 50, 50);
[UIView commitAnimations];
其中最為有價(jià)值的是一個(gè)叫動(dòng)畫組的概念是進(jìn)行UIimageView的幀動(dòng)畫
// 1.3把數(shù)組存入U(xiǎn)IImageView中
self.animationImageView.animationImages = array;
// 1.4 option
self.animationImageView.animationRepeatCount = 1;
// fps 12
self.animationImageView.animationDuration = frames / 12;
// 1.5播放動(dòng)畫
[self.animationImageView startAnimating];
// self.animationImageView.animationImages = nil;
[self.animationImageView performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:self.animationImageView.animationDuration];
demo2.gif
第三種調(diào)用動(dòng)畫方式- 核心動(dòng)畫
- 核心動(dòng)畫基本概念
- 基本動(dòng)畫
- 關(guān)鍵幀動(dòng)畫
- 動(dòng)畫組
- 轉(zhuǎn)場(chǎng)動(dòng)畫
三.Core Animation簡(jiǎn)介
Core Animation，中文翻譯為核心動(dòng)畫，它是一組非常強(qiáng)大的動(dòng)畫處理API，使用它能做出非常炫麗的動(dòng)畫效果，而且往往是事半功倍。也就是說，使用少量的代碼就可以實(shí)現(xiàn)非常強(qiáng)大的功能。
Core Animation可以用在Mac OS X和iOS平臺(tái)。
Core Animation的動(dòng)畫執(zhí)行過程都是在后臺(tái)操作的，不會(huì)阻塞主線程。
要注意的是，Core Animation是直接作用在CALayer上的，并非UIView
一.核心動(dòng)畫繼承結(jié)構(gòu)
image.png
二.Core Animation的使用步驟
開發(fā)步驟:
1.首先得有CALayer
2.初始化一個(gè)CAAnimation對(duì)象，并設(shè)置一些動(dòng)畫相關(guān)屬性
3.通過調(diào)用CALayer的addAnimation:forKey:方法，增加CAAnimation對(duì)象到CALayer中，這樣就能開始執(zhí)行動(dòng)畫了
4.通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動(dòng)畫
三.CAAnimation——簡(jiǎn)介
是所有動(dòng)畫對(duì)象的父類，負(fù)責(zé)控制動(dòng)畫的持續(xù)時(shí)間和速度，是個(gè)抽象類，不能直接使用，應(yīng)該使用它具體的子類
屬性說明：(紅色代表來自CAMediaTiming協(xié)議的屬性)
- duration：動(dòng)畫的持續(xù)時(shí)間
- repeatCount：重復(fù)次數(shù)，無限循環(huán)可以設(shè)置HUGE_VALF或者M(jìn)AXFLOAT
- repeatDuration：重復(fù)時(shí)間
- removedOnCompletion：默認(rèn)為YES，代表動(dòng)畫執(zhí)行完畢后就從圖層上移除，圖形會(huì)恢復(fù)到動(dòng)畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動(dòng)畫執(zhí)行
后的狀態(tài)，那就設(shè)置為NO，不過還要設(shè)置fillMode為kCAFillModeForwards - fillMode：決定當(dāng)前對(duì)象在非active時(shí)間段的行為。比如動(dòng)畫開始之前或者動(dòng)畫結(jié)束之后
- beginTime：可以用來設(shè)置動(dòng)畫延遲執(zhí)行時(shí)間，若想延遲2s，就設(shè)置為-
CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當(dāng)前時(shí)間 - timingFunction：速度控制函數(shù)，控制動(dòng)畫運(yùn)行的節(jié)奏
- delegate：動(dòng)畫代理
四.CAAnimation——?jiǎng)赢嬏畛淠Ｊ?/h6>
fillMode屬性值（要想fillMode有效，最好設(shè)置removedOnCompletion = NO）
- kCAFillModeRemoved 這個(gè)是默認(rèn)值，也就是說當(dāng)動(dòng)畫開始前和動(dòng)畫結(jié)束后，動(dòng)畫對(duì)layer都沒有影響，動(dòng)畫結(jié)束后，layer會(huì)恢復(fù)到之前的狀態(tài)
- kCAFillModeForwards 當(dāng)動(dòng)畫結(jié)束后，layer會(huì)一直保持著動(dòng)畫最后的狀態(tài)
- kCAFillModeBackwards 在動(dòng)畫開始前，只需要將動(dòng)畫加入了一個(gè)layer，layer便立即進(jìn)入動(dòng)畫的初始狀態(tài)并等待動(dòng)畫開始。
- kCAFillModeBoth 這個(gè)其實(shí)就是上面兩個(gè)的合成.動(dòng)畫加入后開始之前，layer便處于動(dòng)畫初始狀態(tài)，動(dòng)畫結(jié)束后layer保持動(dòng)畫最后的狀態(tài)
五.CAAnimation——速度控制函數(shù)
速度控制函數(shù)(CAMediaTimingFunction)
- kCAMediaTimingFunctionLinear（線性）：勻速，給你一個(gè)相對(duì)靜態(tài)的感覺
- kCAMediaTimingFunctionEaseIn（漸進(jìn)）：動(dòng)畫緩慢進(jìn)入，然后加速離開
- kCAMediaTimingFunctionEaseOut（漸出）：動(dòng)畫全速進(jìn)入，然后減速的到達(dá)目的地
- kCAMediaTimingFunctionEaseInEaseOut（漸進(jìn)漸出）：動(dòng)畫緩慢的進(jìn)入，中間加速，然后減速的到達(dá)目的地。這個(gè)是默認(rèn)的動(dòng)畫行為。
六.CALayer上動(dòng)畫的暫停和恢復(fù)
#pragma mark 暫停CALayer的動(dòng)畫
-(void)pauseLayer:(CALayer*)layer
{
CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];
// 讓CALayer的時(shí)間停止走動(dòng)
layer.speed = 0.0;
// 讓CALayer的時(shí)間停留在pausedTime這個(gè)時(shí)刻
layer.timeOffset = pausedTime;
}
CALayer上動(dòng)畫的恢復(fù)
#pragma mark 恢復(fù)CALayer的動(dòng)畫
-(void)resumeLayer:(CALayer*)layer
{
CFTimeInterval pausedTime = layer.timeOffset;
// 1. 讓CALayer的時(shí)間繼續(xù)行走
layer.speed = 1.0;
// 2. 取消上次記錄的停留時(shí)刻
layer.timeOffset = 0.0;
// 3. 取消上次設(shè)置的時(shí)間
layer.beginTime = 0.0;
// 4. 計(jì)算暫停的時(shí)間(這里也可以用CACurrentMediaTime()-pausedTime)
CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
// 5. 設(shè)置相對(duì)于父坐標(biāo)系的開始時(shí)間(往后退timeSincePause)
layer.beginTime = timeSincePause;
}
七.CAPropertyAnimation
是CAAnimation的子類，也是個(gè)抽象類，要想創(chuàng)建動(dòng)畫對(duì)象，應(yīng)該使用它的兩個(gè)子類：
CABasicAnimation
CAKeyframeAnimation
屬性說明：
- keyPath：通過指定CALayer的一個(gè)屬性名稱為keyPath（NSString類型），并且對(duì)CALayer的這個(gè)屬性的值進(jìn)行修改，達(dá)到相應(yīng)的動(dòng)畫效果。比如，指定@“position”為keyPath，就修改CALayer的position屬性的值，以達(dá)到平移的動(dòng)畫效果
八.CABasicAnimation——基本動(dòng)畫
基本動(dòng)畫，是CAPropertyAnimation的子類
屬性說明:
- fromValue：keyPath相應(yīng)屬性的初始值
- toValue：keyPath相應(yīng)屬性的結(jié)束值
動(dòng)畫過程說明：
- 隨著動(dòng)畫的進(jìn)行，在長(zhǎng)度為duration的持續(xù)時(shí)間內(nèi)，keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue
- keyPath內(nèi)容是CALayer的可動(dòng)畫Animatable屬性
- 如果fillMode=kCAFillModeForwards同時(shí)removedOnComletion=NO，那么在動(dòng)畫執(zhí)行完畢后，圖層會(huì)保持顯示動(dòng)畫執(zhí)行后的狀態(tài)。但在實(shí)質(zhì)上，圖層的屬性值還是動(dòng)畫執(zhí)行前的初始值，并沒有真正被改變。
baseAnimation.gif
九.CAKeyframeAnimation——關(guān)鍵幀動(dòng)畫
- 關(guān)鍵幀動(dòng)畫，也是CAPropertyAnimation的子類，與CABasicAnimation的區(qū)別是：
CABasicAnimation只能從一個(gè)數(shù)值（fromValue）變到另一個(gè)數(shù)值（toValue），而CAKeyframeAnimation會(huì)使用一個(gè)NSArray保存這些數(shù)值
屬性說明：
- values：上述的NSArray對(duì)象。里面的元素稱為“關(guān)鍵幀”(keyframe)。動(dòng)畫對(duì)象會(huì)在指定的時(shí)間（duration）內(nèi)，依次顯示values數(shù)組中的每一個(gè)關(guān)鍵幀
- path：可以設(shè)置一個(gè)CGPathRef、CGMutablePathRef，讓圖層按照路徑軌跡移動(dòng)。path只對(duì)CALayer的anchorPoint和position起作用。如果設(shè)置了path，那么values將被忽略
- keyTimes：可以為對(duì)應(yīng)的關(guān)鍵幀指定對(duì)應(yīng)的時(shí)間點(diǎn)，其取值范圍為0到1.0，-
![Uploading keyframeAnimation_390929.gif . . .]
keyTimes中的每一個(gè)時(shí)間值都對(duì)應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes，各個(gè)關(guān)鍵幀的時(shí)間是平分的
CABasicAnimation可看做是只有2個(gè)關(guān)鍵幀的CAKeyframeAnimation
keyframeAnimation.gif
十.CAAnimationGroup——?jiǎng)赢嫿M
- 動(dòng)畫組，是CAAnimation的子類，可以保存一組動(dòng)畫對(duì)象，將CAAnimationGroup對(duì)象加入層后，組中所有動(dòng)畫對(duì)象可以同時(shí)并發(fā)運(yùn)行
屬性說明：
- animations：用來保存一組動(dòng)畫對(duì)象的NSArray
- 默認(rèn)情況下，一組動(dòng)畫對(duì)象是同時(shí)運(yùn)行的，也可以通過設(shè)置動(dòng)畫對(duì)象的-
beginTime屬性來更改動(dòng)畫的開始時(shí)間
animationGroup.gif
十一.轉(zhuǎn)場(chǎng)動(dòng)畫——CATransition
- CATransition是CAAnimation的子類，用于做轉(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)畫效果
- 動(dòng)畫屬性:
- type：動(dòng)畫過渡類型
- subtype：動(dòng)畫過渡方向
- startProgress：動(dòng)畫起點(diǎn)(在整體動(dòng)畫的百分比)
- endProgress：動(dòng)畫終點(diǎn)(在整體動(dòng)畫的百分比)
subtype：動(dòng)畫過渡方向
kCATransitionFromRight 從右側(cè)進(jìn)入
kCATransitionFromLeft 從左側(cè)進(jìn)入
kCATransitionFromTop 從頂部進(jìn)入
kCATransitionFromBottom 從底部進(jìn)入
startProgress：動(dòng)畫起點(diǎn)(在整體動(dòng)畫的百分比)
endProgress：動(dòng)畫終點(diǎn)(在整體動(dòng)畫的百分比)
transition.gif
image.png
Apple 官方的SDK其實(shí)只提供了四種過渡效果。
- kCATransitionFade 漸變效果
- kCATransitionMoveIn 進(jìn)入覆蓋效果
- kCATransitionPush 推出效果
- kCATransitionReveal 揭露離開效果
注意點(diǎn) - 私有api，不建議開發(fā)者們使用。因?yàn)樘O果公司不提供維護(hù)，并且有可能造成你的app審核不通過。
四.使用UIView動(dòng)畫函數(shù)實(shí)現(xiàn)轉(zhuǎn)場(chǎng)動(dòng)畫
單視圖
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;
參數(shù)說明：
- duration：動(dòng)畫的持續(xù)時(shí)間
- view：需要進(jìn)行轉(zhuǎn)場(chǎng)動(dòng)畫的視圖
- options：轉(zhuǎn)場(chǎng)動(dòng)畫的類型
- animations：將改變視圖屬性的代碼放在這個(gè)block中
- completion：動(dòng)畫結(jié)束后，會(huì)自動(dòng)調(diào)用這個(gè)block
雙視圖
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;
參數(shù)說明：
- duration：動(dòng)畫的持續(xù)時(shí)間
- options：轉(zhuǎn)場(chǎng)動(dòng)畫的類型
- animations：將改變視圖屬性的代碼放在這個(gè)block中
- completion：動(dòng)畫結(jié)束后，會(huì)自動(dòng)調(diào)用這個(gè)block
五.粒子動(dòng)畫
粒子動(dòng)畫.gif
在iOS 5中，蘋果引入了一個(gè)新的CALayer子類叫做CAEmitterLayer。CAEmitterLayer是一個(gè)高性能的粒子引擎，被用來創(chuàng)建實(shí)時(shí)例子動(dòng)畫如：煙霧，火，雨等等這些效果。
CAEmitterLayer看上去像是許多CAEmitterCell的容器，這些CAEmitierCell定義了一個(gè)例子效果。你將會(huì)為不同的例子效果定義一個(gè)或多個(gè)CAEmitterCell作為模版，同時(shí)CAEmitterLayer負(fù)責(zé)基于這些模版實(shí)例化一個(gè)粒子流。一個(gè)CAEmitterCell類似于一個(gè)CALayer：它有一個(gè)contents屬性可以定義為一個(gè)CGImage，另外還有一些可設(shè)置屬性控制著表現(xiàn)和行為。
在iOS中實(shí)現(xiàn)粒子特效，有對(duì)應(yīng)的的屬性CAEmitterLayer，它是Layer的子類，用它來實(shí)現(xiàn)粒子特效不會(huì)怎么占用資源，從而去影響UI的流程性。
粒子CAEmitterLayer發(fā)射器的基本屬性
我來舉個(gè)通俗易懂的例子吧CAEmitterLayer就像大炮，決定了(1)哪里發(fā)射(2)大炮有多大CAEmitterCell就像是炮彈，覺得了(1)初速度(2)加速度(3)炮彈類型(4)發(fā)射后的角度 等等
粒子CAEmitterLayer發(fā)射器的基本屬性
//是否允許在規(guī)定的范圍內(nèi)
@property BOOL masksToBounds;
//發(fā)射器的形狀
//kCAEmitterLayerPoint 點(diǎn)的形狀，粒子從一個(gè)點(diǎn)發(fā)出
//kCAEmitterLayerLine 線的形狀，粒子從一條線發(fā)出
//kCAEmitterLayerRectangle 矩形形狀，粒子從一個(gè)矩形中發(fā)出
//kCAEmitterLayerCuboid 立方體形狀，會(huì)影響z平面的效果
//kCAEmitterLayerCircle 圓形，粒子會(huì)在圓形范圍發(fā)射
//kCAEmitterLayerSphere 球形
@property(copy) NSString *emitterShape;
//發(fā)射器的發(fā)射模式
//kCAEmitterLayerPoints 從發(fā)射器中發(fā)出
//kCAEmitterLayerOutline 從發(fā)射器邊緣發(fā)出
//kCAEmitterLayerSurface 從發(fā)射器表面發(fā)出
//kCAEmitterLayerVolumen 從發(fā)射器中點(diǎn)發(fā)出
@property(copy) NSString *emitterMode;
// 發(fā)射器的尺寸大小
@property CGSize emitterSize;
//發(fā)射器在xy平面的中心位置
@property CGPoint emitterPosition;
//發(fā)射器在Z平面的位置
@property CGFloat emitterZPosition;
粒子的屬性，也就是特效，需要用到CAEmitterCell這個(gè)類
//類方法創(chuàng)建發(fā)射單元
+ (instancetype)emitterCell;
//粒子的創(chuàng)建速率
@property float birthRate;
//粒子的生存時(shí)間
@property float lifetime;
//粒子的生存時(shí)間容差
@property float lifetimeRange;
//粒子在Z軸方向的發(fā)射角度
@property CGFloat emissionLatitude;
//粒子在xy平面的發(fā)射角度
@property CGFloat emissionLongitude;
//粒子發(fā)射角度的容差
@property CGFloat emissionRange;
//粒子的速度
@property CGFloat velocity;
//粒子速度的容差
@property CGFloat velocityRange;
//x，y，z三個(gè)方向的加速度
@property CGFloat xAcceleration;
@property CGFloat yAcceleration;
@property CGFloat zAcceleration;
//縮放大小，縮放容差和縮放速度
@property CGFloat scale;
@property CGFloat scaleRange;
@property CGFloat scaleSpeed;
//旋轉(zhuǎn)度與旋轉(zhuǎn)容差
@property CGFloat spin;
@property CGFloat spinRange;
@property CGColorRef color;\
//粒子在rgb三個(gè)色相上的容差和透明度的容差
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
//粒子在RGB三個(gè)色相上的變化速度和透明度的變化速度
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;
//渲染粒子，可以設(shè)置為一個(gè)CGImage的對(duì)象
@property(strong) id contents;
//渲染的范圍
@property CGRect contentsRect;
代碼使用
使用:
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
[self setup];
}
return self;
}
- (void)setup {
self.emitterLayer.masksToBounds = YES;
self.emitterLayer.emitterShape = kCAEmitterLayerLine;
self.emitterLayer.emitterMode = kCAEmitterLayerSurface;
self.emitterLayer.emitterSize = self.frame.size;
self.emitterLayer.emitterPosition
= CGPointMake(self.bounds.size.width / 2.f, -20);
}
- (void)show {
CAEmitterCell *rainFlake = [CAEmitterCell emitterCell];
rainFlake.birthRate = 25.f;
rainFlake.speed = 10.f;
rainFlake.velocity = 10.f;
rainFlake.velocityRange = 10.f;
rainFlake.yAcceleration = 1000.f;
rainFlake.contents = (__bridge id _Nullable)([UIImage imageNamed:@"234"].CGImage);
rainFlake.color = [UIColor blackColor].CGColor;
rainFlake.lifetime = 7.f;
rainFlake.scaleRange = 0.f;
rainFlake.scale = 0.2f;
//添加動(dòng)畫
self.emitterLayer.emitterCells = @[rainFlake];
}
效果展示
下雨.gif
六.第三方框架-POP框架
image.png
POP是一個(gè)在iOS與OS X上通用的極具擴(kuò)展性的動(dòng)畫引擎。它在基本的靜態(tài)動(dòng)畫的基礎(chǔ)上增加的彈簧動(dòng)畫與衰減動(dòng)畫，使之能創(chuàng)造出更真實(shí)更具物理性的交互動(dòng)畫。POP的API可以快速的與現(xiàn)有的ObjC代碼集成并可以作用于任意對(duì)象的任意屬性。POP是個(gè)相當(dāng)成熟且久經(jīng)考驗(yàn)的框架，F(xiàn)acebook出品的令人驚嘆的Paper應(yīng)用中的所有動(dòng)畫和效果即出自POP。
pop彈簧效果.gif
使用
POP默認(rèn)支持三種動(dòng)畫，但同時(shí)也支持自定義動(dòng)畫。
? POPBasicAnimation
? POPSpringAnimation
? POPDecayAnimation
? POPCustomAnimation //自定義動(dòng)畫
1. POPBasicAnimation使用最廣泛 提供固定時(shí)間間隔的動(dòng)畫(如淡入淡出效果)
//基礎(chǔ)動(dòng)畫
UIView *baseAnimation = [[UIView alloc]init];
baseAnimation.backgroundColor = [UIColor yellowColor];
baseAnimation.frame = CGRectMake(0, 0, 100, 100);
baseAnimation.center = self.view.center;
[self.view addSubview:baseAnimation];
//設(shè)置動(dòng)畫
POPBasicAnimation *popBaseAnimation = [POPBasicAnimation animationWithPropertyNamed:kPOPLayerPosition];
popBaseAnimation.toValue = [NSValue valueWithCGPoint:CGPointMake(baseAnimation.center.x, 400)];
popBaseAnimation.duration = 3.f;
popBaseAnimation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
[baseAnimation.layer pop_addAnimation:popBaseAnimation forKey:nil];
self.popView = baseAnimation;
popBaseAnimation.gif
可以看到，添加一個(gè)動(dòng)畫最少僅需三步
1. 定義一個(gè)animation對(duì)象，并指定對(duì)應(yīng)的動(dòng)畫屬性
2. 設(shè)置初始值和默認(rèn)值(初始值可以不指定，會(huì)默認(rèn)從當(dāng)前值開始)
3. 添加到想產(chǎn)生動(dòng)畫的對(duì)象上
2.POPSpringAnimation
POPSpringAnimation也許是大多數(shù)人使用POP的理由，其提供一個(gè)類似彈簧一般的動(dòng)畫效果.
UIView *springAnimation = [[UIView alloc]init];
springAnimation.backgroundColor = [UIColor blueColor];
springAnimation.frame = CGRectMake(0, 0, 100, 100);
springAnimation.center = self.view.center;
[self.view addSubview:springAnimation];
POPSpringAnimation *popSpringAnimation = \
[POPSpringAnimation animationWithPropertyNamed:kPOPViewBounds];
popSpringAnimation.springSpeed = 0;
popSpringAnimation.toValue = [NSValue valueWithCGRect:CGRectMake(0, 0, 300, 300)];
[springAnimation.layer pop_addAnimation:popSpringAnimation forKey:nil];
self.popView = springAnimation;
popSpringAnimation.gif
POPSpringAnimation可配置的屬性與默認(rèn)值為
- springBounciness:4.0 //[0-20] 彈力 越大則震動(dòng)幅度越大
- springSpeed :12.0 //[0-20] 速度 越大則動(dòng)畫結(jié)束越快
- dynamicsTension :0 //拉力 接下來這三個(gè)都跟物理力學(xué)模擬相關(guān) 數(shù)值調(diào)整起來也很費(fèi)時(shí) 沒事不建議使用哈
- dynamicsFriction:0 //摩擦 同上
- dynamicsMass :0 //質(zhì)量 同上
3.POPDecayAnimation
POPDecayAnimation提供一個(gè)過阻尼效果(其實(shí)Spring是一種欠阻尼效果)，可以實(shí)現(xiàn)類似UIScrollView的滑動(dòng)衰減效果
//添加一個(gè)減速動(dòng)畫
POPDecayAnimation *decayAnimation = \
[POPDecayAnimation animationWithPropertyNamed:kPOPLayerPosition];
//獲取加速度
CGPoint velocity = [recognizer velocityInView:self.view];
decayAnimation.velocity = [NSValue valueWithCGPoint:velocity];
[recognizer.view.layer pop_addAnimation:decayAnimation forKey:nil];
popDecayAnimation.gif
注意:這里對(duì)POPDecayAnimation設(shè)置toValue是沒有意義的，會(huì)被忽略(因?yàn)槟康臓顟B(tài)是動(dòng)態(tài)計(jì)算得到的)
POPDecayAnimation可配置的屬性與默認(rèn)值為
- 注意:POPDecayAnimation也是沒有duration字段的，其動(dòng)畫持續(xù)時(shí)間由velocity與deceleration決定
七.第三方框架 Lottie框架
什么是Lottie？
- 首先要說的是：什么是Lottie呢？由Airbnb開發(fā)的Lottie是一個(gè)將After Effects動(dòng)畫提供給任意一個(gè)iOS，macOS，Android還有React Native原生APP的文件庫(kù)。這些動(dòng)畫通過一個(gè)叫Bodymovin的開源After Effects插件，以JSON文件的形式進(jìn)行輸出。Lottie通過JSON格式下載動(dòng)畫數(shù)據(jù)并實(shí)時(shí)提供給開發(fā)者。
換句話說，你也可以通過設(shè)計(jì)器直接把JSON文件放入Xcode project，讓Lottie幫你下載動(dòng)畫。當(dāng)然別誤會(huì)，你還是需要為你的動(dòng)畫寫一些代碼，但是你會(huì)發(fā)現(xiàn)Lottie的確將為你的動(dòng)畫編碼節(jié)省大量的時(shí)間。
lottieDemo.gif
Lottie 動(dòng)畫文件
在使用Lottie之前，你需要一個(gè)以JSON文件形式輸出的動(dòng)畫數(shù)據(jù)庫(kù)。如果你已經(jīng)有了一個(gè)After Effects動(dòng)畫，用Bodymovin插件來創(chuàng)建JSON文件。
如果你不會(huì)使用After Effects呢？你要如何準(zhǔn)備你的動(dòng)畫？你可以雇一位設(shè)計(jì)師為你設(shè)計(jì)動(dòng)畫，或者你學(xué)會(huì)用After Effects。
幸運(yùn)的是，這里還有一個(gè)選項(xiàng)，那就是：Lottie Files
lottieFileDemo.gif
用CocoaPods安裝Lottie動(dòng)畫庫(kù)
當(dāng)你創(chuàng)建完項(xiàng)目，離開Xcode，打開Terminal。我們將為安裝Lottie動(dòng)畫庫(kù)創(chuàng)建一個(gè)Podfile。我想你應(yīng)該已經(jīng)有一些使用CocoaPods的經(jīng)驗(yàn)并且已經(jīng)把它安裝在你的電腦中了。
在terminal中運(yùn)行下列指令來創(chuàng)建一個(gè)Podfile。
/**
lottie動(dòng)畫展示
*/
- (void)playAnimationWithName: (NSString *)name {
NSString *path = [[NSBundle mainBundle]pathForResource:name ofType:nil ];
LOTAnimationView *lotAnimation = [LOTAnimationView animationWithFilePath:path];
lotAnimation.frame = CGRectMake(0, 0, 400, 400);
lotAnimation.center = self.view.center;
lotAnimation.contentMode = UIViewContentModeScaleAspectFill;
[self.view addSubview:lotAnimation];
[lotAnimation play];
lotAnimation.loopAnimation = YES;
self.lotAnimation = lotAnimation;
}
demo展示
lottieAnimation.gif
本篇?jiǎng)赢嬜鳛樽约旱目偨Y(jié).其中引用大量的博主的動(dòng)畫文章.沒有任何商業(yè)用途.都是用于學(xué)習(xí)跟總結(jié)回頭.諸君共勉!!!
以下為本文的出入跟資料:
1.使用帶粒子效果的 CAEmitterLayer視頻教學(xué)
2.POP基礎(chǔ)動(dòng)畫視頻教學(xué)
3.Lottie簡(jiǎn)介 & iOS集成使用
4.Lottie初級(jí)教程：打造iOS APP完美動(dòng)畫
5.iOS動(dòng)畫（Core Animation）總結(jié)
6.M了個(gè)J - Core Animation1-簡(jiǎn)介
7.iOS中粒子發(fā)射(封裝下雨，下雪，噴火等特效)
8.iOS那些簡(jiǎn)單的動(dòng)畫（不定期更新）
9iOS動(dòng)畫之用CAEmitterLayer實(shí)現(xiàn)炫酷的動(dòng)畫
10動(dòng)畫demo大綜合github社區(qū)
