Android中的Lottie動(dòng)畫入門

lottie簡(jiǎn)介

Lottie抖拴,Airbnb開源的動(dòng)畫框架,是基于CALayer的動(dòng)畫绵跷, 所有的路徑預(yù)先在AE中計(jì)算好硝桩, 轉(zhuǎn)換為Json文件盒齿, 然后自動(dòng)轉(zhuǎn)換為L(zhǎng)ayer的動(dòng)畫念逞。
Lottie有各種不同的版本, 安卓边翁, iOS翎承, 前端都可以使用, 理論上動(dòng)畫做一套就可以共用符匾, 大大的減少了工作量.以后如果要是實(shí)現(xiàn)復(fù)雜的動(dòng)畫叨咖,可以直接讓設(shè)計(jì)出相關(guān)的動(dòng)畫json文件,大大減輕了代碼的工作量“〗海現(xiàn)在有了 Lottie甸各,只要設(shè)計(jì)師用 AE 設(shè)計(jì)動(dòng)畫,利用 bodymovin 導(dǎo)出 焰坪,導(dǎo)入到 assets, 再寫下面那么點(diǎn)代碼就可以實(shí)現(xiàn)了


入門使用方法:

1.選擇項(xiàng)目build.gradle文件趣倾,并在依賴項(xiàng)塊中添加以下一行:

    //Lottie動(dòng)畫
    implementation "com.airbnb.android:lottie:3.6.0"

2. 純布局實(shí)現(xiàn)動(dòng)畫效果 將LottieAnimationView添加到您的布局

(1) 使用網(wǎng)絡(luò)json文件去加載動(dòng)畫 通過' lottie_url '屬性來使用 需要解析json

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/animationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:lottie_url="REPLACE_JSON_URL"
     app:lottie_autoPlay="true"
     app:lottie_loop="true"/>

上面方法是通過外網(wǎng)的鏈接地址來加載動(dòng)畫的,其實(shí)可以通過本地json文件加載
在項(xiàng)目的res下創(chuàng)建raw文件夾,把json文件放入raw下 使用lottie_rawRes指向json文件地址

(2)使用本地json文件去加載動(dòng)畫 通過' lottie_rawRes '屬性來使用 (raw目錄下的文件)

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/animationView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/animation"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"/>

只是上面的布局其實(shí)就可以簡(jiǎn)單實(shí)現(xiàn)一個(gè)動(dòng)畫啦!

3. 通過代碼實(shí)現(xiàn)動(dòng)畫效果

代碼使用方法一:

將LottieAnimationView添加到您的布局 通過代碼實(shí)現(xiàn)動(dòng)畫效果 如以下代碼 布局 通過' lottie_fileName ' (assets目錄下的文件)

 <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="hello-world.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />

java代碼設(shè)置:

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("Lottie.json");
animationView.loop(true);
animationView.playAnimation();

setAnimation有三個(gè)方法

image.png

其中String是fileName,是在assets目錄下的文件琳彩,CacheStrategy表示緩存策略誊酌,



代表使用何種策略進(jìn)行存儲(chǔ),默認(rèn)為None即不存儲(chǔ)露乏,而使用時(shí)會(huì)優(yōu)先從內(nèi)存緩存中命中讀取碧浊,從而減小IO開銷。
JSONObject直接傳入一段json數(shù)據(jù)瘟仿,可以通過網(wǎng)絡(luò)獲取一段json進(jìn)行解析處理箱锐。

代碼使用方法二: 使用LottieComposition
image.png

在LottieComposition中提供了三種from方法,可以接受assets文件名劳较、json對(duì)象驹止、流對(duì)象三種參數(shù)浩聋,Sync表示同步,但是卻是包可見方法臊恋,并不能被外部調(diào)用衣洁。

LottieComposition.fromJson(getResources(), jsonObject, new LottieComposition.OnCompositionLoadedListener() {
    @Override
    public void onCompositionLoaded(LottieComposition composition) {
        animationView.setComposition(composition);
        animationView.playAnimation();
    }
});

