Android之Lottie動畫詳解(非原創）

文章大綱

1、Lottie介紹
2、Lottie實戰
3、項目源碼下載
4、參考文章

 

1、Lottie介紹

1. 什麼是Lottie

  Lottie是Android和iOS的移動庫，用於解析Adobe After Effects動畫與Bodymovin一塊兒導出爲json 並在移動設備上呈現它們！其實在移動端就是經過一個json文件顯示相應的動畫，其實這樣很好的解決了動態改變更畫的能力，只須要動態加載相應的josn文件就能實現動畫的改變。（josn由美工提供）

2. Lottie優勢

（1）可以解析渲染經過 AE 上的 Bodymovin 插件將 AE 中製做好的動畫導出成的 json 文件
（2）數據源多樣性—可從assets,sdcard,網絡加載動畫資源，動態更新
（3）跨平臺—設計稿導出一份動畫描述文件，android,ios,react native通用（android使用的api不能低於16）

3. Lottie動畫製做流程圖

 

4. Lottie例子

 

2、Lottie實戰

1. 常見的API介紹

（1）判斷是否動畫正在運行中
  isAnimating()
（2）設置動畫的進度值(float值)
  setProgress();
（3）監聽動畫進度
  addAnimatorUpdateListener
（4）開始動畫
  playAnimation()
（5）動態設置json文件
  setComposition

2. 代碼實操

（1）在項目的 build.gradle 文件添加依賴

dependencies {
    implementation 'com.android.support:appcompat-v7:24+' //lottie依賴 implementation 'com.airbnb.android:lottie:1.0.1' //網絡請求相關依賴 implementation 'com.squareup.okhttp3:okhttp:3.5.0' } 

（2）相關json文件

 

（3）xml加載Lottie動畫

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:orientation="vertical" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <!--如此，動畫就能跑起來了，解釋下一下屬性： 1.lottie_fileName：在app/src/main/assets目錄下的動畫json文件名。 2.lottie_loop：動畫是否循環播放，默認不循環播放。 3.lottie_autoPlay：動畫是否自動播放，默認不自動播放。 4.alottie_imageAssetsFolder：動畫所依賴的圖片目錄，在pp/src/main/assets/目錄下的子目錄，該子目錄存放全部圖片。--> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view" android:layout_width="wrap_content" android:layout_height="wrap_content" app:lottie_fileName="data.json" app:lottie_loop="true" app:lottie_autoPlay="true"/> </LinearLayout> 

其餘常見api：
（1）lottie_repeatCount 重複次數
（2）lottie_repeatMode 設置動畫的重複模式RESTART：重複、REVERSE：反向
（3）lottie_colorFilter 設置動畫的着色顏色，這個就是把你的動畫變成了一個顏色的了

Activity代碼以下所示

/** * 簡單動畫 */ public class SimpleActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // activity_simple.xml中 lottie_fileName="data.json" // 因此只須要在 app/src/main/assets 中添加AE 生成的 json文件，重命名爲data.json就能夠顯示動畫 setContentView(R.layout.activity_simple); } } 

（4）Activity中加載Lottie
xml文件以下

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:orientation="horizontal" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view_click" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal"> <TextView android:id="@+id/tv_seek" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:textColor="@android:color/white" android:textSize="16sp" /> <Button android:id="@+id/button1" android:layout_width="100dip" android:layout_height="40dip" android:background="@color/colorPrimary" android:text="開始動畫" /> <Button android:id="@+id/button2" android:layout_width="100dip" android:layout_height="40dip" android:layout_marginLeft="10dip" android:background="@color/colorPrimary" android:text="結束動畫" /> </LinearLayout> </LinearLayout> 

Activity代碼以下

package com.zkk.lottietest; import android.animation.ValueAnimator; import android.annotation.SuppressLint; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.Button; import android.widget.TextView; import com.airbnb.lottie.LottieAnimationView; import com.airbnb.lottie.model.LottieComposition; public class ClickActivity extends AppCompatActivity { private Button button1,button2; private TextView tv_seek; LottieAnimationView animation_view_click; @SuppressLint("RestrictedApi") @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_click); animation_view_click=(LottieAnimationView)findViewById(R.id.animation_view_click); tv_seek=(TextView)findViewById(R.id.tv_seek); button1=(Button)findViewById(R.id.button1); button2=(Button)findViewById(R.id.button2); button1.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { startAnima(); } }); button2.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { stopAnima(); } }); //代碼設置Lottie LottieComposition.fromAssetFileName(this, "LottieLogo1.json", new LottieComposition.OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { animation_view_click.setComposition(composition); animation_view_click.setProgress(0.333f);//progress範圍0~1f，設置動畫進度 animation_view_click.playAnimation();//播放動畫 } }); //動畫狀態監聽回調 animation_view_click.addAnimatorUpdateListener(new ValueAnimator.AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { tv_seek.setText(" 動畫進度" +(int) (animation.getAnimatedFraction()*100) +"%"); } }); } /* * 開始動畫 */ private void startAnima(){ //判斷動畫是否在運行 boolean inPlaying = animation_view_click.isAnimating(); if (!inPlaying) { animation_view_click.setProgress(0f);//設置開始時的進度值 animation_view_click.playAnimation(); } } /* * 中止動畫 */ private void stopAnima(){ //判斷動畫是否在運行 boolean inPlaying = animation_view_click.isAnimating(); if (inPlaying) { animation_view_click.cancelAnimation(); } } @Override protected void onStop() { super.onStop(); animation_view_click.cancelAnimation(); } } 

