iOS 動畫從入門到無需可入!

一懦趋、簡介

iOS動畫主要是指Core Animation框架霍弹。官方使用文檔地址為：Core Animation Guide罪裹。Core Animation是iOS和macOS平臺上負(fù)責(zé)圖形渲染與動畫的基礎(chǔ)框架乱灵。Core Animation可以作用與動畫視圖或者其他可視元素溯饵，為你完成了動畫所需的大部分繪幀工作。你只需要配置少量的動畫參數(shù)（如開始點的位置和結(jié)束點的位置）即可使用Core Animation的動畫效果背镇。Core Animation將大部分實際的繪圖任務(wù)交給了圖形硬件來處理咬展，圖形硬件會加速圖形渲染的速度。這種自動化的圖形加速技術(shù)讓動畫擁有更高的幀率并且顯示效果更加平滑瞒斩，不會加重CPU的負(fù)擔(dān)而影響程序的運行速度破婆。

喬幫主在2007年的WWDC大會上親自為你演示Core Animation的強(qiáng)大：點擊查看視頻

二.iOS動畫的調(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];
其中最為有價值的是一個叫動畫組的概念是進(jìn)行UIimageView的幀動畫
  //  1.3把數(shù)組存入UIImageView中
    self.animationImageView.animationImages = array;
    
    //  1.4  option
    self.animationImageView.animationRepeatCount = 1;
    
    //  fps  12
    self.animationImageView.animationDuration = frames / 12;
    
    //  1.5播放動畫
    [self.animationImageView startAnimating];

//    self.animationImageView.animationImages = nil;
    
    [self.animationImageView performSelector:@selector(setAnimationImages:) withObject:nil afterDelay:self.animationImageView.animationDuration];
demo2.gif
第三種調(diào)用動畫方式- 核心動畫
  • 核心動畫基本概念
  • 基本動畫
  • 關(guān)鍵幀動畫
  • 動畫組
  • 轉(zhuǎn)場動畫

三.Core Animation簡介

Core Animation，中文翻譯為核心動畫胸囱，它是一組非常強(qiáng)大的動畫處理API祷舀，使用它能做出非常炫麗的動畫效果，而且往往是事半功倍。也就是說裳扯，使用少量的代碼就可以實現(xiàn)非常強(qiáng)大的功能抛丽。
Core Animation可以用在Mac OS X和iOS平臺。
Core Animation的動畫執(zhí)行過程都是在后臺操作的饰豺，不會阻塞主線程亿鲜。
要注意的是，Core Animation是直接作用在CALayer上的哟忍，并非UIView

一.核心動畫繼承結(jié)構(gòu)
image.png
二.Core Animation的使用步驟

開發(fā)步驟:
1.首先得有CALayer
2.初始化一個CAAnimation對象狡门，并設(shè)置一些動畫相關(guān)屬性
3.通過調(diào)用CALayer的addAnimation:forKey:方法，增加CAAnimation對象到CALayer中锅很，這樣就能開始執(zhí)行動畫了
4.通過調(diào)用CALayer的removeAnimationForKey:方法可以停止CALayer中的動畫

三.CAAnimation——簡介

是所有動畫對象的父類其馏，負(fù)責(zé)控制動畫的持續(xù)時間和速度，是個抽象類爆安，不能直接使用叛复，應(yīng)該使用它具體的子類
屬性說明：(紅色代表來自CAMediaTiming協(xié)議的屬性)

  • duration：動畫的持續(xù)時間
  • repeatCount：重復(fù)次數(shù)，無限循環(huán)可以設(shè)置HUGE_VALF或者M(jìn)AXFLOAT
  • repeatDuration：重復(fù)時間
  • removedOnCompletion：默認(rèn)為YES扔仓，代表動畫執(zhí)行完畢后就從圖層上移除褐奥，圖形會恢復(fù)到動畫執(zhí)行前的狀態(tài)。如果想讓圖層保持顯示動畫執(zhí)行
    后的狀態(tài)翘簇，那就設(shè)置為NO撬码，不過還要設(shè)置fillMode為kCAFillModeForwards
  • fillMode：決定當(dāng)前對象在非active時間段的行為。比如動畫開始之前或者動畫結(jié)束之后
  • beginTime：可以用來設(shè)置動畫延遲執(zhí)行時間版保，若想延遲2s呜笑，就設(shè)置為-
    CACurrentMediaTime()+2，CACurrentMediaTime()為圖層的當(dāng)前時間
  • timingFunction：速度控制函數(shù)彻犁，控制動畫運行的節(jié)奏
  • delegate：動畫代理
