Lottie介紹
Lottie可以把Adobe After Effects制作的動畫導出為JSON，然后能在Android 伴澄、IOS、WEB上播放。
官網(wǎng)：http://airbnb.io/lottie/
使用示例
我們嘗試把它應用在啟動圖上侈玄，告別一成不變的圖片。例如下面這個效果：
我們可以看到吟温，畫面生動起來了序仙。動畫一共5秒，做了3個效果：
一鲁豪、文字淡化出現(xiàn)（從1秒后開始淡化顯示）
二潘悼、落葉（從上往下掉落律秃，加入傾斜仿風吹的效果）
三、云朵移動（天空上的白云從左邊移動到右邊）
下載AE
下載地址：https://bfile.3987.com/bigfile/aftereffectscc2017_lsb_3987.rar
這個是綠色版的治唤，直接解壓就能運行啦棒动。
下載插件
先下載bodymovin.zxp插件
下載地址：https://raw.githubusercontent.com/bigxixi/bodymovin/master/zxp_cn/bodymovin462cn.zxp
然后把它解壓到電腦的這個目錄下：
MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin
WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\bodymovin
配置注冊表
MAC:
打開文件 ~/Library/Preferences/com.adobe.CSXS.6.plist （ com.adobe.CSXS.？宾添？船惨？.plist 其中問號根據(jù) AE 版本不同會有不同） 新加一行，鍵(key)為 PlayerDebugMode, 類型為字符串(String), 值為 1 缕陕。
WINDOWS:
按win+R 打開運行粱锐，然后輸入：regedit ，就打開了注冊表扛邑。
找到注冊表鍵值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一個鍵值名為 PlayerDebugMode, 類型為字符串(String), 值為 1 怜浅。
到這里，所需要的工具就已經(jīng)搞完了鹿榜，下面開始制作動畫海雪。
動畫制作
一、把文件導入AE
把背景圖舱殿、落葉奥裸、云朵、文字四個素材導入AE沪袭，并且設(shè)置工程的長度為5秒湾宙。
二、文字淡化出現(xiàn)
把文字的素材拉到背景圖上面冈绊，然后點擊變換侠鳄，選擇不透明度，移動時間軸到1s的時候死宣，設(shè)置不透明度為0伟恶，然后拖動時間軸到3s，設(shè)置不透明度為100
三毅该、落葉
把落葉的素材拖到文字層上面博秫，點擊變換，在0s的時候點擊位置設(shè)立關(guān)鍵幀眶掌，然后把落葉的位置調(diào)到頂端挡育，之后把時間軸拖到5s，再設(shè)置關(guān)鍵幀并把落葉的位置調(diào)到底端朴爬。最后即寒，加上水平偏移，模仿風吹的效果。在3s和5s的時候設(shè)立關(guān)鍵幀母赵，然后調(diào)整位置x的坐標逸爵。
四、白云
把白云的素材放在背景層上面凹嘲，然后復制一層背景放在白云上面痊银，因為白云移動不能在樹的前面顯示，所以要用鋼筆工具施绎，把樹的部分進行遮罩。然后選擇白云的素材贞绳，點擊變換谷醉，在1s的時候設(shè)立關(guān)鍵幀，并設(shè)置位置在最左邊冈闭，最后移動到5s設(shè)置關(guān)鍵幀并設(shè)置位置在最右邊俱尼。
五、輸出動畫文件
制作完成后萎攒，點擊窗口遇八，擴展，bodymovin耍休，然后點擊設(shè)置按鈕刃永，選擇下面的演示模式（輸出后會有一個demo.html文件，可以直接打開預覽效果）羊精，設(shè)置后斯够，點擊渲染。成功的話喧锦，會生成一個image文件夾和data.json文件读规，把這兩個文件放到android或者ios，或者web都可以直接使用了燃少。
Android端使用
在app中添加以下依賴
dependencies {
compile 'com.airbnb.android:lottie:2.1.2'
}
1束亏、把image文件夾和data.json文件放在assets文件夾里面，然后在布局聲明阵具，最后在代碼調(diào)用
lottieAnimationView = (LottieAnimationView) findViewById(R.id.animation_view);
lottieAnimationView.setImageAssetsFolder("images");
lottieAnimationView.setAnimation("data.json");
lottieAnimationView.playAnimation();
2碍遍、如果是想下載的方式，然后放在內(nèi)存卡的話（一般都是這樣用怔昨，因為可以隨時更改動畫）雀久，把下載的文件解壓到內(nèi)存卡，然后把路徑傳進去
File jsonFile = new File(getIntent().getStringExtra(JSON_PATH));
File imagesDir = new File(getIntent().getStringExtra(IMAGES_PATH));
FileInputStream fis = null;
if (jsonFile.exists()) {
try {
fis = new FileInputStream(jsonFile);
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
if (fis == null || !imagesDir.exists()) {
Toast.makeText(FangShengAnimActivity.this, "動畫資源不存在", Toast.LENGTH_SHORT).show();
finish();
return;
}
final String absolutePath = imagesDir.getAbsolutePath();
lottieAnimationView.setImageAssetDelegate(new ImageAssetDelegate() {
@Override
public Bitmap fetchBitmap(LottieImageAsset asset) {
BitmapFactory.Options opts = new BitmapFactory.Options();
opts.inScaled = true;
opts.inDensity = 160;
return BitmapFactory.decodeFile(absolutePath + File.separator + asset.getFileName(), opts);
}
});
LottieComposition.Factory.fromInputStream(this, fis, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(@Nullable LottieComposition composition) {
lottieAnimationView.setComposition(composition);
lottieAnimationView.playAnimation();
}
});
IOS端和web端使用
這里不介紹啦趁舀，可以去官網(wǎng)看看詳細用法：
IOS：https://github.com/airbnb/lottie-ios
web：https://github.com/airbnb/lottie-react-native
總結(jié)
有人問赖捌，那個啟動圖的，用gif也能實現(xiàn)類似的效果啊≡奖樱可以是可以罩锐，但gif的體積一般比較大、而且大尺寸的gif可能導致崩潰卤唉，而且畫質(zhì)肯定是不如lottie好的涩惑。lottie的畫質(zhì)和圖片的畫質(zhì)是一樣的，而且體積就是圖片的體積桑驱，加上一個json文件（幾十kb）就能實現(xiàn)動畫效果了竭恬。lottie給我們提供了一個工具，只要我們花點創(chuàng)意熬的，就能做出生動的動畫效果了痊硕。lottie的使用，不僅僅是應用在啟動圖那么局限押框，可以出現(xiàn)在：抽獎畫面岔绸、加載畫面、搖簽畫面橡伞、靈符開光等等都是可以的盒揉。發(fā)動你的思維，讓app更多地方用上lottie兑徘，打造一個活潑生動的app吧刚盈。
