pixi.js: 网站flashvhtml.com 的滚动是如何完成的？

pixi.js: how is the scrolling done on the website flashvhtml.com?

如何在 flashvhtml.com 上创建页面滚动？顶部的链接如何触发滚动以及其他 'sub animation' 事件如何与滚动背景相关联？

一个简单的方法是添加 tweens，然后使用 scroll/drag 输入和链接在补间的时间轴中移动。

请确保您在创建补间动画后不'play'它们，而是手动调整时间（基于滚动位置）。

有一些推文框架可以用于 pixi：Greensocks, Impact, tween.js html5gamedevs forum.

上对此进行了讨论

这是我能够收集到的：

在 Trackpad.js 文件中添加了交互侦听器。鼠标拖动、键盘事件、触摸等事件的监听器。所有这些都在计算一个 value 变量。
Trackpad.js的这个value变量就是用于在main.js的update方法中调整camera位置文件。
如果我理解的话，有 3 个主要视图正在渲染它正确：ScrollView、ScaleView、RocketView。所有这些在 main.js 的 init 方法中启动。但他们都是在 fvh.js 文件中定义。
这三个视图中的每一个都有一个 updatePosition 方法以 camera.y 或 mainScrollPosition 作为范围。这些 updatePosition 方法在 main.js 文件的相同 update 方法。
然后有一个 ScrollMap.js，其中包含所有 3 个视图的大量位置数据，例如它包含 ScrollView 格式的数据： mcxxx:{view:'nameofelement',depth:xx,startFrame:xxx,endFrame:xxx,position:[xxx,...]}等
main.js 文件中还定义了一个 sectionLandPositions 变量，这也很有趣，因为这是随后在 onMenuItemPressed 方法中使用的变量对同一个文件进行补间并将某个部分显示在视图中。
所以魔术基本上发生在每个视图的 updatePosition 方法中以及如何在 Trackpad.js 中计算值。这就是我留给您进一步调试并将其带回家的地方。 :)

正在审查的文件是：Trackpad.js、fvh.js、ScrollMap.js、main.js。希望你觉得这一切都有用。

P.S。感谢 Waste-Creative 创建了这个信息丰富且引人入胜的网站。