我們先來講一講Lottie這個框架，它是一個開源動畫庫。支持Android，IOS以及ReactNative開發，這篇文章主要講的是android的實現過程以及怎么讓UI為我們生成Json文件。
效果圖

1722373-db7b6eb1824c0e61.gif

1722373-bdb6881c78dc9fee.gif

集成流程
UI使用AE--安裝bodymovin插件-將AE中的動畫工程文件通過bodymovin轉換為.json文件--發給開發-開發集成Lottie框架-直接在項目中使用
是不是很簡潔，這樣我們壓根就不需要一幀一幀的png或者.gif文件了，不僅讓gif的加載速度變快而且節約了我們app的內部空間。
AE安裝插件教程（這里的安裝教程讓UI去看就好）
MAC
請移步這里：http://www.lxweimin.com/p/94f7a0102be5

windows
請移步這里：http://www.lxweimin.com/p/cae606f45c0b

在項目里使用
首先我們先把UI給我們的,json文件放到指定目錄下:
我們創建一個assets文件在我們次級目錄:

20151220191600437.png

image.png

dependencies {  
  compile 'com.airbnb.android:lottie:1.5.1'
}

在xml里創建控件

<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" />

在代碼里調用.這樣一個簡單的GIF圖就成了,什么?你問我怎么沒有圖片.對的.就是這么暴力.不用一幀一幀的圖片,直接用Json文件就可以實現動畫.,是不是很厲害.讓我們看看效果--

應用寶動態截屏2018011101.gif

(這個動態截屏玩的不是很6,大家將就看看吧)

身為一個合格的工程師,我們最需要的就是舉一反三,通過上面的講解我相信大家也能猜到這個框架最好用的地方了.沒錯,就是通過網絡獲取Json然后動態生產gif,我認為類似網易云那種閃屏廣告就是類似這種原理實現的.那接下來我就講解一下這個框架的進階使用.

進階使用
有的時候我們不需要它一直播放,或者需要監聽播放狀態,或者需要動態生成gif.或通過網絡生成gif.那我們就需要深入了解一下這個框架提供給我們的方法:

  //實例化
        mLottieAnimationView= (LottieAnimationView) findViewById(R.id.animation_view);
        //設置是否循環播放:true為循環.false為播放一次
        mLottieAnimationView.loop(true);
//        //暫停
//        mLottieAnimationView.pauseAnimation();
//        //開始播放
//        mLottieAnimationView.playAnimation();
        mLottieAnimationView.addAnimatorListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                //動畫開始監聽
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                //動畫結束
            }

            @Override
            public void onAnimationCancel(Animator animation) {
                //動畫取消
            }

            @Override
            public void onAnimationRepeat(Animator animation) {
                //動畫重復
            }
        });

以上都是本地gif的使用,接下來重頭戲到了,通過網絡獲取json并且生成gif,并且動態加入到布局中.

  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 = "你從網絡獲取的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,記得設置開啟播放,
2.在activity生命周期onStop方法設置取消播放.
3.如果是網絡獲取json重復使用的話記得設置緩存.

Demo地址:https://github.com/EspressoToast/LottieDemo
有不懂的問題歡迎向我提問,如果你覺得有幫助不妨給個star.