作者: 杜冷丁
github: https://github.com/watire/
實(shí)現(xiàn)動(dòng)畫閃屏頁一般有4種方式:
| 方式 | 優(yōu)點(diǎn) | 缺點(diǎn) |
|---|---|---|
| Gif | 簡單 | 幀率高時(shí)容易OOM |
| VectorDrawable/SVG/PATH動(dòng)畫 | 速度快,內(nèi)存小 | 速度快,內(nèi)存小 |
| 系統(tǒng)動(dòng)畫 | 系統(tǒng)動(dòng)畫 | 系統(tǒng)動(dòng)畫 |
| 視頻 | 表現(xiàn)內(nèi)容豐富 | MP4尺寸略大 |
先來效果圖,養(yǎng)養(yǎng)眼~:

素材來自滴滴出行

素材來自蝦米音樂
素材來自 滴滴出行 && 蝦米音樂
原來打算學(xué)習(xí)一下利用Path繪制的LOGO動(dòng)畫啟動(dòng)頁,結(jié)果心血來潮想起來了這個(gè)素材,真是感慨我的思維轉(zhuǎn)變之快啊,于是乎就有了此篇文章,廢話不多說,直接上干貨。
- 由VideoView(全屏)+ImageView組成ViewPager的Item,綁定至Fragment
- 將Fragment裝入FragmentStatePagerAdapter
- 將adapter裝載至viewPager;
- 放入適量視頻文件、圖片素材等佐料后起鍋...(好像又跑偏了啊喂),對于viewpager fragment這些基本組件,大家應(yīng)該信手拈來了,我就說說視頻文件如何播放的,翻開fragment,來看看每個(gè)item都有什么(敲黑板,這個(gè)是重點(diǎn)):
布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.watire.xiamivd.FullScreenVideoView
android:id="@+id/vvSplash"
android:layout_width="fill_parent"
android:layout_height="fill_parent" />
<ImageView
android:id="@+id/ivSlogan"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="20dp"
android:src="@drawable/slogan_1"
android:scaleType="fitEnd"
android:layout_alignParentEnd="true" />
</RelativeLayout>
fragment:
mVideoView = findViewById(R.id.vvSplash);
mvSlogan = findViewById(R.id.ivSlogan);
mVideoView.setOnErrorListener(this);
mVideoView.setOnPreparedListener(this);
mVideoView.setVideoPath("android.resource://" + getActivity().getPackageName() + "/" + R.raw.xxx);
mvSlogan.setImageResource(imgRes);
給videoView setVideoPath即可設(shè)置視頻路徑,此處加載raw文件夾中資源,實(shí)現(xiàn)MediaPlayer.OnPreparedListener進(jìn)行播放。
@Override
public void onPrepared(MediaPlayer mediaPlayer) {
if (mVideoView != null) {
mVideoView.requestFocus();
mVideoView.setOnCompletionListener(this);
mVideoView.seekTo(0);
mVideoView.start();
}
return;
}
然后實(shí)現(xiàn)MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener來處理播放完成(控制viewpager跳轉(zhuǎn)至下一頁或已是最后一頁,則關(guān)閉頁面)和播放失敗時(shí)的情況。
@Override
public void onCompletion(MediaPlayer mediaPlayer) {
FragmentActivity localFragmentActivity = getActivity();
if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
((FullscreenActivity) localFragmentActivity).next(position);
}
}
@Override
public boolean onError(MediaPlayer mediaPlayer, int i, int i1) {
FragmentActivity localFragmentActivity = getActivity();
if ((localFragmentActivity != null) && ((localFragmentActivity instanceof FullscreenActivity))) {
((FullscreenActivity) localFragmentActivity).next(position);
}
return true;
}
另外,需要實(shí)現(xiàn)onPause() 和onResume(),在頁面中斷時(shí)停止播放、恢復(fù)時(shí)繼續(xù)播放:
public void onResume() {
super.onResume();
if (mHasPaused) {
if (mVideoView != null) {
mVideoView.seekTo(mVideoPosition);
mVideoView.resume();
}
}
return;
}
public void onPause() {
super.onPause();
if (mVideoView != null) {
mVideoPosition = mVideoView.getCurrentPosition();
}
mHasPaused = true;
}
在onDestroy()時(shí)停止播放(敲黑板,這個(gè)必考?。?
public void onDestroy() {
super.onDestroy();
if (mVideoView != null) {
mVideoView.stopPlayback();
}
return;
}
ps. 推薦個(gè)github demo 運(yùn)行神器:dryrun ,使用方法:
連接手機(jī);
執(zhí)行命令:dryrun https://github.com/watire/xiamivd.git;
等待下載、安裝。
是不是很簡單呢,當(dāng)然要先安裝dryrun~~~~~!
項(xiàng)目地址:https://github.com/rivenlee0/rivennews-master