1. 程式人生 > >AE製作json檔案格式動畫以及lottie開源庫的使用

AE製作json檔案格式動畫以及lottie開源庫的使用

手機應用上有很多地方需要用到動畫的地方,比如啟動頁面歡迎介面等,有些動畫比如簡單的伸縮旋轉等我們可以用屬性動畫來製作,但是涉及到一些複雜的不規則的動畫我們要實現起來就很麻煩,但是利用lottie載入json格式檔案就簡單的很多了。json格式檔案的動畫是利用AE工具製作然後通過外掛bodymovin轉換成json格式。

先附上資源,親測可用。

AE工具:http://pan.baidu.com/s/1hsJrKCs,裡面有AE cc 2015,據說只有cc2015才可以用bodymovin外掛。還有一個Adobe_pojie.exe檔案,它是破解工具,找到相應版本,然後將安裝檔案裡面的dll檔案替換即可。還有一個資料夾是ExManCmd_win,它是安裝外掛bodymovin所需要的(已經將bodymovin檔案放在裡面,不需要從github上下載

https://github.com/bodymovin/bodymovin)。

1.   安裝AE

  2.   安裝bodymovin外掛

  • 管理員許可權執行cmd
  • cd到ExManCmd_win資料夾位置


  • 輸入“ExManCmd.exe /install bodymovin.zxp”回車就完成了



    可以開啟AE看到如圖所示有bodymovin表示安裝外掛成功:


    3.   製作動畫並轉換成json格式檔案

具體AE製作動畫就不介紹了,我製作了一個簡單的動畫: 製作完成了之後點選 視窗--->擴充套件-->bodymovin 出現彈窗: 可以點選右側更改匯出檔案路徑,點選RENDER生成json格式檔案。 4.    通過lottie開源庫載入動畫 將生成的json格式檔案放入assets目錄中,
通過xml :
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_fileName="data.json"
    app:lottie_autoPlay="true"
    app:lottie_loop="true"
    />
</LinearLayout>
通過程式碼:
LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation("data.json");
animationView.loop(true);
生成的動畫效果: