Lottie動畫官網
Lottie動畫是airbnb最新開源的一個動畫解決方案,在移動平台使用非常便捷,無論Android,Ios,還是Web都支援。
先來看一下他能做的效果
![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiIyVGduV2QvwVe0lmdhJ3ZvwFM38CXlZHbvN3cpR2Lc1TPB10QGtWUCpEMJ9CXsxWam9CXwADNvwVZ6l2c052bm9CXUJDT1wkNhVzLcRnbvZ2LcpGcXFGaSJjW1Z1RaZXUYpVd1kmYr50MZV3YyI2cKJDT29GRjBjUIF2LcRHelR3LcJzLctmch1mclRXY39zNzQTNzQTN4ADNyIDM3EDMy8CX0Vmbu4GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.jpg)
這都是官方demo做的效果,動畫都沒有使用圖檔哦!
都是利用描述檔案做的動畫
Android裡avg動畫也是利用描述檔案來做的,但是5.0以後才支援,現在4.x的android手機還是很多的,
不能放棄他們,做動畫的時候就沒有用。
另外Lottie動畫對于UI設計人員的支援也更好一點,可以直接用AE來做,安裝bodymovin插件,就能導出
動畫檔案,各個平台都能使用哦。
我們來看官方demo
這是Lottie動畫在github上傳的android官方demo
運作這個demo,可是着實讓我費了點力氣,遇到了幾個坑,一是gradle最低版本要求3.3,之後各種庫檔案又
需要下載下傳,最後還在運作時報錯:Android Studio版本不比對,關閉了InstantRun,才運作起來。
我上傳了一份運作出來的apk檔案,需要可以去下載下傳。
之後自己照着官方文檔寫一個demo,這個容易多了,用起來非常友善。
首先,在Android Studio裡自己建立一個Android工程。
然後,在gradle檔案中添加Lottie的引用
compile 'com.airbnb.android:lottie:1.5.0'
之後,就能正常使用了
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:lottie_fileName="hello-world.json"
app:lottie_loop="true"
app:lottie_autoPlay="true"/>
這個是播放動畫的控件,可以在這裡直接設定要播放的動畫,也可以在代碼中設定
fileName參數設定播放的檔案(檔案放在assets目錄下,播放檔案要寫全路徑)
loop設定是否循環播放 autoPlay設定是否自動播放
在代碼裡設定,可以這樣寫
animationView = (LottieAnimationView) findViewById(R.id.animation_view);
animationView.setAnimation(jsonData);
animationView.loop(true);
animationView.playAnimation();
LottieAnimationView還有很多其他api
我認為使用比較多的有
animationView.cancelAnimation();
取消播放,這個取消我在測試中是類似暫停的功能
animationView.setImageAssetsFolder(imageFolder);
如果你播放的動畫是有圖檔資訊的,那麼需要設定動畫中圖檔所在的位置(也是放在assets檔案夾中)
還要一些其他api
//設定播放進度
animationView.setProgress(1.0f);
//設定播放速度
animationView.setSpeed(1.0f);
//檢查是否在播放中
animationView.isAnimating();
//暫停播放
animationView.pauseAnimation();
//擷取動畫總長度
animationView.getDuration();
//擷取目前播放的進度
animationView.getProgress();
//添加播放動畫狀态的監聽(開始,結束,取消,重複)
animationView.addAnimatorListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
另外,如果你在listview之類的空間中使用動畫,如果每一列都播放的是相同的動畫,官方推薦這樣來做
LottieComposition.Factory.fromAssetFileName(this, jsonData, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
animationView.setComposition(composition);
animationView.playAnimation();
}
});
這樣可以複用加載動畫了,這也是異步加載的寫法,從網絡加載json檔案資料,也這樣寫
LottieComposition.Factory.fromInputStream(context, inputstream, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
}
});
LottieComposition.Factory.fromJson(getResources(), jsonObject, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
}
});
隻用一個動畫,很簡單,我就不舉例了
我寫了一個Adapter來作為事例,來看一下怎麼複用動畫好了
public class TestLottieAdapter extends BaseAdapter {
private List<String> showStr;
private LottieComposition composition;
private LayoutInflater inflater;
public TestLottieAdapter(List<String> showStr, Context context, String json) {
this.showStr = showStr;
this.inflater = LayoutInflater.from(context);
LottieComposition.Factory.fromAssetFileName(context, json, new OnCompositionLoadedListener() {
@Override
public void onCompositionLoaded(LottieComposition composition) {
TestLottieAdapter.this.composition = composition;
}
});
}
@Override
public int getCount() {
return showStr == null ? 0 : showStr.size();
}
@Override
public Object getItem(int i) {
return showStr.get(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
ViewHolder holder;
if (view == null) {
view = inflater.inflate(R.layout.listitem, null);
holder = new ViewHolder();
holder.animationView = (LottieAnimationView) view.findViewById(R.id.animation_view);
view.setTag(holder);
} else {
holder = (ViewHolder) view.getTag();
}
if (composition != null) {
holder.animationView.setComposition(composition);
holder.animationView.playAnimation();
}
return view;
}
private static class ViewHolder {
LottieAnimationView animationView;
}
}
我也是初次使用,如有問題,歡迎讨論!