四.CAAnimation——動畫填充模式
fillMode屬性值（要想fillMode有效叫胁，最好設(shè)置removedOnCompletion = NO）
  • kCAFillModeRemoved 這個是默認(rèn)值，也就是說當(dāng)動畫開始前和動畫結(jié)束后汞幢，動畫對layer都沒有影響驼鹅，動畫結(jié)束后，layer會恢復(fù)到之前的狀態(tài)
  • kCAFillModeForwards 當(dāng)動畫結(jié)束后森篷，layer會一直保持著動畫最后的狀態(tài)
  • kCAFillModeBackwards 在動畫開始前输钩，只需要將動畫加入了一個layer，layer便立即進(jìn)入動畫的初始狀態(tài)并等待動畫開始疾宏。
  • kCAFillModeBoth 這個其實就是上面兩個的合成.動畫加入后開始之前张足，layer便處于動畫初始狀態(tài)，動畫結(jié)束后layer保持動畫最后的狀態(tài)
五.CAAnimation——速度控制函數(shù)

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

  • kCAMediaTimingFunctionLinear（線性）：勻速坎藐，給你一個相對靜態(tài)的感覺
  • kCAMediaTimingFunctionEaseIn（漸進(jìn)）：動畫緩慢進(jìn)入，然后加速離開
  • kCAMediaTimingFunctionEaseOut（漸出）：動畫全速進(jìn)入，然后減速的到達(dá)目的地
  • kCAMediaTimingFunctionEaseInEaseOut（漸進(jìn)漸出）：動畫緩慢的進(jìn)入岩馍，中間加速碉咆，然后減速的到達(dá)目的地。這個是默認(rèn)的動畫行為蛀恩。
六.CALayer上動畫的暫停和恢復(fù)
#pragma mark 暫停CALayer的動畫
-(void)pauseLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = [layer convertTime:CACurrentMediaTime() fromLayer:nil];

    // 讓CALayer的時間停止走動
      layer.speed = 0.0;
    // 讓CALayer的時間停留在pausedTime這個時刻
    layer.timeOffset = pausedTime;
}
CALayer上動畫的恢復(fù)
#pragma mark 恢復(fù)CALayer的動畫
-(void)resumeLayer:(CALayer*)layer
{
    CFTimeInterval pausedTime = layer.timeOffset;
    // 1. 讓CALayer的時間繼續(xù)行走
      layer.speed = 1.0;
    // 2. 取消上次記錄的停留時刻
      layer.timeOffset = 0.0;
    // 3. 取消上次設(shè)置的時間
      layer.beginTime = 0.0;    
    // 4. 計算暫停的時間(這里也可以用CACurrentMediaTime()-pausedTime)
    CFTimeInterval timeSincePause = [layer convertTime:CACurrentMediaTime() fromLayer:nil] - pausedTime;
    // 5. 設(shè)置相對于父坐標(biāo)系的開始時間(往后退timeSincePause)
      layer.beginTime = timeSincePause;
}
七.CAPropertyAnimation

是CAAnimation的子類疫铜，也是個抽象類，要想創(chuàng)建動畫對象双谆，應(yīng)該使用它的兩個子類：
CABasicAnimation
CAKeyframeAnimation