（5）網絡加載動畫
xml文件以下

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/activity_main" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:orientation="vertical" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin"> <com.airbnb.lottie.LottieAnimationView android:id="@+id/animation_view_network" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> 

Activity代碼以下

package com.zkk.lottietest; import android.annotation.SuppressLint; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import com.airbnb.lottie.LottieAnimationView; import com.airbnb.lottie.model.LottieComposition; import org.json.JSONException; import org.json.JSONObject; import java.io.IOException; import okhttp3.Call; import okhttp3.Callback; import okhttp3.OkHttpClient; import okhttp3.Request; import okhttp3.Response; /** * 網絡請求動畫 */ public class NetworkActivity extends AppCompatActivity { LottieAnimationView animation_view_network;//Lottie組件 private OkHttpClient client;//Okhttp客戶端 @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_network); //獲取Lottie組件 animation_view_network=(LottieAnimationView)findViewById(R.id.animation_view_network); //在線加載Lottie的json loadUrl("http://cdn.trojx.me/blog_raw/lottie_data_edit.json"); } private void loadUrl(String url) { Request request; try { request = new Request.Builder() .url(url) .build(); } catch (IllegalArgumentException e) { return; } if (client == null) { client = new OkHttpClient(); } client.newCall(request).enqueue(new Callback() { @Override public void onFailure(Call call, IOException e) { } @SuppressLint("RestrictedApi") @Override public void onResponse(Call call, Response response) throws IOException { if (!response.isSuccessful()) { } try { //獲取返回的json內容 JSONObject json = new JSONObject(response.body().string()); //設置動畫 LottieComposition .fromJson(getResources(), json, new LottieComposition.OnCompositionLoadedListener() { @Override public void onCompositionLoaded(LottieComposition composition) { setComposition(composition); } }); } catch (JSONException e) { } } }); } private void setComposition(LottieComposition composition){ animation_view_network.setProgress(0);//設置當前進度 animation_view_network.loop(true);//動畫是否循環播放 animation_view_network.setComposition(composition); animation_view_network.playAnimation();//開始動畫 } @Override protected void onStop() { super.onStop(); animation_view_network.cancelAnimation();//取消動畫 } } 

3、項目源碼下載

連接:https://pan.baidu.com/s/1fflg3Gmws-hh_3nj1N7fwg
密碼:1etb

4、參考文章

1. https://blog.csdn.net/qq_15538877/article/details/80503773
2. https://www.jianshu.com/p/282d098cf928?utm_source=oschina-app