Lottie動(dòng)畫(huà)教程

為了提升用戶體驗(yàn), 在界面中加入一個(gè)設(shè)計(jì)良好的界面動(dòng)畫(huà)成為app設(shè)計(jì)的潮流. 之前聽(tīng)有人說(shuō)過(guò)專業(yè)的界面動(dòng)畫(huà)是要有設(shè)計(jì)師塔拳、工程師劲赠、程序員涛目、平面動(dòng)畫(huà)師等組成, 想想這是一個(gè)多大的任務(wù)量啊. 而且里面的各種邏輯處理, 復(fù)雜一些的動(dòng)畫(huà), 一般人幾乎是望其項(xiàng)背;

但有了Lottie之后, 就大大降低了開(kāi)發(fā)者的難度. 我們可以直接把Lottie的動(dòng)畫(huà)文件導(dǎo)入, 設(shè)置一下參數(shù), 就可以使用這個(gè)動(dòng)畫(huà)了. 為了滿足大家的好奇心, 先附幾個(gè)簡(jiǎn)單的實(shí)例:

Lottie簡(jiǎn)單實(shí)例

一. 初識(shí)Lottie

通過(guò)AE上的Bodymovin插件將AE中制作好的動(dòng)畫(huà)導(dǎo)出成一個(gè)json文件,Lottie實(shí)現(xiàn)了iOS/macOS/Android/React Native三個(gè)平臺(tái)對(duì)該json文件的解析和渲染凛澎。

所有這些動(dòng)畫(huà)都是在After Effects中創(chuàng)建的霹肝,使用Bodymovin導(dǎo)出,并且無(wú)需額外的工程師工作即可完成原生渲染塑煎。

Bodymovin是一個(gè)又Hernan Torrisi創(chuàng)建的After Effects插件沫换,導(dǎo)出文件格式為json和包括一個(gè)javascript網(wǎng)絡(luò)播放器。而它最大的優(yōu)點(diǎn)是提供了一套完整的跨平臺(tái)動(dòng)畫(huà)實(shí)現(xiàn)工作流;

從代碼上看最铁,iOS端是基于layer讯赏,而最終都是對(duì)canvas的操作,中間除去解析json外冷尉,基本無(wú)耗費(fèi)性能的行為漱挎。

當(dāng)然也不可能都那么完美, 畢竟開(kāi)源不久, 它仍然存在以下問(wèn)題:

  1. Bodymovin插件待完善,仍然有部分AE效果無(wú)法成功導(dǎo)出雀哨;
  2. Lottie對(duì)json文件的支持待完善磕谅,目前有部分能成功導(dǎo)出成json文件的效果在移動(dòng)端上無(wú)法很好的展現(xiàn);
  3. 目前不支持文字雾棺,所有文字必須轉(zhuǎn)成矢量圖才能正常展現(xiàn)動(dòng)畫(huà)膊夹;
  4. 動(dòng)畫(huà)無(wú)法被編輯,即移動(dòng)端無(wú)法更改遠(yuǎn)端下載到本地的動(dòng)畫(huà)捌浩;
  5. 文檔更新不及時(shí)等;
    注:
    iOS需要iOS8及以上, 安卓需要API14及以上;

二. 如何用Bodymovin插件制作動(dòng)畫(huà)

iTerryWang在他的簡(jiǎn)書(shū)博客里詳細(xì)介紹了如何使用Bodymovin插件制作動(dòng)畫(huà), 我就不多說(shuō)了, 也同時(shí)感謝一下iTerryWang的分享;
Lottie簡(jiǎn)介 & iOS集成使用

三. 如何使用Lottie

1. 下載Lottie動(dòng)畫(huà)文件
除了用Bodymovin插件創(chuàng)建動(dòng)畫(huà)外, 我們還可以在Lottie Files下載;


Lottie Files是一個(gè)擁有高質(zhì)量Lottie文件格式動(dòng)畫(huà)的網(wǎng)站放刨。在這個(gè)網(wǎng)站,不僅設(shè)計(jì)師可以在上面陳列他們的動(dòng)畫(huà)而且還提供免費(fèi)下載. 這步結(jié)束后, 我們就準(zhǔn)備好了動(dòng)畫(huà)所需的JSON文件;