屬性說明：

  • keyPath：通過指定CALayer的一個屬性名稱為keyPath（NSString類型）壳咕，并且對CALayer的這個屬性的值進(jìn)行修改，達(dá)到相應(yīng)的動畫效果顽馋。比如谓厘，指定@“position”為keyPath，就修改CALayer的position屬性的值寸谜，以達(dá)到平移的動畫效果
八.CABasicAnimation——基本動畫

基本動畫竟稳，是CAPropertyAnimation的子類

屬性說明:

  • fromValue：keyPath相應(yīng)屬性的初始值
  • toValue：keyPath相應(yīng)屬性的結(jié)束值

動畫過程說明：

  • 隨著動畫的進(jìn)行，在長度為duration的持續(xù)時間內(nèi)熊痴，keyPath相應(yīng)屬性的值從fromValue漸漸地變?yōu)閠oValue
  • keyPath內(nèi)容是CALayer的可動畫Animatable屬性
  • 如果fillMode=kCAFillModeForwards同時removedOnComletion=NO他爸，那么在動畫執(zhí)行完畢后，圖層會保持顯示動畫執(zhí)行后的狀態(tài)果善。但在實質(zhì)上诊笤，圖層的屬性值還是動畫執(zhí)行前的初始值，并沒有真正被改變巾陕。
baseAnimation.gif
九.CAKeyframeAnimation——關(guān)鍵幀動畫
  • 關(guān)鍵幀動畫讨跟，也是CAPropertyAnimation的子類，與CABasicAnimation的區(qū)別是：
    CABasicAnimation只能從一個數(shù)值（fromValue）變到另一個數(shù)值（toValue）惜论，而CAKeyframeAnimation會使用一個NSArray保存這些數(shù)值

屬性說明：

  • values：上述的NSArray對象许赃。里面的元素稱為“關(guān)鍵幀”(keyframe)。動畫對象會在指定的時間（duration）內(nèi)馆类，依次顯示values數(shù)組中的每一個關(guān)鍵幀
  • path：可以設(shè)置一個CGPathRef混聊、CGMutablePathRef，讓圖層按照路徑軌跡移動乾巧。path只對CALayer的anchorPoint和position起作用句喜。如果設(shè)置了path，那么values將被忽略
  • keyTimes：可以為對應(yīng)的關(guān)鍵幀指定對應(yīng)的時間點沟于，其取值范圍為0到1.0咳胃，-

![Uploading keyframeAnimation_390929.gif . . .]
keyTimes中的每一個時間值都對應(yīng)values中的每一幀。如果沒有設(shè)置keyTimes旷太，各個關(guān)鍵幀的時間是平分的

CABasicAnimation可看做是只有2個關(guān)鍵幀的CAKeyframeAnimation

keyframeAnimation.gif
十.CAAnimationGroup——動畫組
  • 動畫組展懈，是CAAnimation的子類销睁，可以保存一組動畫對象，將CAAnimationGroup對象加入層后存崖，組中所有動畫對象可以同時并發(fā)運行

屬性說明：

  • animations：用來保存一組動畫對象的NSArray
  • 默認(rèn)情況下冻记，一組動畫對象是同時運行的，也可以通過設(shè)置動畫對象的-
    beginTime屬性來更改動畫的開始時間
animationGroup.gif
十一.轉(zhuǎn)場動畫——CATransition
  • CATransition是CAAnimation的子類来惧，用于做轉(zhuǎn)場動畫冗栗，能夠為層提供移出屏幕和移入屏幕的動畫效果。iOS比Mac OS X的轉(zhuǎn)場動畫效果少一點
  • UINavigationController就是通過CATransition實現(xiàn)了將控制器的視圖推入屏幕的動畫效果
  • 動畫屬性:
  • type：動畫過渡類型
  • subtype：動畫過渡方向
  • startProgress：動畫起點(在整體動畫的百分比)
  • endProgress：動畫終點(在整體動畫的百分比)
