Lottie動畫官網(wǎng)

Lottie動畫是airbnb最新開源的一個動畫解決方案，在移動平臺使用非常便捷，無論Android，Ios，還是Web都支持。

先來看一下他能做的效果

這都是官方demo做的效果，動畫都沒有使用圖片哦！

都是利用描述文件做的動畫

Android里avg動畫也是利用描述文件來做的，但是5.0以后才支持，現(xiàn)在4.x的android手機還是很多的，

不能放棄他們，做動畫的時候就沒有用。

另外Lottie動畫對于UI設(shè)計人員的支持也更好一點，可以直接用AE來做，安裝bodymovin插件，就能導(dǎo)出

動畫文件，各個平臺都能使用哦。 

我們來看官方demo 

這是Lottie動畫在github上傳的android官方demo

運行這個demo，可是著實讓我費了點力氣，遇到了幾個坑，一是gradle最低版本要求3.3，之后各種庫文件又

需要下載，最后還在運行時報錯:Android Studio版本不匹配，關(guān)閉了InstantRun，才運行起來。

我上傳了一份運行出來的apk文件，需要可以去下載。

之后自己照著官方文檔寫一個demo，這個容易多了，用起來非常方便。

首先，在Android Studio里自己創(chuàng)建一個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"/>
這個是播放動畫的控件，可以在這里直接設(shè)置要播放的動畫，也可以在代碼中設(shè)置
fileName參數(shù)設(shè)置播放的文件（文件放在assets目錄下，播放文件要寫全路徑）
loop設(shè)置是否循環(huán)播放 autoPlay設(shè)置是否自動播放
在代碼里設(shè)置，可以這樣寫
animationView = (LottieAnimationView) findViewById(R.id.animation_view);        animationView.setAnimation(jsonData);        animationView.loop(true);animationView.playAnimation();
LottieAnimationView還有很多其他api
我認為使用比較多的有
animationView.cancelAnimation();取消播放，這個取消我在測試中是類似暫停的功能
animationView.setImageAssetsFolder(imageFolder);如果你播放的動畫是有圖片信息的，那么需要設(shè)置動畫中圖片所在的位置（也是放在assets文件夾中）
還要一些其他api
//設(shè)置播放進度        animationView.setPRogress(1.0f);        //設(shè)置播放速度        animationView.setSpeed(1.0f);        //檢查是否在播放中        animationView.isAnimating();        //暫停播放        animationView.pauseAnimation();        //獲取動畫總長度        animationView.getDuration();        //獲取當(dāng)前播放的進度        animationView.getProgress();        //添加播放動畫狀態(tài)的監(jiān)聽（開始，結(jié)束，取消，重復(fù)）        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();            }        });這樣可以復(fù)用加載動畫了，這也是異步加載的寫法，從網(wǎng)絡(luò)加載json文件數(shù)據(jù)，也這樣寫
 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來作為事例，來看一下怎么復(fù)用動畫好了
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;    }}我也是初次使用，如有問題，歡迎討論!