之前得知Airbnb發(fā)布了一款吊炸天的動畫庫，趕緊去Git-Hub上瞅了一眼，由于提供Demo，所以很便于我們學(xué)習(xí)，一下是對Lottie官方Demo的一個解讀，介紹一些這個吊炸天的動畫開源庫，他同時支持Android，iOS和React Native.
官網(wǎng)地址
首先項目結(jié)構(gòu)很簡單易懂 
在assets文件夾中放著最為重要的動畫中要用到的json文件。通過AndroidManifest文件可以找到主界面是MainActivity，但是在MainActivity中其實只是加載了一個ListFragment，所以我們先來看一下ListFragment中的內(nèi)容。
首先來看一下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/colorapp:lottie_fileName這個屬性所指定的json文件其實就是動畫中所用到的各種數(shù)據(jù)，變換坐標(biāo)等。在布局文件中使用com.airbnb.lottie.LottieAnimationView這個控件之后，我們來看一下對應(yīng)的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的引導(dǎo)頁 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和對應(yīng)的FileAdapter}以上這些代碼就可以實現(xiàn)一個下邊這樣的動畫效果
這樣我們先來簡單梳理一下使用Lottie的步驟：
首先在要使用動畫的地方在布局文件中使用com.airbnb.lottie.LottieAnimationView這個空間，并指定其使用的動畫json文件
在代碼中獲取控件，并直接通過animationView.setProgress(0f)設(shè)置當(dāng)前動畫的進(jìn)度，使用animationView.playAnimation()來起開動畫，使用animationView.cancelAnimation();來停止動畫
通過以上兩步就可以完成一個動畫的創(chuàng)建，最主要的還是在json動畫文件上。
至于另外的兩個動畫效果，也是同樣的實現(xiàn)方式。在LottieFontViewGroup這個自定義控件中，其實只是將每一個輸入的英文字母作為單獨的animationView來播放對應(yīng)的單獨的動畫。
下面就是他的初始化方法：
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文件夾中取出一個對應(yīng)的動畫josn來播放，其實也是對于LottieAnimationView的使用。
其實講了這么多最核心的就是用于動畫效果實現(xiàn)的json文件，這個文件是從AE上導(dǎo)出來的一個動畫效果的json效果圖，以后就可以在AE上完成各種酷炫效果，然后導(dǎo)出成json之后就可以直接通過Lottie來將json文件轉(zhuǎn)化為動畫。
以上就是官方的Demo中所有展示的動畫效果的分析，說了這么多，我們現(xiàn)在來看一下官網(wǎng)對于Lottie使用方式的介紹。
在Lottie中提供了三種類型的播放方式，一種是直接通過LottieAnimationView來播放動畫，另一種是支持動畫的緩存，可以重復(fù)使用的LottieComposition，最后一種就是通過LottieDrawable來播放動畫。
另外付一篇關(guān)于Lottie的簡書文章Lottie開源動畫庫介紹與使用示例
新聞熱點
疑難解答
