手把手教你撸最新Youtube视频 拖拽动画效果

前言

又到了金三银四的季节了，忙的人特别忙，面试啊，加班啊，闲的人也是特别闲吧，就比如我，天天划水，闲的写文章，做动画，同时呢各种新技术在不断的涌进，推动者软件行业的发展，不要焦虑，不要着急，学好本分，再扩展技能。不多说了，给大家看看做的效果吧。

这个是做出来的效果

动画分解

动画分解其实很重要，如果说想模仿一个App的动画及交互效果，一定要仔细的观察他在交互细到放慢每一个操作，然后在根据这个动态来写代码。不然最后实现的效果不一样，那岂不是白费了。废话不多说，上代码看步骤。

第一步视频原始状态分析

可以看到，视频最初始的状态是由一个VideoView（可以是surfaceview都行），加上一个list吧，上下布局，但是VideoView呢，他是根据视频尺寸大小动态的调整宽高的，而不是固定的，我们来分析这个过程

1. 第一种下拉的时候如果视频的高度没有达到原生高度，这时候下面的listview 不能消费touch事件，由videoview来消费这个事件，根据当前的下滑Y值进行调整视频宽高比

2. 第二种情况是如果listview已经滑动了一部分这时候进行下拉，但是viewvideo还没有到达真是高度，这时候touch事件还是由listview消费，当他滑动到顶部的时候进行拦截touch 然后传递给videoview

3. 第三中情况，当listview 向下快速滑动的时候会有个惯性的过程，即使手离开手机了 listview还是在滑动，我们称为惯性滑动，到惯性滑动到顶部的时候，如果视频高度没有达到原生高度，这时候要根据这个惯性值来调整调整视频高度。

第二步 视频下滑过程分析

由上图可以看到当我们在下拉视频的时候，视频的顶部 左右边距 机listview 都发生改变，同时videoview高度也发生了变化。

1. 下拉的时候margin的 left right top bottom值都在发生改变，videoview 的高度也在发送改变，同时listview 渐渐消失，变成白色的背景，listview的高度在逐渐变小，同时可以看到在Z轴也发生了改变。可能图片不清晰，看不出Z轴的变换

2. 下拉到listview消失的时候，这时候videoview的宽度发生改变，同时控制器出现。这时候videoview宽度还是在一直的缩小。

3. 当达到了最小视频悬浮层的时候，下拉整个视图越来越透明，同时整个布局在根据手势在下滑。

第三步 视频上滑过程分析

上滑过程其实就是把下滑过程反过来而已，这里我就不再过多追溯了。

撸代码

主要的逻辑在上面都有，下面我就简单的对上面的逻辑进行分析一下，整体代码想要的老铁私信我留言都行

如何对listview和videoview进行touch的分发

这里我使用的是一个LinearLayout作为父布局进行组装这两个子view，然后根据viewgroup的dispatchTouchEvent方法里面加判断进行事件的分发。 上这些代码很多我就不详细赘述了，其实我这里还是有很多可以优化的地方，这只是个demo。

• 和上面动画分解的逻辑一致，一看videoview 是否达到最大值，listview是否在顶部。

• listview（我这边用的时候recyclerview都一样）是否在顶部可以通过调用addOnScrollListener（）来判断是否是第一个可见的item *判断videoview是否达到最大值呢，根据视频的宽高来。可以通过Mediaplayer来获取，

如何动态的跳转左右边距及视频宽高

这里我用了一个包装类拿到当前view的layoutParams，然后通过touchEvent 拿到滑动的值来动态的修改当前view 的宽高和margin值，这个代码我就补贴了，就是set get方法。

• 第一步下滑调整margin的左右上下，及videoview 的高度。

• 第二步继续下滑调整videoview的宽度

• 第三步下滑隐藏整体view

ending

花了个把小时写的东西，希望给老铁们带来的是知识的储备而不是时间的浪费。不早了不早了下班了，想要代码的老铁可以私信 留言都行。