subtype：動畫過渡方向
    kCATransitionFromRight 從右側(cè)進(jìn)入
    kCATransitionFromLeft 從左側(cè)進(jìn)入
    kCATransitionFromTop 從頂部進(jìn)入
    kCATransitionFromBottom 從底部進(jìn)入
    startProgress：動畫起點(在整體動畫的百分比)
    endProgress：動畫終點(在整體動畫的百分比)
transition.gif
image.png
Apple 官方的SDK其實只提供了四種過渡效果供搀。
  • kCATransitionFade 漸變效果
  • kCATransitionMoveIn 進(jìn)入覆蓋效果
  • kCATransitionPush 推出效果
  • kCATransitionReveal 揭露離開效果
    注意點
  • 私有api隅居，不建議開發(fā)者們使用。因為蘋果公司不提供維護(hù)葛虐，并且有可能造成你的app審核不通過胎源。

四.使用UIView動畫函數(shù)實現(xiàn)轉(zhuǎn)場動畫

單視圖
+ (void)transitionWithView:(UIView *)view duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options animations:(void (^)(void))animations completion:(void (^)(BOOL finished))completion;

參數(shù)說明：

  • duration：動畫的持續(xù)時間
  • view：需要進(jìn)行轉(zhuǎn)場動畫的視圖
  • options：轉(zhuǎn)場動畫的類型
  • animations：將改變視圖屬性的代碼放在這個block中
  • completion：動畫結(jié)束后，會自動調(diào)用這個block
雙視圖
+ (void)transitionFromView:(UIView *)fromView toView:(UIView *)toView duration:(NSTimeInterval)duration options:(UIViewAnimationOptions)options completion:(void (^)(BOOL finished))completion;

參數(shù)說明：

  • duration：動畫的持續(xù)時間
  • options：轉(zhuǎn)場動畫的類型
  • animations：將改變視圖屬性的代碼放在這個block中
  • completion：動畫結(jié)束后挡闰，會自動調(diào)用這個block

五.粒子動畫

粒子動畫.gif
在iOS 5中乒融，蘋果引入了一個新的CALayer子類叫做CAEmitterLayer。CAEmitterLayer是一個高性能的粒子引擎摄悯，被用來創(chuàng)建實時例子動畫如：煙霧赞季，火，雨等等這些效果奢驯。

CAEmitterLayer看上去像是許多CAEmitterCell的容器申钩，這些CAEmitierCell定義了一個例子效果。你將會為不同的例子效果定義一個或多個CAEmitterCell作為模版瘪阁，同時CAEmitterLayer負(fù)責(zé)基于這些模版實例化一個粒子流撒遣。一個CAEmitterCell類似于一個CALayer：它有一個contents屬性可以定義為一個CGImage，另外還有一些可設(shè)置屬性控制著表現(xiàn)和行為管跺。

在iOS中實現(xiàn)粒子特效义黎，有對應(yīng)的的屬性CAEmitterLayer，它是Layer的子類豁跑，用它來實現(xiàn)粒子特效不會怎么占用資源廉涕，從而去影響UI的流程性。
粒子CAEmitterLayer發(fā)射器的基本屬性

我來舉個通俗易懂的例子吧CAEmitterLayer就像大炮艇拍，決定了(1)哪里發(fā)射(2)大炮有多大CAEmitterCell就像是炮彈狐蜕，覺得了(1)初速度(2)加速度(3)炮彈類型(4)發(fā)射后的角度 等等
粒子CAEmitterLayer發(fā)射器的基本屬性
//是否允許在規(guī)定的范圍內(nèi)
@property BOOL masksToBounds;

//發(fā)射器的形狀
//kCAEmitterLayerPoint 點的形狀，粒子從一個點發(fā)出
//kCAEmitterLayerLine 線的形狀卸夕，粒子從一條線發(fā)出
//kCAEmitterLayerRectangle 矩形形狀层释，粒子從一個矩形中發(fā)出
//kCAEmitterLayerCuboid 立方體形狀，會影響z平面的效果
//kCAEmitterLayerCircle 圓形快集，粒子會在圓形范圍發(fā)射
//kCAEmitterLayerSphere 球形
@property(copy) NSString *emitterShape;

