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

Question

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

Answer 1

这是我能够收集到的:

• 在 Trackpad.js 文件中添加了交互监听器。鼠标拖动、键盘事件、触摸等事件的监听器。所有这些都计算一个value变量。
• Trackpad.js 的这个value 变量就是用于在main.js的update方法中调整camera位置文件。
• 如果我理解的话，将呈现 3 个主要 View 它正确:ScrollView、ScaleView、RocketView。所有这些在 main.js 的 init 方法中启动。但他们都是在 fvh.js 文件中定义。
• 这三个 View 中的每一个都有一个updatePosition 方法以 camera.y 或 mainScrollPosition 作为范围。这些 updatePosition 方法在与 main.js 文件相同的 update 方法。

• 然后是 ScrollMap.js，其中包含所有 3 个 View 的大量位置数据，例如它包含以下格式的 ScrollView 数据:mcxxx:{view:'nameofelement',depth:xx,startFrame:xxx,endFrame:xxx,position:[xxx,...]}等

• main.js 文件中还定义了一个 sectionLandPositions 变量，这也很有趣，因为这是随后在 中使用的变量同一文件中的 onMenuItemPressed 方法进行补间并将特定部分置于 View 中。

• 魔术基本上发生在每个 View 的 updatePosition 方法中，以及如何在 Trackpad.js 中计算值。这就是我留给您进一步调试并将其带回家的地方。 :)

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

附言感谢Waste-Creative感谢您创建这个信息丰富且引人入胜的网站。

T