我們?cè)谄綍r(shí)開發(fā)中晰筛，要實(shí)現(xiàn)一個(gè)動(dòng)畫眶俩，大多數(shù)情況直接用Gif圖莹汤，但Gif占用空間較大，而且需要為各種屏幕尺寸颠印、分辨率做適配纲岭；另一種是用幀動(dòng)畫抹竹，但是幀動(dòng)畫占用空間比 Gif 還要大的多，也需要做適配止潮。
當(dāng)項(xiàng)目中有很多地方用到動(dòng)畫效果的時(shí)候會(huì)添很多Gif窃判，這樣打出來(lái)的包會(huì)很大。這時(shí)候我們會(huì)要求設(shè)計(jì)師壓縮尺寸后再給我們喇闸，這樣包是變小了袄琳，但是用戶體驗(yàn)會(huì)很差，動(dòng)效很不清晰仅偎。
這種情況下跨蟹，就輪到?Lottie、 (LottieFiles) 登場(chǎng)了橘沥，阿里新出的?犸良https://design.alipay.com/emotion就是基于Lottie動(dòng)畫的窗轩。設(shè)計(jì)師做好動(dòng)效后只需導(dǎo)出很小的Json文件，把Json文件拖入工程座咆，在iOS (安卓痢艺、Web) 代碼中讀取這份Json文件，解析動(dòng)畫結(jié)構(gòu)和參數(shù)信息并渲染就行了介陶。
一堤舒、集成：
在iOS中使用需要先集成Lottie的SDK (Swift版本、OC版本)哺呜，然后直接在代碼中使用就可以了舌缤。
1、Swift：
pod'lottie-ios'
代碼：
import UIKit
import Lottie
class ViewController: UIViewController {
? ? let lottieView = AnimationView()
? ? override func viewDidLoad() {
? ? ? ? super.viewDidLoad()
? ? ? ? lottieView.frame = CGRect(x: 0, y: 0, width: 400, height: 400)
? ? ? ? lottieView.center = self.view.center
? ? ? ? lottieView.animation = Animation.named(“l(fā)ottieJson“)//綁定Lottie動(dòng)畫
? ? ? ? lottieView.loopMode = .loop//動(dòng)畫效果 執(zhí)行單次某残、多次
? ? ? ? lottieView.contentMode = .scaleAspectFit
? ? ? ? lottieView.backgroundBehavior = .pauseAndRestore//設(shè)置進(jìn)入后臺(tái)是否暫停動(dòng)畫
? ? ? ? self.view.addSubview(lottieView)
? ? ? ? lottieView.play()//開始動(dòng)畫
? ? ? ? //lottieView.stop()//暫停動(dòng)畫
}}
2国撵、OC：
pod'lottie-ios_Oc'
代碼：
#import "ViewController.h"
#import <lottie_ios_Oc/LOTAnimationView.h>
@implementation ViewController
- (void)viewDidLoad {
? ? [super viewDidLoad];
? ? LOTAnimationView *lottieView = [LOTAnimationView animationNamed:@"lottieJson"];//綁定Lottie動(dòng)畫
? ? lottieView.frame = CGRectMake(0, 0, 400, 400);
? ? lottieView.center = self.view.center;
? ? lottieView.loopAnimation = YES;//動(dòng)畫效果 執(zhí)行單次、多次
? ? lottieView.contentMode = UIViewContentModeScaleAspectFit;
? ? //handleWillEnterBackground 進(jìn)入后臺(tái)默認(rèn)暫停動(dòng)畫
? ? [self.view addSubview:lottieView];
? ? [lottieView playWithCompletion:^(BOOL animationFinished) {
? ? ? //動(dòng)畫完成后可執(zhí)行自定義操作
? ? }];
? ? [lottieView play];//開始動(dòng)畫
? ? //[lottieView stop];//暫停動(dòng)畫
}
@end
二玻墅、總結(jié)
1介牙、優(yōu)點(diǎn)：
·開發(fā)成本低，設(shè)計(jì)師導(dǎo)出Json文件給到開發(fā)即可澳厢。
·動(dòng)畫實(shí)現(xiàn)成功率高环础，只要設(shè)計(jì)師能設(shè)計(jì)出來(lái)的都能實(shí)現(xiàn)。
·支持服務(wù)端URL方式創(chuàng)建剩拢，通過服務(wù)端配置Json文件隨時(shí)替換動(dòng)畫线得，不用重新發(fā)版。
·iOS徐伐、安卓框都、Web可用同一套Json文件。
·支持轉(zhuǎn)場(chǎng)動(dòng)畫，Presen／Dismiss時(shí)可做轉(zhuǎn)場(chǎng)效果魏保。
2熬尺、缺點(diǎn)：
?·低配設(shè)備上解析大Json文件可能比較耗時(shí)、異常谓罗，適用硬件性能較好的設(shè)備粱哼。
解決：
·手機(jī)性能不斷升級(jí)，將有效緩解這方面問題檩咱；
·切換頁(yè)面后暫停動(dòng)畫揭措，節(jié)省資源；
·設(shè)計(jì)師注意好這些注意事項(xiàng)?Lottie避坑指南刻蚯、常見錯(cuò)誤绊含、免異常總結(jié)炊汹，也能讓動(dòng)畫更流暢躬充；
如果覺得本文有用，可以在下方點(diǎn)個(gè)贊讨便。如果發(fā)現(xiàn)有遺漏或不對(duì)的地方充甚，請(qǐng)?jiān)谙路搅粞詞
資料：
從Json到Animation、lottie-ios學(xué)習(xí)筆記霸褒、使用Lottie播放動(dòng)畫伴找、安卓集成
