Lottie是什么？
Lottie是Airbnb開源的一個(gè)支持 Android、iOS 以及 ReactNative，利用json文件的方式快速實(shí)現(xiàn)動(dòng)畫效果的庫(kù)。這么看可能很難理解，接下來(lái)我將詳細(xì)的講解如何使用。
Lottie項(xiàng)目地址：https://github.com/airbnb/lottie-android
首先先無(wú)恥的把我自己寫的demo程序和源碼放上來(lái)。
- Demo體驗(yàn)apk下載地址: https://fir.im/5j4e
- Demo程序的github地址 ： https://github.com/panacena/LottieTest/
Lottie如何使用？
一、Lottie能干什么？
在回答Lottie能干什么之前，我們先想下如下的動(dòng)畫如何實(shí)現(xiàn)？
我想大概有幾種方式:
使用幀動(dòng)畫。這種方式固然可行，但是一個(gè)需要?jiǎng)赢嬏砑雍芏鄰垐D片，勢(shì)必會(huì)導(dǎo)致apk體積變大，并且還要根據(jù)不同的尺寸進(jìn)行適配。
- 用 Gif。但是使用 Gif 占用空間較大，而且需要為各種屏幕尺寸、分辨率做適配，并且Android本是不支持gif直接展示的。
- 用代碼加圖片輔助。如之前寫的 仿照駕校一點(diǎn)通歡迎頁(yè)，這種方式繁瑣并且每更新一次都需要重新寫很多代碼。
- Android 5.x 之后提供了對(duì) SVG 的支持，通過(guò) VectorDrawable、AnimatedVectorDrawable 的結(jié)合可以實(shí)現(xiàn)一些稍微復(fù)雜的動(dòng)畫，但是問(wèn)題和前2個(gè)類似。
那么有沒有什么方式是即可以方便的實(shí)現(xiàn)動(dòng)畫效果，又可以不用考慮適配的問(wèn)題，而且Android、ios還可以兼容呢?
Lottie就是支持Android, iOS, 和React Native,并且只需簡(jiǎn)單的代碼就可以實(shí)現(xiàn)復(fù)雜動(dòng)畫效果的庫(kù)
二、Lottie在Android端怎么用？
假設(shè)我們要做一個(gè)緩沖數(shù)據(jù)時(shí)的一個(gè)loading動(dòng)畫，不用Lottie之前你們公司的美工一般都會(huì)給一個(gè)gif動(dòng)畫效果和一些切好的一幀一幀的圖片?，F(xiàn)在不需要這么操作了，只要你們公司的美工做如下的操作：
下面是公司帥帥的美工的工作
- 讓設(shè)計(jì)師使用Adobe 的 After Effects(簡(jiǎn)稱 AE)工具(美工一般都會(huì)這個(gè))制作這個(gè)動(dòng)畫。
AE的下載地址:鏈接： http://pan.baidu.com/s/1misKrzU 密碼：f2t7 (安裝破解什么的就自行百度吧) - 在AE中安裝一個(gè)叫做Bodymovin的插件。
下載 bodymovin，解壓縮后只需要\build\extension\bodymovin.zxp這個(gè)檔案就可以1478641334-9003-svgani1
3.手動(dòng)安裝plugin，以windows系統(tǒng)而言，要先下載 **ExMan Command Line tool **并解壓縮。
再來(lái)把下載的bodymovin壓縮后的 bodymovin-master\build\extension 目錄下的bodymovin.zxp 這個(gè)檔案復(fù)制進(jìn)去同一個(gè)資料夾。1478641336-7754-svgani3
4.去找cmd，并以系統(tǒng)管理員身分執(zhí)行。
5.打“cd C:/ExManCmd_win 所在的路徑 “，進(jìn)入ExManCmd的資料夾中
6.接著打 ExManCmd.exe /install bodymovin.zxp 就完成了
7.再來(lái)進(jìn)入AE 后，可以在windows/extentions/bodymovin 找到插件，開啟后按下Render 就完成了。 重點(diǎn)來(lái)了，這時(shí)會(huì)在你選的Destination Folder目錄中生成一個(gè)json格式的文件，這個(gè) json 文件描述了該動(dòng)畫的一些關(guān)鍵點(diǎn)的坐標(biāo)以及運(yùn)動(dòng)軌跡。請(qǐng)帥帥的美工把這個(gè)文件發(fā)給你苦逼的程序員兄弟吧！
下面就是苦逼Android程序員應(yīng)該如何做咯
1.在build.gradle中添加
dependencies {
compile 'com.airbnb.android:lottie:1.0.1'
}
2.layout文件中添加
<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" />
3.將帥帥的美工給你的json文件重命名為xml中l(wèi)ottie_fileName的值，如上就是hello-world.json。將hello-world.json放入 app/src/main/assets目錄中。打包吧??！
然后你就會(huì)發(fā)現(xiàn)奇跡出現(xiàn)了，沒有一張圖片，沒有一個(gè)gif，但是動(dòng)畫效果出來(lái)了！就是這么簡(jiǎn)單，就是這么暴力！
三、Lottie進(jìn)階，如何更加高效和方便的實(shí)用？
1.最簡(jiǎn)單的使用方式就是上方直接在xml中定義的方式。
2.使用代碼的方式，支持從assets目錄中直接讀取json文件、json字符串的方式、stream流的方式等
3.從網(wǎng)絡(luò)獲取json文件，直接顯示動(dòng)畫。這種方式很炫，你就可以不用不更新apk就不動(dòng)聲色的定期更新你的動(dòng)畫了。
下方是我寫的一個(gè)小demo，使用okhttp訪問(wèn)網(wǎng)絡(luò)上一段json文件，然后顯示動(dòng)畫。
client.newCall(request).enqueue(new Callback() {
@Override public void onFailure(Call call, IOException e) {
}
@Override public void onResponse(Call call, Response response) throws IOException {
if (!response.isSuccessful()) {
}
try {
JSONObject json = new JSONObject(response.body().string());
LottieComposition.fromJson(getResources(), json, new LottieComposition.OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
setComposition(composition);
}
});
} catch (JSONException e) {
}
}
});
四、Lottie例子程序
為了更好的讓你了解這個(gè)庫(kù)，我寫了一個(gè)簡(jiǎn)單的demo，請(qǐng)大家?guī)兔c(diǎn)star !
- Demo體驗(yàn)apk下載地址: http://fir.im/5j4e
- Demo程序的github地址 ： https://github.com/panacena/LottieTest/
感激
感謝以下文章:
這個(gè)項(xiàng)目碉堡了
After Effect 轉(zhuǎn)svg 動(dòng)畫– 神奇的bodymovin 插件
