我們先來講一講Lottie這個框架，它是一個開源動畫庫呈队。支持Android剥槐，IOS以及ReactNative開發(fā)，這篇文章主要講的是android的實現(xiàn)過程以及怎么讓UI為我們生成Json文件宪摧。
效果圖
集成流程
UI使用AE--安裝bodymovin插件-將AE中的動畫工程文件通過bodymovin轉(zhuǎn)換為.json文件--發(fā)給開發(fā)-開發(fā)集成Lottie框架-直接在項目中使用
是不是很簡潔粒竖，這樣我們壓根就不需要一幀一幀的png或者.gif文件了，不僅讓gif的加載速度變快而且節(jié)約了我們app的內(nèi)部空間几于。
AE安裝插件教程（這里的安裝教程讓UI去看就好）
MAC
請移步這里：http://www.reibang.com/p/94f7a0102be5
windows
請移步這里：http://www.reibang.com/p/cae606f45c0b
在項目里使用
首先我們先把UI給我們的,json文件放到指定目錄下:
我們創(chuàng)建一個assets文件在我們次級目錄:
然后我們把data.json文件粘貼進(jìn)assets文件下:
這樣之后我們就可以開始導(dǎo)入依賴庫了.注意蕊苗，這里要求minSDK至少為16
dependencies {
compile 'com.airbnb.android:lottie:1.5.1'
}
在xml里創(chuàng)建控件
<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" />
在代碼里調(diào)用.這樣一個簡單的GIF圖就成了,什么?你問我怎么沒有圖片.對的.就是這么暴力.不用一幀一幀的圖片,直接用Json文件就可以實現(xiàn)動畫.,是不是很厲害.讓我們看看效果--
(這個動態(tài)截屏玩的不是很6,大家將就看看吧)
身為一個合格的工程師,我們最需要的就是舉一反三,通過上面的講解我相信大家也能猜到這個框架最好用的地方了.沒錯,就是通過網(wǎng)絡(luò)獲取Json然后動態(tài)生產(chǎn)gif,我認(rèn)為類似網(wǎng)易云那種閃屏廣告就是類似這種原理實現(xiàn)的.那接下來我就講解一下這個框架的進(jìn)階使用.
進(jìn)階使用
有的時候我們不需要它一直播放,或者需要監(jiān)聽播放狀態(tài),或者需要動態(tài)生成gif.或通過網(wǎng)絡(luò)生成gif.那我們就需要深入了解一下這個框架提供給我們的方法:
//實例化
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ù)
}
});
以上都是本地gif的使用,接下來重頭戲到了,通過網(wǎng)絡(luò)獲取json并且生成gif,并且動態(tài)加入到布局中.
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();
}
注意事項:1.如果你不是從xml生成的LottieAnimationView,記得設(shè)置開啟播放,
2.在activity生命周期onStop方法設(shè)置取消播放.
3.如果是網(wǎng)絡(luò)獲取json重復(fù)使用的話記得設(shè)置緩存.
Demo地址:https://github.com/EspressoToast/LottieDemo
有不懂的問題歡迎向我提問,如果你覺得有幫助不妨給個star.
