Lottie介绍

2019-11-07 23:59:43

字体：大中小

来源：转载

供稿：网友

前言

之前得知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"/>  </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); } }); }

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

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

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

官网上的介绍很简单