内容简介:同样是新闻客户端,为什么你这么优秀。好了,吐槽完毕,看看demo的效果。跟原效果还是有点差别的。
还是上效果图吧(渣渣千元机,有点卡)
同样是新闻客户端,为什么你这么优秀。
好了,吐槽完毕,看看demo的效果。
跟原效果还是有点差别的。
拆解一下页面效果吧:
- 新闻页面视频滚动到屏幕中间自动播放(wifi下,demo没有判断)
- 点击视频,页面切换到视频列表页面,期间视频不会停止播放,平滑过渡到第二个页面
- 视频列表页面滑动后,播放第一个完全可见的视频(个人理解,理解错了大佬不要打我)
- 视频列表页面,视频播放时,点击评论数,切换到评论页面,效果同上
- 视频列表页面,视频播放时,点击其他item任意区域,该item滑到顶部,并播放视频
无缝续播这里不做讲解(其实我也不会呀...),做过播放器的应该都懂吧,原理大致就是:
解码器动态关联不同的渲染视图(RenderView),比如使用MediaPlayer动态关联SurfaceView,就如同一个电脑主机不断连接不同的显示器。 复制代码
PS:这里注意一下,render不要重置,不然会闪屏哦
Demo中用的是这个播放器 PlayerBase ,高度解耦(不像其他播放器一样,对布局文件有限制),支持各种自定义,最大的好处的就是提供能无缝续播助手(续播的话不要使用mediaPlayer,会出现问题)。
播放器相关
这里还是简单说下播放器怎么用吧,不需要改界面的话(demo中略微做了修改),直接拷下面红色方框中的类,在Application里面进行配置就可以使用啦(ijk,exo需要引入对应的库哦,demo中ijk不支持https,所以视频可能不能播放)。
无缝续播相关都在 RelationAssist类里。续播的话直接调用
AssistPlayer.get().play(mContainer, null); 复制代码
就可以在不同的容器内(即上面的mContainer)继续播放之前的内容了。 需要自定义界面或者有其他问题的参考这里和 demo ,有问题的加群问群主吧。
新闻列表页
用RecyclerView实现,这里说一下页面滑动对视频item的处理:当页面停止滑动后,判断是屏幕中央是否有可见的视频item,有则开始播放。同时,判断之前是否有在播放的视频滑出了界面,有则停止播放。
//伪代码 if (newState == SCROLL_STATE_IDLE) { //滑动屏幕中间开始 LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager(); int first = manager.findFirstVisibleItemPosition(); int last = manager.findLastVisibleItemPosition(); for (int i = first; i <= last; i++) { if (isVideo) { //列表视频 if (isCenter && !AssistPlayer.get().isPlaying()) { ImageView imageView = view.findViewById(R.id.adapter_video_image); imageView.performClick(); break; } } } //滑出屏幕高度一半停止播放 int playPosition = mAdapter.getPlayPosition(); if (playPosition != -1) { if (isOutSide) { stopPlay(); } } 复制代码
视频列表页
同样也是RecyclerView实现,这里滑动播放逻辑跟新闻列表页有点不同(纯属个人理解,理解错了各位大佬别打我)。进入页面播放第一个视频,上滑会加载更多(demo里面没有实现)。上下滑动停止后,会播放当前屏幕完全可见的第一个item的视频。并且,当播放视频时,点击其他item的任意位置,该item会滑动到顶部并播放视频。当前视频播放完毕后,如果列表页后面还有视频,会自动播放下一个,并将该item滑到页面顶部。当退出视频列表页时,如果播放的不是第一个视频,则不需要过渡动画。 滑动监听:
if (newState == SCROLL_STATE_IDLE) { LinearLayoutManager manager = (LinearLayoutManager) recyclerView.getLayoutManager(); int first = manager.findFirstVisibleItemPosition(); int pos = manager.findFirstCompletelyVisibleItemPosition(); if (pos != mAdapter.getPlayPosition()) { View view = mRecycler.getChildAt(pos - first); ImageView imageView = view.findViewById(R.id.adapter_video_list_image); imageView.performClick(); } } 复制代码
因为已经对滑动进行了监听,所以自动播放下一个视频可以通过滑动item来实现:监听视频的播放事件,当视频播放完毕后,判断该视频是否是最后一个,不是则滑到屏幕顶部,播放视频。 PS:滑动要调用smoothScroll方法,不能直接调scroll。
评论页
评论页只是一个播放器容器和一个显示评论数据的recyclerView(demo里面没有做评论盖楼),这里不细说,详见 demo 。
视频平滑过渡切换
重点来了,第一眼看到视频平滑过渡切换页面,想到的就是google在5.0版本提供activity切换的共享元素动画,但实操之后发现效果不怎么理想。
效果如图:
也试过,去掉系统的默认动画,将主题设置为透明,自己手动平移,放缩view,还是有点问题(可能是我姿势不对)。还是会有上面的闪屏问题。
没办法罗,只能在当前activity里面进行过渡了。这里我的做法是在根布局添加一个fragment。这里着重说一下要注意的几个地方吧:
- 需要重写onBackPressed(),区分是否横屏模式,是否显示了评论页,列表视频页,还是普通新闻页。
- 列表视频页,普通新闻页都需要记录下当前播放的item的position,退出页面会用到。
- 列表视频,评论页请求回来的网络数据不能过早显示。
- 过渡动画需要在view绘制好后才开始执行。
下面是页面过渡的过程:
- 获取view的属性(宽高、位置),新闻的信息,并传给fragment
- fragment背景设置为透明,改变关联的view属性,并开始动画,还原背景色和view的属性,这里有个地方需要特别留意,如果你的播放容器跟我一样是放在recyclerView里面的,那么位移的view必须是整个item!整个item!整个item!(子view总不可能跑出父view的范围吧...)
- 动画完毕后显示加载的网络数据(按个人需求进行修改)
- 退出fragment的时候,将动画反转一遍就OK啦。要注意当前播放的视频是否是进来播放的那个,是的话才需要执行动画哦。
FragmentTransaction transaction = getFragmentManager().beginTransaction(); Bundle bundle = new Bundle(); bundle.putParcelable("attr", attr); bundle.putParcelable("news", bean); commentFragment.setArguments(bundle); commentFragment.setOnCloseClickListener(this); transaction.add(R.id.fragment_video_list_comment_container, commentFragment); transaction.commit(); } 复制代码
mContainer.getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() { @Override public boolean onPreDraw() { //绘制完毕,开始执行动画 mContainer.getViewTreeObserver().removeOnPreDrawListener(this); mContainer.getLocationOnScreen(location); mContainer.setTranslationX(mAttr.getX() - location[0]); mContainer.setTranslationY(mAttr.getY() - location[1]); mContainer.setScaleX(mAttr.getWidth() / (float) mContainer.getMeasuredWidth()); mContainer.setScaleY(mAttr.getHeight() / (float) mContainer.getMeasuredHeight()); mRecycler.setAlpha(0); mTextView.setAlpha(0); mClose.setAlpha(0); mCommentNum.setAlpha(0); mContainer.animate().translationX(0).translationY(0).scaleX(1).scaleY(1).setDuration(DURATION); mRecycler.animate().alpha(1).setDuration(DURATION); mTextView.animate().alpha(1).setDuration(DURATION); mClose.animate().alpha(1).setDuration(DURATION); mCommentNum.animate().alpha(1).setDuration(DURATION); AssistPlayer.get().play(mContainer, null); return true; } }); 复制代码有疑问(播放器相关的点 这里
)或者demo有bug的可以留言,看到会回复的。
附上源码(Kotlin版可能会有一点语法问题...)
如需更多详细的效果,可看下一篇博客
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 仿抖音 APP 视频切换和点赞效果
- 使用vue-i18n实现多语言切换效果
- vue+vuex+axios 仿原生app切换效果和路由缓存实践
- VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容
- Egret场景切换管理类切换和单例使用方法
- Spring项目中使用两种方法动态切换数据源,多数据源切换
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。