在一些最新最酷炫的网站中,可以看到一种随着鼠标滚动而逐帧播放的图像效果变得非常流行。以苹果 iPhone SE(2020)网站为例,随着鼠标往下滚动,各种眼花缭乱的动画一点点展现出来,让人对这家公司的技术和产品赞叹不已。 这种技术是如何实现的呢?现有浏览器API对视频倒放几乎没有支持,对结合鼠标滚动进行播放速度调整的方案实现难度也比较大,因此直接使用压缩程度最高的视频文件成为了奢望。最直接的方案就是把视频导出成帧序列。如果单纯把视频分解成一张张的图片倒是不难,比如这个教程就使用了20张单帧图片。但是如果图片成百上千张,网站的加载就会变得非常难处理——要么暴力展示图片变得很慢,要么就得设...