Lottie介紹
Lottie可以把Adobe After Effects制作的動畫導出為JSON，然后能在Android 、IOS、WEB上播放。
官網：http://airbnb.io/lottie/
使用示例
我們嘗試把它應用在啟動圖上，告別一成不變的圖片。例如下面這個效果：
我們可以看到，畫面生動起來了。動畫一共5秒，做了3個效果：
一、文字淡化出現（從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 其中問號根據 AE 版本不同會有不同） 新加一行，鍵(key)為 PlayerDebugMode, 類型為字符串(String), 值為 1 。
WINDOWS:
按win+R 打開運行，然后輸入：regedit ，就打開了注冊表。
找到注冊表鍵值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一個鍵值名為 PlayerDebugMode, 類型為字符串(String), 值為 1 。
到這里，所需要的工具就已經搞完了，下面開始制作動畫。
動畫制作
一、把文件導入AE
把背景圖、落葉、云朵、文字四個素材導入AE，并且設置工程的長度為5秒。
二、文字淡化出現
把文字的素材拉到背景圖上面，然后點擊變換，選擇不透明度，移動時間軸到1s的時候，設置不透明度為0，然后拖動時間軸到3s，設置不透明度為100
三、落葉
把落葉的素材拖到文字層上面，點擊變換，在0s的時候點擊位置設立關鍵幀，然后把落葉的位置調到頂端，之后把時間軸拖到5s，再設置關鍵幀并把落葉的位置調到底端。最后，加上水平偏移，模仿風吹的效果。在3s和5s的時候設立關鍵幀，然后調整位置x的坐標。
四、白云
把白云的素材放在背景層上面，然后復制一層背景放在白云上面，因為白云移動不能在樹的前面顯示，所以要用鋼筆工具，把樹的部分進行遮罩。然后選擇白云的素材，點擊變換，在1s的時候設立關鍵幀，并設置位置在最左邊，最后移動到5s設置關鍵幀并設置位置在最右邊。
五、輸出動畫文件
制作完成后，點擊窗口，擴展，bodymovin，然后點擊設置按鈕，選擇下面的演示模式（輸出后會有一個demo.html文件，可以直接打開預覽效果），設置后，點擊渲染。成功的話，會生成一個image文件夾和data.json文件，把這兩個文件放到android或者ios，或者web都可以直接使用了。
Android端使用
在app中添加以下依賴
dependencies {
compile 'com.airbnb.android:lottie:2.1.2'
}
1、把image文件夾和data.json文件放在assets文件夾里面，然后在布局聲明，最后在代碼調用
lottieAnimationView = (LottieAnimationView) findViewById(R.id.animation_view);
lottieAnimationView.setImageAssetsFolder("images");
lottieAnimationView.setAnimation("data.json");
lottieAnimationView.playAnimation();
2、如果是想下載的方式，然后放在內存卡的話（一般都是這樣用，因為可以隨時更改動畫），把下載的文件解壓到內存卡，然后把路徑傳進去
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端使用
這里不介紹啦，可以去官網看看詳細用法：
IOS：https://github.com/airbnb/lottie-ios
web：https://github.com/airbnb/lottie-react-native
總結
有人問，那個啟動圖的，用gif也能實現類似的效果啊。可以是可以，但gif的體積一般比較大、而且大尺寸的gif可能導致崩潰，而且畫質肯定是不如lottie好的。lottie的畫質和圖片的畫質是一樣的，而且體積就是圖片的體積，加上一個json文件（幾十kb）就能實現動畫效果了。lottie給我們提供了一個工具，只要我們花點創意，就能做出生動的動畫效果了。lottie的使用，不僅僅是應用在啟動圖那么局限，可以出現在：抽獎畫面、加載畫面、搖簽畫面、靈符開光等等都是可以的。發動你的思維，讓app更多地方用上lottie，打造一個活潑生動的app吧。
