lottie_guide.gif
Lottie是什么？
Lottie 是一套跨平臺(tái)的完整解決方案，設(shè)計(jì)師只需要使用 After Effectes 設(shè)計(jì)出動(dòng)畫之后，使用 Lottic 提供的 Bodymovin 將設(shè)計(jì)好的動(dòng)畫導(dǎo)出成 JSON 格式，就可以直接運(yùn)用在 iOS、Android 和 React Native之上，無(wú)需關(guān)心中間的實(shí)現(xiàn)細(xì)節(jié)。
引用一下前輩的Blog地址，如有冒犯，立刻刪除。
站在 Android 開發(fā)的角度，聊聊 Airbnb 的 Lottie?。?！
Lottie開源庫(kù)Github地址
關(guān)于Lottie在Android上的構(gòu)建，及其使用
關(guān)于Lottie的介紹及其簡(jiǎn)單使用上述資料已經(jīng)足矣。
今天我們要做的就是如何在Android中使用Lottie實(shí)現(xiàn)/打造炫酷的引導(dǎo)頁(yè)/介紹頁(yè)。
主要就是ViewPager的頁(yè)面監(jiān)聽與LottieAnimationView動(dòng)畫的聯(lián)動(dòng)，就是ViewPager從當(dāng)前頁(yè)面到下一頁(yè)面，動(dòng)畫的進(jìn)度。
為了提高開發(fā)效率，使用SlidingIntroScreen快速構(gòu)建引導(dǎo)頁(yè)面。
什么是SlidingIntroScreen呢？
可以看我上一篇Blog
開始創(chuàng)建Module，編寫代碼。
GuideActivity.java繼承IntroActivity，實(shí)現(xiàn)IntroActivity的抽象方法。
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.animation.Interpolator;
import android.widget.Scroller;
import androidx.fragment.app.Fragment;
import androidx.viewpager.widget.ViewPager;
import com.airbnb.lottie.LottieAnimationView;
import com.matthewtamlin.sliding_intro_screen_library.buttons.IntroButton;
import com.matthewtamlin.sliding_intro_screen_library.core.IntroActivity;
import com.matthewtamlin.sliding_intro_screen_library.core.LockableViewPager;
import com.yunyang.guidepageslidingintro.fragment.EmptyFragment;
import java.lang.reflect.Field;
import java.util.ArrayList;
import java.util.Collection;
public class GuideActivity extends IntroActivity {
private float[] animationTimes = new float[]{0f, 0.3333f, 0.6666f, 1f, 1f};
private LockableViewPager mLockableViewPager;
private LottieAnimationView mLottieAnimationView;
@Override
protected void onCreate(Bundle savedInstanceState) {
setTheme(R.style.NoActionBar);
super.onCreate(savedInstanceState);
View view = LayoutInflater.from(this).inflate(R.layout.activity_guide, null);
mLottieAnimationView = (LottieAnimationView) view.findViewById(R.id.animation_view);
getRootView().addView(mLottieAnimationView, 0);
mLockableViewPager = (LockableViewPager) findViewById(R.id.intro_activity_viewPager);
hideStatusBar();
setViewPagerScroller();
initEvent();
}
// ViewPager頁(yè)面監(jiān)聽
private void initEvent() {
mLockableViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
setAnimationProgress(position, positionOffset);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
/**
* 動(dòng)畫運(yùn)行與ViewPager聯(lián)動(dòng)
*
* @param position ViewPager當(dāng)前頁(yè)
* @param positionOffset ViewPager下一頁(yè)
*/
private void setAnimationProgress(int position, float positionOffset) {
float startProgress = animationTimes[position];
float endProgress = animationTimes[position + 1];
mLottieAnimationView.setProgress(Lerp(startProgress, endProgress, positionOffset));
}
/**
* 可以用于物體到達(dá)另外一個(gè)目標(biāo)物體之間進(jìn)行平滑過(guò)渡運(yùn)動(dòng)效果
*
* @param start 開始位置
* @param end 結(jié)束位置
* @param t [0,1]
*/
private float Lerp(float start, float end, float t) {
return start + t * (end - start);
}
/**
* 使用反射操作ViewPagerScroller
*/
private void setViewPagerScroller() {
try {
Field scrollerField = ViewPager.class.getDeclaredField("mScroller");
scrollerField.setAccessible(true);
Field interpolator = ViewPager.class.getDeclaredField("sInterpolator");
interpolator.setAccessible(true);
Scroller mScroller = new Scroller(this, (Interpolator) interpolator.get(null)) {
@Override
public void startScroll(int startX, int startY, int dx, int dy, int duration) {
super.startScroll(startX, startY, dx, dy, duration * 7);
}
};
scrollerField.set(mLockableViewPager, mScroller);
} catch (NoSuchFieldException e) {
// Do nothing.
} catch (IllegalAccessException e) {
// Do nothing.
}
}
// SlidingIntroScreen中IntroActivity的抽象方法_生成活動(dòng)頁(yè)面
@Override
protected Collection<? extends Fragment> generatePages(Bundle savedInstanceState) {
final ArrayList<Fragment> pages = new ArrayList<>();
pages.add(EmptyFragment.newInstance());
pages.add(EmptyFragment.newInstance());
pages.add(EmptyFragment.newInstance());
pages.add(EmptyFragment.newInstance());
return pages;
}
// SlidingIntroScreen中IntroActivity的抽象方法_按鈕行為
@Override
protected IntroButton.Behaviour generateFinalButtonBehaviour() {
return new IntroButton.Behaviour() {
@Override
public void setActivity(IntroActivity activity) {
finish();
}
@Override
public IntroActivity getActivity() {
return null;
}
@Override
public void run() {
}
};
}
}
該Activity的布局
<?xml version="1.0" encoding="utf-8"?>
<com.airbnb.lottie.LottieAnimationView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/animation_view"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
app:lottie_rawRes="@raw/walkthrough" />
walkthrough.json（動(dòng)畫文件）文件放于Module下src/main/res/raw文件夾下。
該Activity中EmptyFragment.java
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import com.yunyang.guidepageslidingintro.R;
/**
* Created by YunYang.
* Date: 2019/9/28
* Time: 13:21
* Des: ViewPager+Fragment
*/
public class EmptyFragment extends Fragment {
public EmptyFragment() {
}
public static EmptyFragment newInstance() {
EmptyFragment fragment = new EmptyFragment();
Bundle args = new Bundle();
fragment.setArguments(args);
return fragment;
}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_empty_vp, container, false);
}
}
fragment_empty_vp.xml
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
代碼量很少，效率高。（還是懶的好哦（- 、-））
運(yùn)行效果圖：
lottie_guide.gif