2. 新建工程
新建一個(gè)工程, 命名為L(zhǎng)ottieTest;

3. 導(dǎo)入Lottie動(dòng)畫(huà)庫(kù)
用CocoaPods安裝Lottie動(dòng)畫(huà)庫(kù):
在終端進(jìn)行如下操作:
①進(jìn)入文件目錄(文件目錄要用自己的工程目錄);

cd /Users/apple/Desktop/LottieTest

②創(chuàng)建podfile

pod init

③打開(kāi)文件編輯

target 'LottieTest' do
  pod 'lottie-ios'
end

④導(dǎo)入Lottie項(xiàng)目

pod install

4. 添加Lottie動(dòng)畫(huà)的JSON文件
之前已經(jīng)準(zhǔn)備好這個(gè)文件了, 導(dǎo)入工程就行;

5. 創(chuàng)建動(dòng)畫(huà)
OC版:

#import "ViewController.h"
#import <Lottie/Lottie.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    LOTAnimationView *lottieTest = [LOTAnimationView animationNamed:@"servishero_loading"];
    lottieTest.contentMode = LOTViewContentModeScaleAspectFill;
    lottieTest.frame = self.view.bounds;
    lottieTest.autoresizingMask = NSViewWidthSizable | NSViewHeightSizable;
    [self.view addSubview:lottieTest];
    [lottieTest play];
}

@end

swift版:

import UIKit
import Lottie

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        if let animationView = LOTAnimationView(name: "servishero_loading") {
//        if let animationView = LOTAnimationView(contentsOf: URL(string: "https://github.com/airbnb/lottie-ios/raw/master/Example/Assets/LottieLogo1.json")!) {
            animationView.frame = self.view.bounds
            animationView.center = self.view.center

            animationView.loopAnimation = true
            animationView.contentMode = .scaleAspectFill
            animationView.animationSpeed = 0.5

            // Applying UIView animation
            let minimizeTransform = CGAffineTransform(scaleX: 0.1, y: 0.1)
            animationView.transform = minimizeTransform
            UIView.animate(withDuration: 3.0, delay: 0.0, options: [.repeat, .autoreverse], animations: {
                animationView.transform = CGAffineTransform.identity
            }, completion: nil)

            view.addSubview(animationView)

            animationView.play()
        }

    }
}

至于android, reactNative參照下方github地址:
android
reactNative

擴(kuò)展:
Airbnb 動(dòng)畫(huà)庫(kù)Lottie

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末尸饺,一起剝皮案震驚了整個(gè)濱河市宏榕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌侵佃,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件奠支,死亡現(xiàn)場(chǎng)離奇詭異馋辈,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)倍谜,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)迈螟,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)叉抡,“玉大人,你說(shuō)我怎么就攤上這事答毫∪烀瘢” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵洗搂,是天一觀的道長(zhǎng)消返。 經(jīng)常有香客問(wèn)我,道長(zhǎng)耘拇,這世上最難降的妖魔是什么撵颊? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮惫叛,結(jié)果婚禮上倡勇,老公的妹妹穿的比我還像新娘。我一直安慰自己嘉涌,他們只是感情好妻熊,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著仑最,像睡著了一般扔役。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上词身,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天厅目,我揣著相機(jī)與錄音,去河邊找鬼法严。 笑死损敷,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的深啤。 我是一名探鬼主播拗馒,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼溯街!你這毒婦竟也來(lái)了诱桂?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤呈昔,失蹤者是張志新(化名)和其女友劉穎挥等,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體堤尾,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肝劲,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片辞槐。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡掷漱,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出榄檬,到底是詐尸還是另有隱情卜范,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布鹿榜,位于F島的核電站海雪,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏犬缨。R本人自食惡果不足惜喳魏,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望怀薛。 院中可真熱鬧刺彩,春花似錦、人聲如沸枝恋。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)焚碌。三九已至畦攘,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間十电,已是汗流浹背知押。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留鹃骂,地道東北人台盯。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像畏线,于是被迫代替她去往敵國(guó)和親静盅。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

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