前言
又到了金三银四的季节了,忙的人特别忙,面试啊,加班啊,闲的人也是特别闲吧,就比如我,天天划水,闲的写文章,做动画,同时呢各种新技术在不断的涌进,推动者软件行业的发展,不要焦虑,不要着急,学好本分,再扩展技能。不多说了,给大家看看做的效果吧。
这个是原生的效果
这个是做出来的效果
动画分解
动画分解其实很重要,如果说想模仿一个App的动画及交互效果,一定要仔细的观察他在交互细到放慢每一个操作,然后在根据这个动态来写代码。不然最后实现的效果不一样,那岂不是白费了。废话不多说,上代码看步骤。
第一步视频原始状态分析
可以看到,视频最初始的状态是由一个VideoView(可以是surfaceview都行),加上一个list吧,上下布局,但是VideoView呢,他是根据视频尺寸大小动态的调整宽高的,而不是固定的,我们来分析这个过程
第一种下拉的时候如果视频的高度没有达到原生高度,这时候下面的listview 不能消费touch事件,由videoview来消费这个事件,根据当前的下滑Y值进行调整视频宽高比
第二种情况是如果listview已经滑动了一部分这时候进行下拉,但是viewvideo还没有到达真是高度,这时候touch事件还是由listview消费,当他滑动到顶部的时候进行拦截touch 然后传递给videoview
第三中情况,当listview 向下快速滑动的时候会有个惯性的过程,即使手离开手机了 listview还是在滑动,我们称为惯性滑动,到惯性滑动到顶部的时候,如果视频高度没有达到原生高度,这时候要根据这个惯性值来调整调整视频高度。
第二步 视频下滑过程分析
由上图可以看到当我们在下拉视频的时候,视频的顶部 左右边距 机listview 都发生改变,同时videoview高度也发生了变化。
下拉的时候margin的 left right top bottom值都在发生改变,videoview 的高度也在发送改变,同时listview 渐渐消失,变成白色的背景,listview的高度在逐渐变小,同时可以看到在Z轴也发生了改变。可能图片不清晰,看不出Z轴的变换
下拉到listview消失的时候,这时候videoview的宽度发生改变,同时控制器出现。这时候videoview宽度还是在一直的缩小。
当达到了最小视频悬浮层的时候,下拉整个视图越来越透明,同时整个布局在根据手势在下滑。
第三步 视频上滑过程分析
上滑过程其实就是把下滑过程反过来而已,这里我就不再过多追溯了。
撸代码
主要的逻辑在上面都有,下面我就简单的对上面的逻辑进行分析一下,整体代码想要的老铁私信我留言都行
如何对listview和videoview进行touch的分发
这里我使用的是一个LinearLayout作为父布局进行组装这两个子view,然后根据viewgroup的dispatchTouchEvent方法里面加判断进行事件的分发。网上这些代码很多我就不详细赘述了,其实我这里还是有很多可以优化的地方,这只是个demo。
和上面动画分解的逻辑一致,一看videoview 是否达到最大值,listview是否在顶部。
listview(我这边用的时候recyclerview都一样)是否在顶部可以通过调用addOnScrollListener()来判断是否是第一个可见的item *判断videoview是否达到最大值呢,根据视频的宽高来。可以通过Mediaplayer来获取,
//分发recyclerview和videoview事件
1 @Override
2 public boolean dispatchTouchEvent(MotionEvent ev) {
3 y = ev.getY();
4 int pointerId = ev.getPointerId(0);
5 switch (ev.getAction()) { case MotionEvent.ACTION_DOWN:
6 mDownY = ev.getY();
7 Log.i(TAG, "dispatchTouchEvent: ACTION_DOWN " + mDownY); if (mVelocityTracker == null) {
8 mVelocityTracker = VelocityTracker.obtain();
9 } else {
10 mVelocityTracker.clear();
11 }
12 mVelocityTracker.addMovement(ev); break; case MotionEvent.ACTION_MOVE: float dDownY = y - mDownY;
13
14 Log.i(TAG, "dispatchTouchEvent: " + mDownY + " " + y);
15 mVelocityTracker.addMovement(ev);
16 mVelocityTracker.computeCurrentVelocity(1000); if ((mDownY >= (layoutPVideo.getHeight() + layoutPVideo.getMarginTop())) && dDownY > 0 && layoutPVideo.getHeight() < originalHeight + 600 && (isList2Top)) {
17 //判断点击的范围,及当前视频尺寸大小。listview是否已经滑到顶部
18
19 layoutPVideo.setHeight((int) (layoutPVideo.getHeight() + dDownY));
20 Log.i(TAG, "dispatchTouchEvent: xia " + dDownY);
21 mDownY = y; return true;
22 } else if ((mDownY >= (layoutPVideo.getHeight() + layoutPVideo.getMarginTop())) && dDownY <= 0 && layoutPVideo.getHeight() >= originalHeight) {
23 //调整视频view 高度
24 layoutPVideo.setHeight((int) (layoutPVideo.getHeight() + dDownY));
25 //可以加个弹性动画显得更流畅
26 Log.i(TAG, "dispatchTouchEvent: shang " + dDownY);
27 mDownY = y; return true;
28 } break; case MotionEvent.ACTION_UP: float yVelocity = VelocityTrackerCompat.getYVelocity(mVelocityTracker,
29 pointerId);
30 Log.i("VelocityTrackerCompat", "Y velocity: " +
31 yVelocity);
32 if (yVelocity >= 5685 && layoutPVideo.getHeight() < originalHeight + 600) {
33 //判断惯性加速度根据惯性加速度进行引导视频大小到底部
34 headMoveToMax();
35 } else {
36 Log.i(TAG, "headMoveToMax: not come in" + " " + (layoutPVideo.getHeight() < originalHeight + 600));
37 } break; case MotionEvent.ACTION_CANCEL:
38 mVelocityTracker.recycle(); break;
39 } return super.dispatchTouchEvent(ev);
40 }
如何动态的跳转左右边距及视频宽高
这里我用了一个包装类拿到当前view的layoutParams,然后通过touchEvent 拿到滑动的值来动态的修改当前view 的宽高和margin值,这个代码我就补贴了,就是set get方法。
第一步下滑调整margin的左右上下,及videoview 的高度。
第二步继续下滑调整videoview的宽度
第三步下滑隐藏整体view
1private void updateVideoView(int m, int originY) {
2
3 canHide = false; if (mDetailView.getHeight() == 0) { if (layoutPVideoView.getMarginRight() <= videoWidthPx && 0 < originY) {
4
5
6 int value = layoutPVideoView.getMarginRight() + originY * 9;//加速缩小 if (value > videoWidthPx) {
7 value = (int) videoWidthPx;
8 } float percent = (videoWidthPx - value) / videoWidthPx; if (0 > percent) {
9 percent = 0.f;
10 }
11 int videoHeight = (int) (videoMinHeightPx * (1 - percent));
12 int videoMTop = (int) (allMinScrollY * (1 - percent));
13 layoutPVideo.setMarginTop((int) (allScrollY + videoMTop));
14 layoutPVideo.setHeight((int) (videoHeightPx - videoHeight));
15 layoutPVideoView.setMarginRight(value);
16
17
18
19 canHide = true;
20 Log.i(TAG, "updateVideoView: "+isBottomMax); if (layoutPVideoView.getMarginRight() >= videoWidthPx) { if (isBottomMax) {
21
22 layoutPVideo.setMarginTop(m); float v = m - (allScrollY + allMinScrollY);
23 mVideoView.setAlpha(1.0f - v / swipePx2Dismiss); if (v >= swipePx2Dismiss) { setVisibility(INVISIBLE);
24 mVideoView.setAlpha(1f);
25 }
26 }
27 } return;
28 }//缩小视频右边距 if (layoutPVideoView.getMarginRight() >= 0 && 0 > originY) {
29 int value = layoutPVideoView.getMarginRight() + originY * 9;
30// if (0 > value) {
31// value = 0;
32// } float percent = (videoWidthPx - value) / videoWidthPx; if (0 > percent) {
33 percent = 0.f;
34 }
35 int videoHeight = (int) (videoMinHeightPx * (1 - percent));
36 int videoMTop = (int) (allMinScrollY * (1 - percent));
37 layoutPVideo.setMarginTop((int) (allScrollY + videoMTop));
38 layoutPVideo.setHeight((int) (videoHeightPx - videoHeight));
39 layoutPVideoView.setMarginRight(value); return;
40 }//放大视频右边距 if (layoutPVideoView.getMarginRight() >= 0 && originY > 0) { return;
41 }//最小化阶段
42
43
44 } if (layoutPVideo.getMarginTop() <= 0 && originY < 0) {
45 m = 0;
46 }//最大化阶段 float percent = (allScrollY - m) / allScrollY; if (0 > percent) {
47 percent = 0; return;
48
49 }
50
51 int videoHeight = (int) (originalHeight - (originalHeight - videoHeightPx) * (1 - percent));
52 int listHeight = (int) ((originListHeight) * (percent));
53 layoutPVideo.setMarginTop(m);
54 layoutPVideo.setHeight(videoHeight);
55 layoutPList.setMarginBottom((int) (marginBottomPx * (1 - percent)));
56 layoutPList.setHeight(listHeight);
57 layoutPCoverView.getView().setAlpha((1 - percent));
58 layoutPContainer.setMarginRight((int) (marginRLPx * (1 - percent)));
59 layoutPContainer.setMarginLeft((int) (marginRLPx * (1 - percent)));
60 int mr = (int) ((1f - percent) * marginPx); //VideoView右边和详情View 上方的margin
61 layoutPVideo.setZ(mr / 2);//这个是Z轴的值,悬浮效果
62
63 }
ending
花了个把小时写的东西,希望给老铁们带来的是知识的储备而不是时间的浪费。不早了不早了下班了,想要代码的老铁可以私信 留言都行。
作者:cuieney
链接:https://juejin.im/post/5c724ddfe51d4544fe638217
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。