如何打造旋转的瓶子效果？

Question

我只是想请教一下这个网站上旋转瓶子的滚动效果是如何做到如此流畅的：https://takeboost.com/ 这是 svg 文件还是在滚动时加载的帧？

提前致谢！

Answer 1

使用F12 > Network并刷新页面，我们可以看到JavaScript加载了299.jpg，然后滚动时将这些图像绘制到canvas。

您也可以使用F12 > Network查找相关的JavaScript代码：

1. 将鼠标悬停在 F12 > Network
中这些图像请求的 Initiator 列
2. 点击第一个可点击的js link
3. 单击“Pretty-print”，加载这些图像的代码将突出显示。