我們在平時開發(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)有遺漏或不對的地方,請在下方留言~