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

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

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

源动画效果

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

实现分析

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

• 生成视频的截图，截图按照类似精灵图的方式按先后顺序拼到一张