Lottie介绍

最新推荐文章于 2024-08-13 08:39:13 发布

兜里有糖心里不慌

最新推荐文章于 2024-08-13 08:39:13 发布

阅读量2.3k

点赞数 2

分类专栏： Android 文章标签： android 动画 Lottie

本文链接：https://blog.csdn.net/wqc_CSDN/article/details/56840957

版权

Android 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

前言

之前得知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

}

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

GIF效果图

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

首先在要使用动画的地方在布局文件中使用com.airbnb.lottie.LottieAnimationView这个空间，并指定其使用的动画json文件
在代码中获取控件，并直接通过animationView.setProgress(0f)设置当前动画的进度，使用animationView.playAnimation()来起开动画，使用animationView.cancelAnimation();来停止动画
通过以上两步就可以完成一个动画的创建，最主要的还是在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);
          }
        });
  }