我們在平時開發(fā)中，要實現(xiàn)一個動畫，大多數(shù)情況直接用Gif圖，但Gif占用空間較大，而且需要為各種屏幕尺寸、分辨率做適配；另一種是用幀動畫，但是幀動畫占用空間比 Gif 還要大的多，也需要做適配。
當(dāng)項目中有很多地方用到動畫效果的時候會添很多Gif，這樣打出來的包會很大。這時候我們會要求設(shè)計師壓縮尺寸后再給我們，這樣包是變小了，但是用戶體驗會很差，動效很不清晰。
這種情況下，就輪到?Lottie、 (LottieFiles) 登場了，阿里新出的?犸良https://design.alipay.com/emotion就是基于Lottie動畫的。設(shè)計師做好動效后只需導(dǎo)出很小的Json文件，把Json文件拖入工程，在iOS (安卓、Web) 代碼中讀取這份Json文件，解析動畫結(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動畫
? ? ? ? lottieView.loopMode = .loop//動畫效果 執(zhí)行單次、多次
? ? ? ? lottieView.contentMode = .scaleAspectFit
? ? ? ? lottieView.backgroundBehavior = .pauseAndRestore//設(shè)置進入后臺是否暫停動畫
? ? ? ? self.view.addSubview(lottieView)
? ? ? ? lottieView.play()//開始動畫
? ? ? ? //lottieView.stop()//暫停動畫
}}
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動畫
? ? lottieView.frame = CGRectMake(0, 0, 400, 400);
? ? lottieView.center = self.view.center;
? ? lottieView.loopAnimation = YES;//動畫效果 執(zhí)行單次、多次
? ? lottieView.contentMode = UIViewContentModeScaleAspectFit;
? ? //handleWillEnterBackground 進入后臺默認(rèn)暫停動畫
? ? [self.view addSubview:lottieView];
? ? [lottieView playWithCompletion:^(BOOL animationFinished) {
? ? ? //動畫完成后可執(zhí)行自定義操作
? ? }];
? ? [lottieView play];//開始動畫
? ? //[lottieView stop];//暫停動畫
}
@end
二、總結(jié)
1、優(yōu)點：
·開發(fā)成本低，設(shè)計師導(dǎo)出Json文件給到開發(fā)即可。
·動畫實現(xiàn)成功率高，只要設(shè)計師能設(shè)計出來的都能實現(xiàn)。
·支持服務(wù)端URL方式創(chuàng)建，通過服務(wù)端配置Json文件隨時替換動畫，不用重新發(fā)版。
·iOS、安卓、Web可用同一套Json文件。
·支持轉(zhuǎn)場動畫，Presen／Dismiss時可做轉(zhuǎn)場效果。
2、缺點：
?·低配設(shè)備上解析大Json文件可能比較耗時、異常，適用硬件性能較好的設(shè)備。
解決：
·手機性能不斷升級，將有效緩解這方面問題；
·切換頁面后暫停動畫，節(jié)省資源；
·設(shè)計師注意好這些注意事項?Lottie避坑指南、常見錯誤、免異常總結(jié)，也能讓動畫更流暢；
如果覺得本文有用，可以在下方點個贊。如果發(fā)現(xiàn)有遺漏或不對的地方，請在下方留言~
