Android Lottie动画框架简单例子

先看一些图片，如下：

以上动画看起来是不是很爽啊，哈哈，这个就是现在比较火的开源框架Lottie动画，动画的业务全部在一个json 文件中，这个json文件呢不用程序员考虑了，直接UI通过AE可以编辑出来，这个动画性能也很不错的，这里是github上的项目地址：

点击打开链接

https://github.com/airbnb/lottie-android

现在来说下简单实用吧，用起来真的很简单，

第一步、

把Lottie的module引入项目中，当然也可以把module里面的代码拷贝出来，如图：

第二步、

在布局文件中引入动画显示的view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="10dp">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:lottie_fileName="Logo/LogoSmall.json"
            app:lottie_loop="true" />

    </FrameLayout>

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:padding="10dp">

        <com.airbnb.lottie.LottieAnimationView
            android:id="@+id/animation_view_more"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            app:lottie_loop="true" />

    </FrameLayout>

</LinearLayout>

第三步、

把动画用的json文件拷贝到主module中，当然我是拷贝官方例子的，如图：

第四步、

直接上播放的方法，这里有2个方法都可以实现播放动画的功能

package android.example.com.lottietest;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import com.airbnb.lottie.LottieAnimationView;
import com.airbnb.lottie.LottieComposition;
import com.airbnb.lottie.OnCompositionLoadedListener;

public class MainActivity extends AppCompatActivity {

    private LottieAnimationView mAnimationView;
    private LottieAnimationView mAnimationViewMore;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mAnimationView = (LottieAnimationView) findViewById(R.id.animation_view);
        mAnimationViewMore = (LottieAnimationView) findViewById(R.id.animation_view_more);
    }

    /**
     * 播放动画方法二
     */
    private void playMore() {
        final String assetName = "WeAccept.json";
        mAnimationViewMore.setImageAssetsFolder("Images");
        LottieComposition.Factory.fromAssetFileName(this, assetName,
                new OnCompositionLoadedListener() {
                    @Override
                    public void onCompositionLoaded(LottieComposition composition) {
                        mAnimationViewMore.setComposition(composition);
                        mAnimationViewMore.resumeAnimation();
                    }
                });
    }

    @Override
    public void onStart() {
        super.onStart();
        // 播放动画方法一
        mAnimationView.setProgress(0f);
        mAnimationView.playAnimation();
        // 播放动画方法二
        playMore();
    }

    @Override
    public void onStop() {
        super.onStop();
        mAnimationView.cancelAnimation();
        mAnimationViewMore.cancelAnimation();
    }
}

好了，看下我们的效果吧，如下：

是不是很简单啊，下面是我的例子的项目地址

点击打开链接
http://download.csdn.net/detail/msn465780/9803823