每周一个前端动画之五:B站视频预览动画

2,881 阅读2分钟

春衫犹是,小蛮针线,曾湿西湖雨,转眼来杭州已经小半年了,最忆是杭州,很喜欢的一个城市。因为换厂子的原因,这个系列中断了一段时间,是时候再次更新起来了。闲言少叙,开始我们的正文。

本文分析实现的某些效果,仅仅作为一个思路分享,仅仅作为学习素材使用。

源动画效果

在B站逛的时候发现一个小功能挺好玩的,当鼠标hover到卡片上的时候,可以进行视频的预览。而且在卡片上移动鼠标的时候,预览的位置可以随之改变。如下图,可以很直观地观察到效果:

实现分析

弹幕效果先略去,分析一下预览效果的实现。看到上面的效果,我们可以想到在之前的的文章中用过的时间函数steps(),用这个函数实现了Twitter的点赞动画。本文的效果可以用类似的方式实现,但是有个区别是本文的预览效果是根据鼠标的位置变化的,所以需要用到js进行辅助。大概的步骤实现可以为:

  • 生成视频的截图,截图按照类似精灵图的方式按先后顺序拼到一张图片上
  • 页面根据当前鼠标的位置比例,确定加载精灵图的不同位置为背景

代码实现

这里我们不考虑如何生成视频截图和拼接,有很多工具可以做,也能自己写脚本实现。 先看一下最终获得的精灵图片段:

这里将图片设置为背景,根据鼠标hover位置,修改背景图的位置,伪代码如下:

$(".card").mousemove(function (e) {
    $('.cover').css({
      backgroundImage: "url(./bg-mult.png)",
      backgroundPosition: x + "px " + y + "px",
      backgroundSize: size + "px"
    })
    $('.progress').css({
      width: progress + "%"
    })
  });

上面代码中的x、y、size、progress是根据鼠标位置生成的背景图片的位置信息,原理和代码都很简单,详细的实现可以看一下源码,文末有链接。

效果展示

关键点解读

实现的关键点在于如何将鼠标hover的相对位置,映射到对应的图片背景位置上,可以通过简单的计算,设置背景位置,和精灵图的用法基本一致。

代码已上传到github,欢迎提出Issues。

最后的惯例,贴上我的博客,欢迎关注