Lottie介绍

前言

之前得知Airbnb发布了一款吊炸天的动画库，赶紧去Git-Hub上瞅了一眼，由于提供Demo，所以很便于我们学习，一下是对Lottie官方Demo的一个解读，介绍一些这个吊炸天的动画开源库，他同时支持Android，iOS和React Native.

官网地址

解读

首先项目结构很简单易懂

在assets文件夹中放着最为重要的动画中要用到的json文件。通过AndroidManifest文件可以找到主界面是MainActivity，但是在MainActivity中其实只是加载了一个ListFragment，所以我们先来看一下ListFragment中的内容。

FragmentList

首先来看一下ListFragment的布局文件fragment_list.xml：

<?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:id="@+id/container"              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:paddingBottom="32dp">        <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"/>            <!--这是lottie的属性，定义了动画使用的文件，动画是否循环等-->    </FrameLayout>    <android.support.v7.widget.RecyclerView        android:id="@+id/recycler_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        app:layoutManager="LinearLayoutManager"/></LinearLayout>

app:lottie_fileName这个属性所指定的json文件其实就是动画中所用到的各种数据，变换坐标等。

在布局文件中使用com.airbnb.lottie.LottieAnimationView这个控件之后，我们来看一下对应的ListFragment中的处理。
ListFragment

public class ListFragment extends Fragment {    static ListFragment newInstance() {        return new ListFragment();    }    //删除了一些视图的ButterKnife绑定    private final FileAdapter adapter = new FileAdapter();    @Nullable    @Override    public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {        View view = inflater.inflate(R.layout.fragment_list, container, false);        ButterKnife.bind(this, view);        recyclerView.setAdapter(adapter);        return view;    }    //真正重要的是这里，在Fragment的start方法中开启动画    @Override    public void onStart() {        super.onStart();        animationView.setProgress(0f);        animationView.playAnimation();    }    //在onStop方法中停止动画    @Override    public void onStop() {        super.onStop();        animationView.cancelAnimation();    }    //查看Demo中带有的动画效果    private void onViewerClicked() {        showFragment(AnimationFragment.newInstance());    }    //一个用Lottie做的带有动画效果的文字输入    private void onTypographyClicked() {        startActivity(new Intent(getContext(), FontActivity.class));    }    //用Lottie做的一个App的引导页    private void onAppIntroPagerClicked() {        startActivity(new Intent(getContext(), AppIntroActivity.class));    }    private void showFragment(Fragment fragment) {        getFragmentManager().beginTransaction()                .addToBackStack(null)                .setCustomAnimations(R.anim.slide_in_right, R.anim.hold, R.anim.hold, R.anim.slide_out_right)                .remove(this)                .replace(R.id.content_2, fragment)                .commit();    }    private void onFontClicked() {        startActivity(new Intent(getContext(), FontActivity.class));    }    //下边删除了RecycleView的StringViewHolder和对应的FileAdapter}

以上这些代码就可以实现一个下边这样的动画效果

这样我们先来简单梳理一下使用Lottie的步骤：

1. 首先在要使用动画的地方在布局文件中使用com.airbnb.lottie.LottieAnimationView这个空间，并指定其使用的动画json文件

2. 在代码中获取控件，并直接通过animationView.setProgress(0f)设置当前动画的进度，使用animationView.playAnimation()来起开动画，使用animationView.cancelAnimation();来停止动画

3. 通过以上两步就可以完成一个动画的创建，最主要的还是在json动画文件上。

至于另外的两个动画效果，也是同样的实现方式。在LottieFontViewGroup这个自定义控件中，其实只是将每一个输入的英文字母作为单独的animationView来播放对应的单独的动画。

下面就是他的初始化方法：

 private void init() {    setFocusableInTouchMode(true);    LottieComposition.Factory.fromAssetFileName(getContext(), "Mobilo/BlinkingCursor.json",        new OnCompositionLoadedListener() {          @Override          public void onCompositionLoaded(LottieComposition composition) {            cursorView = new LottieAnimationView(getContext());            cursorView.setLayoutParams(new LottieFontViewGroup.LayoutParams(                ViewGroup.LayoutParams.WRAP_CONTENT,                ViewGroup.LayoutParams.WRAP_CONTENT            ));            cursorView.setComposition(composition);            cursorView.loop(true);            cursorView.playAnimation();            addView(cursorView);          }        });  }

每输入一个字母就从assets文件夹中取出一个对应的动画josn来播放，其实也是对于LottieAnimationView的使用。

其实讲了这么多最核心的就是用于动画效果实现的json文件，这个文件是从AE上导出来的一个动画效果的json效果图，以后就可以在AE上完成各种酷炫效果，然后导出成json之后就可以直接通过Lottie来将json文件转化为动画。

以上就是官方的Demo中所有展示的动画效果的分析，说了这么多，我们现在来看一下官网对于Lottie使用方式的介绍。

---

在Lottie中提供了三种类型的播放方式，一种是直接通过LottieAnimationView来播放动画，另一种是支持动画的缓存，可以重复使用的LottieComposition，最后一种就是通过LottieDrawable来播放动画。

结束

另外付一篇关于Lottie的简书文章Lottie开源动画库介绍与使用示例