b站banner图动画实现

起因

很早之前就看到网页版b站的banner图有动画效果，鼠标在上面移动banner图也会动起来，形成的效果非常好看，当时只是感觉有意思没有多想，现在就突然想到这件事了就想着干脆自己学习复刻一下吧，毕竟是前端内容，内容都白送了，直接就能照着代码去理解，然后就自己做了一个比较接近的banner图动画。

复刻过程

复刻大致分为三步吧

1.动画原理

我们直接右键banner图然后检查就能找到其对应的代码部分，初步看了下发现，这个动画效果是由一张底图，加很多图层实现的，随着鼠标的移动不同的图层有着不同的运动，外加一些高斯模糊最后形成了动画，在我们移开鼠标后这些图层会缓慢平滑回正，形成美观的视觉效果。

2.素材获取

想制作banner图动画总得有banner图吧，这里我本来是想自己去做一批图片出来的，发现这个分辨率的图片有点难以实现，调了好久做出来的图片都不是很满意，索性就放弃了。既然有现成的，我直接用b站的图片就好了，同样这些东西都放在前端了，右键banner图然后点击“检查”就能找到图片对应所在的位置了。现在ai这么厉害，直接丢给他帮我们批量下载图片即可，有想要图片的可以去文末发的链接获取

3.动画实现

动画实现主要分为三部分，分别是鼠标移入，鼠标移动，鼠标移出。在鼠标移入的时候获取鼠标当前位置，这样后面鼠标移动的时候就可以比较和最初移入的位移差然后根据一个比例去换算得到图片的位移，然后给每个图层都设置不同的移动参数和方向，就能最终形成动画效果了。具体一些设置文末链接里代码都有对应注释，包括绝大部分图片对应。

4.大致效果

obst4cle/bilibili-banner-animate也可以通过此链接获取代码和原图。