//發(fā)射器的發(fā)射模式
//kCAEmitterLayerPoints 從發(fā)射器中發(fā)出
//kCAEmitterLayerOutline 從發(fā)射器邊緣發(fā)出
//kCAEmitterLayerSurface 從發(fā)射器表面發(fā)出
//kCAEmitterLayerVolumen 從發(fā)射器中點發(fā)出
@property(copy) NSString *emitterMode;

// 發(fā)射器的尺寸大小
@property CGSize emitterSize;

//發(fā)射器在xy平面的中心位置
@property CGPoint emitterPosition;

//發(fā)射器在Z平面的位置
@property CGFloat emitterZPosition;
粒子的屬性贡羔，也就是特效廉白，需要用到CAEmitterCell這個類
//類方法創(chuàng)建發(fā)射單元
+ (instancetype)emitterCell;
//粒子的創(chuàng)建速率
@property float birthRate;
//粒子的生存時間
@property float lifetime;
//粒子的生存時間容差
@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三個方向的加速度
@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三個色相上的容差和透明度的容差
@property float redRange;
@property float greenRange;
@property float blueRange;
@property float alphaRange;
//粒子在RGB三個色相上的變化速度和透明度的變化速度
@property float redSpeed;
@property float greenSpeed;
@property float blueSpeed;
@property float alphaSpeed;
//渲染粒子勃黍，可以設(shè)置為一個CGImage的對象
@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;
    //添加動畫
    self.emitterLayer.emitterCells = @[rainFlake];
}
效果展示
下雨.gif
![星星.gif](http://upload-images.jianshu.io/upload_images/1170421-57934d29912e713c.gif?imageMogr2/auto-orient/strip)

六.第三方框架-POP框架

facebook/*pop

image.png
POP是一個在iOS與OS X上通用的極具擴(kuò)展性的動畫引擎宵统。它在基本的靜態(tài)動畫的基礎(chǔ)上增加的彈簧動畫與衰減動畫，使之能創(chuàng)造出更真實更具物理性的交互動畫覆获。POP的API可以快速的與現(xiàn)有的ObjC代碼集成并可以作用于任意對象的任意屬性马澈。POP是個相當(dāng)成熟且久經(jīng)考驗的框架，F(xiàn)acebook出品的令人驚嘆的Paper應(yīng)用中的所有動畫和效果即出自POP弄息。
pop彈簧效果.gif
使用

POP默認(rèn)支持三種動畫痊班，但同時也支持自定義動畫。
? POPBasicAnimation
? POPSpringAnimation
? POPDecayAnimation
? POPCustomAnimation //自定義動畫

1. POPBasicAnimation使用最廣泛 提供固定時間間隔的動畫(如淡入淡出效果)
    //基礎(chǔ)動畫
    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è)置動畫
    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
可以看到摹量，添加一個動畫最少僅需三步
1.  定義一個animation對象涤伐，并指定對應(yīng)的動畫屬性
2.  設(shè)置初始值和默認(rèn)值(初始值可以不指定，會默認(rèn)從當(dāng)前值開始)
3.  添加到想產(chǎn)生動畫的對象上
2.POPSpringAnimation

POPSpringAnimation也許是大多數(shù)人使用POP的理由缨称，其提供一個類似彈簧一般的動畫效果.

    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] 彈力 越大則震動幅度越大
  • springSpeed :12.0 //[0-20] 速度 越大則動畫結(jié)束越快
  • dynamicsTension :0 //拉力 接下來這三個都跟物理力學(xué)模擬相關(guān) 數(shù)值調(diào)整起來也很費時 沒事不建議使用哈
  • dynamicsFriction:0 //摩擦 同上
  • dynamicsMass :0 //質(zhì)量 同上

3.POPDecayAnimation

POPDecayAnimation提供一個過阻尼效果(其實Spring是一種欠阻尼效果)凝果，可以實現(xiàn)類似UIScrollView的滑動衰減效果

        
        //添加一個減速動畫
        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
注意:這里對POPDecayAnimation設(shè)置toValue是沒有意義的，會被忽略(因為目的狀態(tài)是動態(tài)計算得到的)

POPDecayAnimation可配置的屬性與默認(rèn)值為

  • 注意:POPDecayAnimation也是沒有duration字段的睦尽，其動畫持續(xù)時間由velocity與deceleration決定

七.第三方框架 Lottie框架

airbnb/lottie-ios

什么是Lottie器净？

  • 首先要說的是：什么是Lottie呢？由Airbnb開發(fā)的Lottie是一個將After Effects動畫提供給任意一個iOS当凡，macOS山害，Android還有React Native原生APP的文件庫。這些動畫通過一個叫Bodymovin的開源After Effects插件沿量，以JSON文件的形式進(jìn)行輸出浪慌。Lottie通過JSON格式下載動畫數(shù)據(jù)并實時提供給開發(fā)者。
    換句話說朴则，你也可以通過設(shè)計器直接把JSON文件放入Xcode project权纤，讓Lottie幫你下載動畫。當(dāng)然別誤會佛掖，你還是需要為你的動畫寫一些代碼妖碉，但是你會發(fā)現(xiàn)Lottie的確將為你的動畫編碼節(jié)省大量的時間。
lottieDemo.gif

Lottie 動畫文件

在使用Lottie之前芥被，你需要一個以JSON文件形式輸出的動畫數(shù)據(jù)庫欧宜。如果你已經(jīng)有了一個After Effects動畫，用Bodymovin插件來創(chuàng)建JSON文件拴魄。
如果你不會使用After Effects呢冗茸？你要如何準(zhǔn)備你的動畫席镀？你可以雇一位設(shè)計師為你設(shè)計動畫，或者你學(xué)會用After Effects夏漱。
幸運的是豪诲，這里還有一個選項，那就是：Lottie Files

lottieFileDemo.gif
用CocoaPods安裝Lottie動畫庫

當(dāng)你創(chuàng)建完項目挂绰，離開Xcode屎篱，打開Terminal。我們將為安裝Lottie動畫庫創(chuàng)建一個Podfile葵蒂。我想你應(yīng)該已經(jīng)有一些使用CocoaPods的經(jīng)驗并且已經(jīng)把它安裝在你的電腦中了交播。
在terminal中運行下列指令來創(chuàng)建一個Podfile。

/**
 lottie動畫展示
 */
- (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é).其中引用大量的博主的動畫文章.沒有任何商業(yè)用途.都是用于學(xué)習(xí)跟總結(jié)回頭.諸君共勉!!!

以下為本文的出入跟資料:

1.使用帶粒子效果的 CAEmitterLayer視頻教學(xué)
2.POP基礎(chǔ)動畫視頻教學(xué)
3.Lottie簡介 & iOS集成使用
4.Lottie初級教程：打造iOS APP完美動畫
5.iOS動畫（Core Animation）總結(jié)
6.M了個J - Core Animation1-簡介
7.iOS中粒子發(fā)射(封裝下雨践付，下雪秦士，噴火等特效)
8.iOS那些簡單的動畫（不定期更新）
9iOS動畫之用CAEmitterLayer實現(xiàn)炫酷的動畫
10動畫demo大綜合github社區(qū)

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末，一起剝皮案震驚了整個濱河市永高，隨后出現(xiàn)的幾起案子隧土，更是在濱河造成了極大的恐慌，老刑警劉巖命爬，帶你破解...
    沈念sama閱讀 206,126評論 6贊 481
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件曹傀，死亡現(xiàn)場離奇詭異，居然都是意外死亡遇骑，警方通過查閱死者的電腦和手機(jī)卖毁，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評論 2贊 382
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來落萎，“玉大人亥啦，你說我怎么就攤上這事×妨矗” “怎么了翔脱？”我有些...
    開封第一講書人閱讀 152,445評論 0贊 341
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長媒鼓。 經(jīng)常有香客問我届吁，道長，這世上最難降的妖魔是什么绿鸣？ 我笑而不...
    開封第一講書人閱讀 55,185評論 1贊 278
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任疚沐，我火速辦了婚禮，結(jié)果婚禮上潮模，老公的妹妹穿的比我還像新娘亮蛔。我一直安慰自己，他們只是感情好擎厢，可當(dāng)我...
    茶點故事閱讀 64,178評論 5贊 371
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布究流。 她就那樣靜靜地躺著辣吃，像睡著了一般。 火紅的嫁衣襯著肌膚如雪芬探。 梳的紋絲不亂的頭發(fā)上神得，一...
    開封第一講書人閱讀 48,970評論 1贊 284
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音偷仿，去河邊找鬼哩簿。 笑死，一個胖子當(dāng)著我的面吹牛炎疆，可吹牛的內(nèi)容都是我干的卡骂。 我是一名探鬼主播，決...
    沈念sama閱讀 38,276評論 3贊 399
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼形入，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了缝左？” 一聲冷哼從身側(cè)響起亿遂，我...
    開封第一講書人閱讀 36,927評論 0贊 259
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎渺杉，沒想到半個月后蛇数，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 43,400評論 1贊 300
  • ?護(hù)林員之死
    正文 獨居荒郊野嶺守林人離奇死亡是越，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,883評論 2贊 323
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年耳舅，在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片倚评。...
    茶點故事閱讀 37,997評論 1贊 333
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡浦徊，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出天梧，到底是詐尸還是另有隱情盔性，我是刑警寧澤，帶...
    沈念sama閱讀 33,646評論 4贊 322
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布呢岗，位于F島的核電站冕香，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏后豫。R本人自食惡果不足惜悉尾，卻給世界環(huán)境...
    茶點故事閱讀 39,213評論 3贊 307
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望挫酿。 院中可真熱鬧构眯，春花似錦、人聲如沸饭豹。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評論 0贊 19
  • 一樁弒父案务漩，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至它褪，卻和暖如春饵骨，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背茫打。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評論 1贊 260
  • 情欲美人皮
    我被黑心中介騙來泰國打工居触， 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人老赤。 一個月前我還...
    沈念sama閱讀 45,423評論 2贊 352
  • 代替公主和親
    正文 我出身青樓轮洋，卻偏偏與公主長得像，于是被迫代替她去往敵國和親抬旺。 傳聞我的和親對象是個殘疾皇子弊予，可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,722評論 2贊 345

推薦閱讀更多精彩內(nèi)容

  • 在iOS中隨處都可以看到絢麗的動畫效果，實現(xiàn)這些動畫的過程并不復(fù)雜开财，今天將帶大家一窺ios動畫全貌汉柒。在這里你可以看...
    每天刷兩次牙閱讀 8,465評論 6贊 30
  • 在iOS實際開發(fā)中常用的動畫無非是以下四種：UIView動畫，核心動畫责鳍，幀動畫碾褂，自定義轉(zhuǎn)場動畫。 1.UIView...
    請叫我周小帥閱讀 3,076評論 1贊 23
  • 漢字字母數(shù)字排序 Collator Collator 用來簡化我們處理各種語言之間的差別性历葛。Collator 主要...
    探戲者閱讀 644評論 0贊 0
  • 01 我是小透明，3周前斥巨資買了一只定制包宏娄，在我苦等快遞的時候问裕，物流信息提示已收貨。但我并沒有接到快遞員的電話孵坚，...
    魔都八點辦閱讀 1,000評論 1贊 1
  • 曉明（我還沒想好今后怎么稱呼你）粮宛，因為我，你今天一天都很難受卖宠，對不起巍杈，我會用心去對你好，請相信我扛伍，其實我也不知道該...
    我期待的是閱讀 140評論 0贊 0