簡介
Lottie是Android和iOS的移動圖書館敬鬓，用于解析Adobe After Effects動畫淹朋，并以Bodymovin作為json導(dǎo)出灶似，并在手機(jī)和網(wǎng)絡(luò)上本機(jī)呈現(xiàn)。
該項(xiàng)目在GitHub已經(jīng)獲得三個(gè)端累計(jì)3萬+的star瑞你。
在Lottie社區(qū)提供了更多的動畫下載酪惭。
如果你是一個(gè)設(shè)計(jì)師還可以將自己制作的作品發(fā)布到該社區(qū)。
兼容平臺
Xamarin者甲，
NativeScript春感，
優(yōu)勢
- 使用方便虏缸、簡單
- 無需擔(dān)心屏幕尺寸適配問題
- 減少項(xiàng)目開發(fā)時(shí)間鲫懒，增加交互的趣味性
- 針對平臺包括了緩存和預(yù)加載功能，增加動畫的流暢性
- 可以通過網(wǎng)絡(luò)Json地址加載
制作動畫
由于Lottie是使用AE制作刽辙，并且使用Bodymovin插件導(dǎo)出窥岩。
所以設(shè)計(jì)師要掌握一些AE的動畫的制作基礎(chǔ)，并且需要給AE安裝插件宰缤。
下面教程 部分來自Lottie設(shè)計(jì)制作官方文檔
設(shè)計(jì)師需要的工具：
PhotoShop或Sketch颂翼，Adobe Illustrator，Adobe After Effects和Bodymovin
1慨灭、導(dǎo)出為.SVG的文件
需要使用ps朦乏，或者Sketch將作品以組的形式導(dǎo)出為SVG
2、導(dǎo)出為.AI的文件
使用Adobe Illustrator導(dǎo)入SVG文件氧骤，另存為.AI文件
3呻疹、將.AI導(dǎo)入到Adobe After Effects
使用前需要安裝Bodymovin插件，該插件主要用于后面導(dǎo)出Json格式
1.下載 bodymovin壓縮文件
2.下載 AE插件安裝器 ZXP Installer
3.將bodymovin.zip文件解壓筹陵，找到文件build/extension/bodymovin.zxp
將該文件使用安裝器ZXP installer打開刽锤。
4.打開After Effects，然后修改 AE 的設(shè)置：Go to Edit > Preferences > General > and check on "Allow Scripts to Write Files and Access Network"朦佩，開啟腳本并思。
導(dǎo)出Json需要四個(gè)步驟：
.1
將導(dǎo)入的文件拖到項(xiàng)目面板底部的小組合圖標(biāo)。
.2
進(jìn)入菜單吕粗，然后選擇組合>合成設(shè)置（ Composition > Composition settings）纺荧。設(shè)置fps幀
.3
選擇組合中的圖層，然后在圖層菜單中選擇“從矢量圖層創(chuàng)建形狀”颅筋，然后根據(jù)您的插畫藝術(shù)品創(chuàng)建一個(gè)新的“形狀圖層”，該圖形藝術(shù)品具有圖形的可編輯向量屬性输枯，如路徑议泵，筆畫，填充等
.4
打開AE窗口 ：Window > Extensions > Bodymovin.導(dǎo)出就完成了
Android使用
1.在Android中引入只需要在app中的Build.gradle添加一行代碼
dependencies {
compile 'com.airbnb.android:lottie:2.2.0'
}
2.將Json文件拷貝到app>src>main>assets
3.在
//代碼中：
mLottieLove.setAnimation("lottie.json");
mLottieLove.loop(true);
mLottieLove.playAnimation();
或者
//布局中：
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/loading_animation"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center_horizontal"
app:lottie_fileName="permission.json"
app:lottie_loop="true"
app:lottie_autoPlay="true"/>
關(guān)于更多使用請參考：
設(shè)計(jì)師操作文檔
官方使用文檔
下載更多設(shè)計(jì)師的Json作品：
Lottie社區(qū)
Demo參考地址（多個(gè)動畫切換）：
https://github.com/wapchief/android-CollectionDemo
