前端干货分享 | 逐帧图像滚动效果的动画实现与加载优化
在一些最新最酷炫的网站中，可以看到一种随着鼠标滚动而逐帧播放的图像效果变得非常流行。以苹果 iPhone SE(2020)网站为例，随着鼠标往下滚动，各种眼花缭乱的动画一点点展现出来，让人对这家公司的技术和产品赞叹不已。
这种技术是如何实现的呢？现有浏览器API对视频倒放几乎没有支持，对结合鼠标滚动进行播放速度调整的方案实现难度也比较大，因此直接使用压缩程度最高的视频文件成为了奢望。最直接的方案就是把视频导出成帧序列。如果单纯把视频分解成一张张的图片倒是不难，比如这个教程就使用了20张单帧图片。但是如果图片成百上千张，网站的加载就会变得非常难处理——要么暴力展示图片变得很慢，要么就得设计一些聪明的机制了！
这里介绍我们公司的官网是如何实现的，我们公司主要设计和研发助听器，网站是hiorka.com（服务器在海外）。
如果能打开我们网站可以看到我们的逐帧图像滑动效果总共有两段，分别在landing page开头和结束。
我们的做法是这样的，首先将我们需要展示的视频用最高质量的渲染选项进行输出，并使用ffmpeg转化成一系列的PNG图像（帧率按自己动画需求选取）。
ffmpeg -i input.mp4 -vf fps=$YOUR_FPS output_%04d.png
这一系列的PNG图像通过mogrify命令转成webp，然后通过base64命令得到这一系列图像（按顺序）的base64编码，将这些编码通过管道符“|”连接在一起，并存成.txt文件。
magick mogrify -format webp *.pngls *.webp | xargs -I {} base64 {} >> output.txt
用gzip压缩这个文本得到.gz文件，这样就完成了整套滚动图像的压缩工作。
到了网站前端，在scrollCanvas的地方进行解码，我们的做法是滑动到某处需要解接下来前3张（用户回滚）和后3张图像的码得到更丝滑的体验。
腾讯公司福利 657人发布
