分享:用“视频”来打造你的Splash闪屏页

作者: 杜冷丁
github: https://github.com/watire/

实现动画闪屏页一般有4种方式:

方式 优点 缺点
Gif 简单 帧率高时容易OOM
VectorDrawable/SVG/PATH动画 速度快,内存小 速度快,内存小
系统动画 系统动画 系统动画
视频 表现内容丰富 MP4尺寸略大
先来效果图,养养眼~:
素材来自滴滴出行

素材来自虾米音乐

素材来自 滴滴出行 && 虾米音乐

原来打算学习一下利用Path绘制的LOGO动画启动页,结果心血来潮想起来了这个素材,真是感慨我的思维转变之快啊,于是乎就有了此篇文章,废话不多说,直接上干货。
  • 由VideoView(全屏)+ImageView组成ViewPager的Item,绑定至Fragment
  • 将Fragment装入FragmentStatePagerAdapter
  • 将adapter装载至viewPager;
  • 放入适量视频文件、图片素材等佐料后起锅...(好像又跑偏了啊喂),对于viewpager fragment这些基本组件,大家应该信手拈来了,我就说说视频文件如何播放的,翻开fragment,来看看每个item都有什么(敲黑板,这个是重点):

布局:

  
  
    
    
        
      
        

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即可设置视频路径,此处加载raw文件夹中资源,实现MediaPlayer.OnPreparedListener进行播放。

@Override
public void onPrepared(MediaPlayer mediaPlayer) {
    if (mVideoView != null) {
        mVideoView.requestFocus();
        mVideoView.setOnCompletionListener(this);
        mVideoView.seekTo(0);
        mVideoView.start();
    }
    return;
}

然后实现MediaPlayer.OnCompletionListener, MediaPlayer.OnErrorListener来处理播放完成(控制viewpager跳转至下一页或已是最后一页,则关闭页面)和播放失败时的情况。

@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;
}

另外,需要实现onPause() 和onResume(),在页面中断时停止播放、恢复时继续播放:

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()时停止播放(敲黑板,这个必考啊):

public void onDestroy() {
    super.onDestroy();
    if (mVideoView != null) {
        mVideoView.stopPlayback();
    }
    return;
}

ps. 推荐个github demo 运行神器:dryrun ,使用方法:
连接手机;
执行命令:dryrun https://github.com/watire/xiamivd.git;
等待下载、安装。

是不是很简单呢,当然要先安装dryrun~~~~~!


项目地址:https://github.com/rivenlee0/rivennews-master

如果您感觉满意, 请记得点赞,多谢支持!
也可以加我的QQ或微信:741547004 || rivenlee

你可能感兴趣的:(分享:用“视频”来打造你的Splash闪屏页)