Lottie 使用

原文：https://mp.weixin.qq.com/s?__biz=MzIxNjc0ODExMA==&mid=2247485033&idx=1&sn=54dd477b4c4cd30d12fde48eba929546&chksm=97851f48a0f2965e342a2cdf55cbefceaa20a24b887e2b79ff940ca57a17b6cb9ae999643ace#rd

設計師使用 After Effects 設計出完美的動畫，而後經過 Bodymovin 插件進行簡單的轉換和導出成 JSON，最後工程師將 JSON 放入 App 項目中，就能夠將動畫 100% 還原到產品中。

缺陷：

系統版本限制，Android（Api 14+） 和 iOS(>=8.0) 都有不一樣的版本限制。

有一些交互動畫，不被支持，哪怕導出了也沒法被正常執行。

Bodymovin 插件還有待完善，有些 After Effects 實現的效果，沒法被正常導出。

開始使用：

compile 'com.airbnb.android:lottie:2.0.0-beta4'

 

最簡單的使用方式是直接使用 LottieAnimationView ，LottieAnimationView 直接繼承自 AppCompatImageView 。

只須要提早將動畫的 JSON 文件，放在 app/src/main/assets 目錄下，在 Layout 佈局文件中，能夠直接使用。

<com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="hello-world.json" app:lottie_loop="true" app:lottie_autoPlay="true" />

 

或者你也能夠使用邏輯代碼去控制 Lottie 動畫的播放

LottieAnimationView animationView = (LottieAnimationView) findViewById(R.id.animation_view); animationView.setAnimation("hello-world.json"); animationView.loop(true); animationView.playAnimation();

它支持幾個屬性：

lottie_fileName : 播放動畫的 json 文件。

lottie_loop：是否循環播放，默認爲 false。

lottie_autoPlay：是否加載完成以後，自動播放，默認爲 false。

獲取網絡上的動畫：

try { JSONObject json = new JSONObject(Const.json); LottieComposition.Factory.fromJson(getResources(), json, new OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { lottie1.setProgress(0); lottie1.loop(true); lottie1.setComposition(composition); lottie1.playAnimation(); } }); } catch (JSONException e) { e.printStackTrace(); }