Lottie動畫(動畫的未來)

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


資料:

從Json到Animationlottie-ios學(xué)習(xí)筆記使用Lottie播放動畫安卓集成

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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

  • Swift1> Swift和OC的區(qū)別1.1> Swift沒有地址/指針的概念1.2> 泛型1.3> 類型嚴(yán)謹(jǐn) 對...
    cosWriter閱讀 11,136評論 1 32
  • 好的APP用戶界面動畫如果通過精準(zhǔn)的設(shè)計就能極大地提升用戶體驗。這也常常是區(qū)分APP優(yōu)秀與否的一個重要標(biāo)準(zhǔn)。實現(xiàn)與...
    透支未來閱讀 29,146評論 6 48
  • 好的APP用戶界面動畫如果通過精準(zhǔn)的設(shè)計就能極大地提升用戶體驗。這也常常是區(qū)分APP優(yōu)秀與否的一個重要標(biāo)準(zhǔn)。實現(xiàn)與...
    coder_小玖閱讀 5,886評論 9 45
  • 突然想要寫一點東西,不喜歡現(xiàn)在路上無處不在的商業(yè)化,原本代表浪漫的鮮花和無邪的孩童,加在一起卻變成了功利的噪音,不...
    獨孤姬閱讀 198評論 0 0
  • 文/龍龍 想寫又寫不出什么東西來的傻小子 第三天了,他就這樣不說話三天了,誰能想到會這樣。 三天前,因為一件小事吵...
    故賜人間閱讀 80評論 0 0