Lottie

Lottie 是 Airbnb 開源的一個動畫項目，它支持 iOS, mac OS Android RN，由于某些復雜動畫的實現(xiàn)，往往會寫很多的 code 來實現(xiàn)它，而且調試動畫的效果會比較花費時間。用它來解決某些動畫會帶來很大的便利。

設計師在After Effects 設計好相關的動畫，然后安裝上BodyMovin 這個插件，這個插件，可以幫導出動畫效果的 JSON 文件，然后我們可以通過 Lottie 來加載相關的 JSON 文件來實現(xiàn)動畫效果。

優(yōu)勢

1. 開發(fā)可以方便的實現(xiàn)動畫，節(jié)約調試動畫效果時間等，不用寫一大堆 code 去實現(xiàn)動畫，只要設計給相關的 JSON 文件就可以了。
2. 多個平臺可以共用，例如 iOS 和 Android，公用一個動畫。
3. 可以通過 URL 的方式加載 JSON 文件，來替換客戶端動畫，不用發(fā)版本了
4. 設計想了一個屌炸天的動畫，然后給到開發(fā)，開發(fā)說這個實現(xiàn)不了，或者說很費時間，然后讓設計用這種方式去實現(xiàn)。
5. 對于 iOS 來說支持 ViewController 轉場動畫
6. iOS 平臺上用 Core Animation 做矢量動畫。性能不錯，而且有緩存
7. 對比于用 GIF 動畫，手寫動畫，輕量，性能和存儲上都更佳。

不足之處

1. iOS 版本要 >= 8.0 才可以使用。不支持 7.x
2. 對于一些交互性的動畫，支持不是很好。主要是對于播放性的動畫
3. Bodymovin 插件待完善，仍然有部分 AE 效果無法成功導出
4. 動畫無法被編輯，加載下來是什么樣子，就原封不動

github代碼傳送門 https://github.com/18380438200/LottieAnim

先上效果圖，這個是做的一個仿抖音的點贊動畫：

眾所周知，屬性動畫、補間動畫通常只能做一些效果簡單的，而做復雜的動畫可采用gif圖，幀動畫，但是這樣資源空間增大導致apk增大不小。而加載json文件實現(xiàn)動畫就完美解決以上問題。

設計師AE導出Json文件，Lotti 解析Json文件后調Core Animation的API繪制渲染。所以讓你們公司的UI去學一學AE吧，多們技能好防身。

Lottie開源庫地址：一個集Android、Ios、React Native與Web平臺于一身的女子。

https://github.com/airbnb/lottie-android

使用方式：

引入庫

compile 'com.airbnb.android:lottie:1.0.1'

創(chuàng)建assets文件夾，將json文件放入其中。

引用LottieAnimationView控件

  <com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottie_likeanim"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:lottie_fileName="likeanim.json"
    app:lottie_loop="true"
    android:layout_centerInParent="true"/>

常用屬性：

1. app:lottie_fileName="likeanim.json"  加載json的文件名
2. app:lottie_loop="true"  是否循環(huán)播放
3. app:lottie_autoPlay="true"  是否自動播放
   

常用操作：

    lottieLike.playAnimation();  //播放
    lottieLike.pauseAnimation(); //暫停
    lottieLike.cancelAnimation(); //取消
    lottieLike.getDuration();  //獲取動畫時長
    lottieLike.addAnimatorListener(new Animator.AnimatorListener() { //添加動畫監(jiān)聽
      @Override
      public void onAnimationStart(Animator animation) {

      }

      @Override
      public void onAnimationEnd(Animator animation) {

      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論