Android中Lottie的簡單使用

筆墨Android發表於2018-05-29
Android

很久沒寫部落格了，其實就是懶。加上專案上線，真心累啊！今天我們說點什麼？最近我們美工也不知道在什麼地方發現Lottie這麼個東西，於是乎就自己弄了一個json檔案的動畫，跑過來說我要看這個動畫效果，其實以前對Lottie還是有一定了解的！所以就直接給她寫了個Demo展示了一下，但是對於我的一貫尿性，感覺這個東西挺好玩的，就研究了一下，所以這裡給大家分享一下：

#本文知識點：

  • Lottie的介紹
  • Lottie的簡單使用
  • Lottie在專案中可能用到的內容
  • Lottie的案例分析

1. Lottie的介紹

Lottie是Android和iOS的移動庫，用於解析Adobe After Effects動畫與Bodymovin一起匯出為json 並在移動裝置上呈現它們！其實在移動端就是通過一個json檔案顯示相應的動畫，其實這樣很好的解決了動態改變動畫的能力，只需要動態載入相應的josn檔案就能實現動畫的改變！也省的移動端在進行版本的變更了！關於json檔案是怎麼得到的我不準備在這裡去研究，什麼AE、PS的我是真不會！別和我說你們美工不會，不會就讓他們學，他們不學怎麼辦？你們可以去這個網址去找相應的動畫，只能幫你們到這裡了！如果你真的對AE、PS什麼的感興趣，自己找美工學就是了！沒準還能套套近乎，領個媳婦回家呢！哈哈。。。

2. Lottie的簡單使用

其實說到簡單使用，真的就是傻瓜式操作！但是我覺得這裡還是有必要說一下你可以設定的屬性

  • lottie_fileName 設定相應的json檔案（app/src/main/assets目錄下的動畫json檔名，關於這個檔案的建立，後面我給你貼張圖你就知道了！！！）
  • lottie_loop 設定動畫是否迴圈，預設是不迴圈的（這個在新版本中已經不建議使用了！）
  • lottie_colorFilter 設定動畫的著色顏色，這個就是把你的動畫變成了一個顏色的了！但是有些動畫太深的話會變得一片模糊！所以感覺這個東西和json檔案的內容有關！！！
  • lottie_autoPlay 設定動畫是否自動播放
  • lottie_repeatCount 重複次數
  • lottie_imageAssetsFolder 動畫依賴的圖片資原始檔地址
  • lottie_scale 設定動畫的比例，但是我設定了並沒有什麼用！！！
  • lottie_repeatMode 設定動畫的重複模式RESTART：重複、REVERSE：反向

Android中Lottie的簡單使用

建立assets資料夾的方法，按照圖片上的位置點選之後，你就一頓下一步就可以了！！！

<com.airbnb.lottie.LottieAnimationView
        android:id="@+id/animation_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:lottie_fileName="biking_is_cool.json"
        app:lottie_loop="true"
        app:lottie_autoPlay="true" />
複製程式碼

像上面這樣就能顯示出相應的動畫了！這裡給大家看一下相應的動畫效果！！！

Android中Lottie的簡單使用

3. Lottie在專案中可能用到的內容

在專案中使用Lottie的時候，一般都會涉及到許多內容，像取消動畫，暫停動畫等許多問題！這裡都簡單的和大家分享一下！

3.1 Lottie程式碼中載入動畫

有的人可能不喜歡使用XML去載入動畫，因為這樣也確實不能從網路獲取相應的動畫，所以一些人採取用程式碼的方式去載入動畫！像下面這樣！

    mLottieAnimationView = findViewById(R.id.lav_animation);
    mLottieAnimationView.setAnimation("giftbox.json");
    //這個方法已經過時了
    // mLottieAnimationView.loop(true);
    //當你設定-1的時候就代表相應的迴圈了！
    mLottieAnimationView.setRepeatCount(-1);
    mLottieAnimationView.playAnimation();
複製程式碼

簡單的這幾行程式碼就能實現相應的動畫！是不是很簡單。

3.2 Lottie從服務其獲取相應的內容應注意什麼

有的時候專案的需求是從伺服器獲取相應的json檔案進行程式碼展示！這樣既能改變動畫的效果，又能動態的實時獲取，避免APP進行相應的更新！

Android中Lottie的簡單使用

以前在做電商的專案，有的時候底部的Tab就有相應的節日Tab，這個時候你就可以採用從服務其上面獲取相應的json檔案進行相應的展示！但是別忘了一個問題，伺服器獲取json的時候，可能因為使用者的網速等原因，暫時下載不下來的情況，那麼問題來了？當你沒有獲取到json的時候怎麼解決，之前我們的做法是先設定一張預設的圖片(setImageResource(R.mipmap.ic_launcher)進行設定)，當josn檔案下載下來的時候在呼叫相應的程式碼進行載入！像下面這樣

        mLottieAnimationView = findViewById(R.id.lav_animation);
        mLottieAnimationView.setImageResource(R.mipmap.ic_launcher);

        new Thread() {
            @Override
            public void run() {
                super.run();
                try {
                    sleep(5000);//模擬下載的時間
                    String json = "千萬別直接複製，這裡是下載下來的json字串";
                    mLottieAnimationView.setAnimationFromJson(json);
                    //當你設定-1的時候就代表相應的迴圈了！
                    mLottieAnimationView.setRepeatCount(-1);
                    mLottieAnimationView.playAnimation();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        }.start();
複製程式碼

這裡還有一個點需要注意，但是我試了一下，這樣會存在幾秒的延時！！！

3.3 Lottie的快取機制

Lottie內部存在相應的快取機制，也就是說我們可以在載入json的時候使用相應的快取進行載入！！！像這樣...

  • setAnimation(final String animationName, final CacheStrategy cacheStrategy)
    • LottieAnimationView.CacheStrategy.None 沒有快取
    • LottieAnimationView.CacheStrategy.Weak 弱引用快取
    • LottieAnimationView.CacheStrategy.Strong 強引用快取 這樣就可以在載入動畫的時候設定相應的快取，是快取在一個Map集合中，下次直接從這個Map集合中取了！！！

3.4 Lottie的一些特殊使用

如果你們的美工能研究的話，其實這個json檔案中還可以放一些相關的圖片，具體怎麼弄我還真的不知道，等有時間我去問問，既然能放相關的圖片，其實很多秀場的動畫也有用Lottie來實現的，怎麼實現的呢？基本上都是弄一個服務開始現在相應的json檔案和圖片，放到記憶體卡里面，等你用的時候從本地儲存裡面直接用流的形式取就是了！因為我以前做過相關的秀場動畫，所以這裡知道一點，我也特意的找到了一片相關的部落格如果感興趣的話，可以看看Lottie -- 輕鬆實現動態載入直播禮物動畫裡面寫的內容！這裡就不做展開說明了！

基本上在專案中Lottie的使用場景也就是這麼多了，其實我感覺我分析的還不是那麼透徹，有一些關於原始碼部分的內容我都沒有仔細看，最近專案中的需求太多了！大家加油吧！入了Android的大坑什麼時候能脫坑啊！！！今天就到這裡拜拜！！！

相關文章