Lottie

Lottie 是 Airbnb 開(kāi)源的一個(gè)動(dòng)畫項(xiàng)目，它支持 iOS, mac OS Android RN，由于某些復(fù)雜動(dòng)畫的實(shí)現(xiàn)，往往會(huì)寫很多的 code 來(lái)實(shí)現(xiàn)它，而且調(diào)試動(dòng)畫的效果會(huì)比較花費(fèi)時(shí)間。用它來(lái)解決某些動(dòng)畫會(huì)帶來(lái)很大的便利。

設(shè)計(jì)師在After Effects 設(shè)計(jì)好相關(guān)的動(dòng)畫，然后安裝上BodyMovin 這個(gè)插件，這個(gè)插件，可以幫導(dǎo)出動(dòng)畫效果的 JSON 文件，然后我們可以通過(guò) Lottie 來(lái)加載相關(guān)的 JSON 文件來(lái)實(shí)現(xiàn)動(dòng)畫效果。

優(yōu)勢(shì)

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

不足之處

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

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

先上效果圖，這個(gè)是做的一個(gè)仿抖音的點(diǎn)贊動(dòng)畫：

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

設(shè)計(jì)師AE導(dǎo)出Json文件，Lotti 解析Json文件后調(diào)Core Animation的API繪制渲染。所以讓你們公司的UI去學(xué)一學(xué)AE吧，多們技能好防身。

Lottie開(kāi)源庫(kù)地址：一個(gè)集Android、Ios、React Native與Web平臺(tái)于一身的女子。

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

使用方式：

引入庫(kù)

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"  是否自動(dòng)播放
   

常用操作：

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

      }

      @Override
      public void onAnimationEnd(Animator animation) {

      }

      @Override
      public void onAnimationCancel(Animator animation) {

      }

      @Override
      public void onAnimationRepeat(Animator animation) {

      }
    });

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。