Lottie介紹

Lottie可以把Adobe After Effects制作的動(dòng)畫(huà)導(dǎo)出為JSON，然后能在Android 、IOS、WEB上播放。
官網(wǎng)：http://airbnb.io/lottie/

使用示例

我們嘗試把它應(yīng)用在啟動(dòng)圖上，告別一成不變的圖片。例如下面這個(gè)效果：

這個(gè)是未處理的效果

這個(gè)是用lottie的效果

我們可以看到，畫(huà)面生動(dòng)起來(lái)了。動(dòng)畫(huà)一共5秒，做了3個(gè)效果：
一、文字淡化出現(xiàn)（從1秒后開(kāi)始淡化顯示）
二、落葉（從上往下掉落，加入傾斜仿風(fēng)吹的效果）
三、云朵移動(dòng)（天空上的白云從左邊移動(dòng)到右邊）

下載AE

下載地址：https://bfile.3987.com/bigfile/aftereffectscc2017_lsb_3987.rar
這個(gè)是綠色版的，直接解壓就能運(yùn)行啦。

下載插件

先下載bodymovin.zxp插件
下載地址：https://raw.githubusercontent.com/bigxixi/bodymovin/master/zxp_cn/bodymovin462cn.zxp
然后把它解壓到電腦的這個(gè)目錄下：
MAC:
/Library/Application\ Support/Adobe/CEP/extensions/bodymovin

WINDOWS:
C:\Program Files (x86)\Common Files\Adobe\CEP\extensions\bodymovin

bodymovin插件位置

配置注冊(cè)表

MAC:
打開(kāi)文件 ~/Library/Preferences/com.adobe.CSXS.6.plist （ com.adobe.CSXS.？？？.plist 其中問(wèn)號(hào)根據(jù) AE 版本不同會(huì)有不同） 新加一行，鍵(key)為 PlayerDebugMode, 類型為字符串(String), 值為 1 。

WINDOWS:
按win+R 打開(kāi)運(yùn)行，然后輸入：regedit ，就打開(kāi)了注冊(cè)表。
找到注冊(cè)表鍵值 HKEY_CURRENT_USER/Software/Adobe/CSXS.6 增加一個(gè)鍵值名為 PlayerDebugMode, 類型為字符串(String), 值為 1 。

注冊(cè)表配置

到這里，所需要的工具就已經(jīng)搞完了，下面開(kāi)始制作動(dòng)畫(huà)。

動(dòng)畫(huà)制作

一、把文件導(dǎo)入AE

把背景圖、落葉、云朵、文字四個(gè)素材導(dǎo)入AE，并且設(shè)置工程的長(zhǎng)度為5秒。

二、文字淡化出現(xiàn)

把文字的素材拉到背景圖上面，然后點(diǎn)擊變換，選擇不透明度，移動(dòng)時(shí)間軸到1s的時(shí)候，設(shè)置不透明度為0，然后拖動(dòng)時(shí)間軸到3s，設(shè)置不透明度為100

三、落葉

把落葉的素材拖到文字層上面，點(diǎn)擊變換，在0s的時(shí)候點(diǎn)擊位置設(shè)立關(guān)鍵幀，然后把落葉的位置調(diào)到頂端，之后把時(shí)間軸拖到5s，再設(shè)置關(guān)鍵幀并把落葉的位置調(diào)到底端。最后，加上水平偏移，模仿風(fēng)吹的效果。在3s和5s的時(shí)候設(shè)立關(guān)鍵幀，然后調(diào)整位置x的坐標(biāo)。

四、白云

把白云的素材放在背景層上面，然后復(fù)制一層背景放在白云上面，因?yàn)榘自埔苿?dòng)不能在樹(shù)的前面顯示，所以要用鋼筆工具，把樹(shù)的部分進(jìn)行遮罩。然后選擇白云的素材，點(diǎn)擊變換，在1s的時(shí)候設(shè)立關(guān)鍵幀，并設(shè)置位置在最左邊，最后移動(dòng)到5s設(shè)置關(guān)鍵幀并設(shè)置位置在最右邊。

五、輸出動(dòng)畫(huà)文件

制作完成后，點(diǎn)擊窗口，擴(kuò)展，bodymovin，然后點(diǎn)擊設(shè)置按鈕，選擇下面的演示模式（輸出后會(huì)有一個(gè)demo.html文件，可以直接打開(kāi)預(yù)覽效果），設(shè)置后，點(diǎn)擊渲染。成功的話，會(huì)生成一個(gè)image文件夾和data.json文件，把這兩個(gè)文件放到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)存卡的話（一般都是這樣用，因?yàn)榭梢噪S時(shí)更改動(dòng)畫(huà)），把下載的文件解壓到內(nèi)存卡，然后把路徑傳進(jìn)去

        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, "動(dòng)畫(huà)資源不存在", 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)看看詳細(xì)用法：
IOS：https://github.com/airbnb/lottie-ios
web：https://github.com/airbnb/lottie-react-native

總結(jié)

有人問(wèn)，那個(gè)啟動(dòng)圖的，用gif也能實(shí)現(xiàn)類似的效果啊?？梢允强梢?，但gif的體積一般比較大、而且大尺寸的gif可能導(dǎo)致崩潰，而且畫(huà)質(zhì)肯定是不如lottie好的。lottie的畫(huà)質(zhì)和圖片的畫(huà)質(zhì)是一樣的，而且體積就是圖片的體積，加上一個(gè)json文件（幾十kb）就能實(shí)現(xiàn)動(dòng)畫(huà)效果了。lottie給我們提供了一個(gè)工具，只要我們花點(diǎn)創(chuàng)意，就能做出生動(dòng)的動(dòng)畫(huà)效果了。lottie的使用，不僅僅是應(yīng)用在啟動(dòng)圖那么局限，可以出現(xiàn)在：抽獎(jiǎng)畫(huà)面、加載畫(huà)面、搖簽畫(huà)面、靈符開(kāi)光等等都是可以的。發(fā)動(dòng)你的思維，讓app更多地方用上lottie，打造一個(gè)活潑生動(dòng)的app吧。