AE製作json檔案格式動畫以及lottie開源庫的使用
阿新 • • 發佈:2019-01-30
手機應用上有很多地方需要用到動畫的地方,比如啟動頁面歡迎介面等,有些動畫比如簡單的伸縮旋轉等我們可以用屬性動畫來製作,但是涉及到一些複雜的不規則的動畫我們要實現起來就很麻煩,但是利用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表示安裝外掛成功:
具體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);
生成的動畫效果: