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

前言又到了金三银四的季节了,忙的人特别忙,面试啊,加班啊,闲的人也是特别闲吧,就比如我,天天划水,闲的写文章,做动画,同时呢各种新技术在不断的涌进,推动者软件行业的发展,不要焦虑,不要着急,学好本分,再扩展技能。不多说了,给大家看看做的效果吧。这个是原生的效果这个是做出来的效果动画分解动画分解其实很重要,如果说想模仿一个App的动画及交互效果,一定要仔细的观察他在交互细到放慢每一...
摘要由CSDN通过智能技术生成

前言

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

这个是原生的效果

这个是做出来的效果

动画分解

动画分解其实很重要,如果说想模仿一个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 是否达到
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值