外部調(diào)用時(shí)只提供異步方法,使用AsyncTask進(jìn)行異步調(diào)用抖仅,將JsonObject的解析處理過程放在異步線程處理坊夫,并將解析生成的LottieComposition對(duì)象回調(diào)主線程,因?yàn)檫@個(gè)json對(duì)象可能有上百k之大撤卢,所以整個(gè)處理過程的復(fù)雜度和耗時(shí)還是很高的环凿,所以不要在ui線程中解析處理。

一點(diǎn)想法

我們可以通過請(qǐng)求的方式獲取json對(duì)象放吩,并將解析的過程放在網(wǎng)絡(luò)請(qǐng)求的異步線程中處理智听,使用反射調(diào)用同步方法,將調(diào)用放在異步線程中執(zhí)行渡紫,這樣就可以將整個(gè)過程請(qǐng)求和解析的過程封裝在一起到推。

注意點(diǎn):

LottieAnimationView內(nèi)部有個(gè)LottieDrawable對(duì)象,setComposition方法實(shí)質(zhì)上是將LottieComposition應(yīng)用到LottieDrawable上腻惠,官方readme上有這樣一段說明

但應(yīng)該是后面改過环肘,LottieDrawable是包可見的欲虚,外部無法調(diào)用到集灌,并且在LottieDrawable類注釋上有這樣一段描述。

image

推薦使用LottieAnimationView而不是直接使用LottieDrawable复哆,因?yàn)長(zhǎng)ottieDrawable的回收LottieAnimationView幫你做了欣喧,而自己操作LottieDrawable需要考慮的回收調(diào)用。

所以僅推薦以上兩種用法梯找,不推薦直接使用Drawable的方式除非一定需要

Thanks

轉(zhuǎn)載請(qǐng)備注原文章鏈接謝謝!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末唆阿,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子锈锤,更是在濱河造成了極大的恐慌驯鳖,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,695評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件久免,死亡現(xiàn)場(chǎng)離奇詭異浅辙,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)阎姥,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,569評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門记舆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人呼巴,你說我怎么就攤上這事泽腮∮眩” “怎么了?”我有些...
    開封第一講書人閱讀 168,130評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵诊赊,是天一觀的道長(zhǎng)厚满。 經(jīng)常有香客問我,道長(zhǎng)碧磅,這世上最難降的妖魔是什么痰滋? 我笑而不...
    開封第一講書人閱讀 59,648評(píng)論 1 297
  • 正文 為了忘掉前任,我火速辦了婚禮续崖,結(jié)果婚禮上敲街,老公的妹妹穿的比我還像新娘。我一直安慰自己严望,他們只是感情好多艇,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,655評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著像吻,像睡著了一般峻黍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上拨匆,一...
    開封第一講書人閱讀 52,268評(píng)論 1 309
  • 那天姆涩,我揣著相機(jī)與錄音,去河邊找鬼惭每。 笑死骨饿,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的台腥。 我是一名探鬼主播宏赘,決...
    沈念sama閱讀 40,835評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼黎侈!你這毒婦竟也來了察署?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,740評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤峻汉,失蹤者是張志新(化名)和其女友劉穎贴汪,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體休吠,經(jīng)...
    沈念sama閱讀 46,286評(píng)論 1 318
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡扳埂,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,375評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了蛛碌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片聂喇。...
    茶點(diǎn)故事閱讀 40,505評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出希太,到底是詐尸還是另有隱情克饶,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布誊辉,位于F島的核電站矾湃,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏堕澄。R本人自食惡果不足惜邀跃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,873評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望蛙紫。 院中可真熱鬧拍屑,春花似錦、人聲如沸坑傅。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,357評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽唁毒。三九已至蒜茴,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間浆西,已是汗流浹背粉私。 一陣腳步聲響...
    開封第一講書人閱讀 33,466評(píng)論 1 272
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留近零,地道東北人诺核。 一個(gè)月前我還...
    沈念sama閱讀 48,921評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像秒赤,于是被迫代替她去往敵國(guó)和親猪瞬。 傳聞我的和親對(duì)象是個(gè)殘疾皇子憎瘸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,515評(píng)論 2 359

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