製作lottie動畫並應用到android專案

zyl409214686發表於2017-12-23
動畫Android

效果圖：

啟動頁.gif

最近在做一款音樂剪下的專案，啟動頁需要靜態圖太生硬了， 於是做了一個lottie動畫效果。具體過程如下：

AE動畫製作

工具準備

  1. 動畫效果工具Adobe After Effects CC, 我這裡用到的環境是Mac，下載地址以及破解請看這裡 http://www.sdifen.com/mac-adobe-after-effecs-cc.html。
  2. 匯出動畫json檔案，需要下載bodymovin AE外掛 http://www.mq2014.com/bodymovin-ae-cha-jian-mac-win-an-zhuang-xia-zai.html。

動畫製作 首先開啟 AE工具建立一個合成，持續時間設定為 0;00;03;00 ，表示3秒

建立一個合成

匯入圖片素材操作如下：

匯入圖片素材

匯入圖片之後顯示這樣子

匯入成功

接下來新建一個蒙版

新建一個蒙版

接下來點選小三角，形狀顯示出蒙版形狀視窗

按照如下操作點開蒙版形狀視窗

設定左側、右側初始值為0畫素，然後點選蒙版路徑左側的小鬧鈴，接下來的操作將觸發關鍵幀。

設定初始值並開啟關鍵幀

滑動事件滑塊到最右側（3秒處），再次點開蒙版形狀彈出框，設定右側值500畫素，然後勾選重置為矩形，然後確定。

設定關鍵幀引數

我們的動畫完成啦，接下來就可以點選預覽框播放按鈕來看一下效果嘍。

預覽操作

動畫製作完成了，不過還沒結束哦， 接下來我們來匯出json。點選工具欄創庫哦、擴充、Bodymovin。

點選bodymovin

接下來選中要匯出json的動畫， 然後選擇要匯出的data.json的位置，然後點選Render。

匯出json

如下顯示就是匯出成功啦

匯出成功

匯出如下檔案

F9ED21F9-187B-465F-BDF7-68E65872886C.png

Android Lottie 載入動畫

  1. 先來將剛才生成的檔案放入專案 Assets資料夾下。

    放入assets

  2. build.gradle中增加依賴 compile 'com.airbnb.android:lottie:2.0.0-beta4'

  3. xml中增加LottieAnimationView，這裡我們需要設定lottie用到的圖片所在Assets下檔案目錄名稱。也可以設定是否迴圈播放，自否自動播放，預設為false。這裡因為我們的場景是啟動頁，所以不需要自動播放和迴圈播放。

<com.airbnb.lottie.LottieAnimationView
            android:id="@+id/lottie_imageview"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:lottie_fileName="data.json"
            app:lottie_imageAssetsFolder="images/"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="35dp"/>
            <!--app:lottie_loop="true"-->
            <!--app:lottie_autoPlay="true"-->
複製程式碼
  1. 在Activity 中設定事件
private void setListener() {
        ValueAnimator animator = new ValueAnimator().ofFloat(0f, 1f).setDuration(3000);
        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                mBinding.lottieImageview.setProgress(Float.parseFloat
                        (animation.getAnimatedValue().toString()));
            }
        });
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                Logger.d("onAnimationStart");
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                Logger.d("onAnimationEnd");
                goToMainActivity();
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                Logger.d("onAnimationCancel");
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                Logger.d("onAnimationRepeat");
            }
        });
        animator.start();
    }
複製程式碼

這裡我們通過ValueAnimator屬性動畫結合LottieAnimationView.setProgress()在3秒的時間完成我們的動畫，到這裡就結束了。能力有限，多提意見。

AE動畫以及專案程式碼

  • AE動畫專案已經發布到github
  • android lottie專案程式碼是Mp3Cutter的啟動頁SplashActivity

Blog

如果對mp3剪下器專案感興趣可以看這裡有詳細的介紹 Mp3剪下器Blog

相關文章