Android使用lottie加載json動(dòng)畫的示例代碼

Lottie

從事德陽服務(wù)器托管，服務(wù)器租用，云主機(jī)，網(wǎng)站空間，申請(qǐng)域名，CDN，網(wǎng)絡(luò)代維等服務(wù)。

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

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

Android使用lottie加載json動(dòng)畫的示例代碼

優(yōu)勢(shì)

  1. 開發(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. 可以通過 URL 的方式加載 JSON 文件，來替換客戶端動(dòng)畫，不用發(fā)版本了
  4. 設(shè)計(jì)想了一個(gè)屌炸天的動(dòng)畫，然后給到開發(fā)，開發(fā)說這個(gè)實(shí)現(xiàn)不了，或者說很費(fèi)時(shí)間，然后讓設(shè)計(jì)用這種方式去實(shí)現(xiàn)。
  5. 對(duì)于 iOS 來說支持 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 效果無法成功導(dǎo)出
  4. 動(dòng)畫無法被編輯，加載下來是什么樣子，就原封不動(dòng)

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

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

Android使用lottie加載json動(dòng)畫的示例代碼

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

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

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

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

使用方式：

引入庫

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

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

Android使用lottie加載json動(dòng)畫的示例代碼

引用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)聽
      @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í)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

新聞名稱：Android使用lottie加載json動(dòng)畫的示例代碼
分享URL：http://bm7419.com/article22/igsecc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、網(wǎng)站排名、全網(wǎng)營(yíng)銷推廣、網(wǎng)站維護(hù)、定制開發(fā)、品牌網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都做網(wǎng)站