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/colorapp: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效果圖