版本是 3.2.2砚哆。
GitHub：https://github.com/airbnb/lottie-android
官方文檔：http://airbnb.io/lottie/
配置
- 在 app/build.gradle 中添加如下：（版本號以官網(wǎng)最新版為準(zhǔn)）
implementation 'com.airbnb.android:lottie:3.2.2'
使用
-
在 main/assets下添加動畫資源躁锁，data.json.
image 在布局文件中添加 LottieAnimationView 控件
<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"/>
-
效果圖
image
動畫資源
如果你因為各種原因战转，沒有辦法專門由一個設(shè)計師來為你的 App 定制動畫效果以躯，你也可以嘗試找找線上公開的一些 Lottie 的動畫效果忧设，這里推薦使用 LottieFiles 這個網(wǎng)站。
LottieFiles: https://www.lottiefiles.com/
進階
- 本地 json 動畫使用膀懈。
mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view); //實例化
//設(shè)置是否循環(huán)播放:true為循環(huán).false為播放一次
mLottieAnimationView.loop(true);
// //暫停
// mLottieAnimationView.pauseAnimation();
// //開始播放
// mLottieAnimationView.playAnimation();
mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//動畫開始監(jiān)聽
}
@Override
public void onAnimationEnd(Animator animation) {
//動畫結(jié)束
}
@Override
public void onAnimationCancel(Animator animation) {
//動畫取消
}
@Override
public void onAnimationRepeat(Animator animation) {
//動畫重復(fù)
}
});
- 網(wǎng)絡(luò) json 動畫使用谨垃。
private RelativeLayout mLayout;
private LottieAnimationView mLottieAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_network);
mLayout = (RelativeLayout) findViewById(R.id.layout_content);
initView();
}
private void initView() {
mLottieAnimationView = new LottieAnimationView(NetworkActivity.this);
String response = "你從網(wǎng)絡(luò)獲取的json";
try {
JSONObject jsonObject = new JSONObject(response);
LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition lottieComposition) {
setComposition(lottieComposition);
}
});
} catch (JSONException e) {
e.printStackTrace();
}
mLayout.addView(mLottieAnimationView);
}
private void setComposition(LottieComposition lottieComposition) {
mLottieAnimationView.setProgress(0);
mLottieAnimationView.loop(true);
mLottieAnimationView.setComposition(lottieComposition);
mLottieAnimationView.playAnimation();
}
工具
集成流程
UI 使用 AE → 安裝 bodymovin 插件 → 將 AE 中的動畫工程文件通過 bodymovin 轉(zhuǎn)換為 .json 文件→ 發(fā)給開發(fā)-開發(fā)集成Lottie框架-直接在項目中使用
是不是很簡潔狐血，這樣我們壓根就不需要一幀一幀的png或者.gif文件了易核，不僅讓gif的加載速度變快而且節(jié)約了我們app的內(nèi)部空間。
AE安裝插件教程（這里的安裝教程讓UI去看就好）
MAC
windows
懶得寫了 介紹兩個別人的文章 :
文章2
文章3
