pixi.js：如何在网站flashvhtml.com上完成滚动？

Question

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

Answer 1

这是我能够收集到的：

• 交互的监听器添加在Trackpad.js文件中。鼠标拖动，键盘事件，触摸等事件的监听器。所有这些都计算value变量。
• 然后是value的{​​{1}}变量 用于调整Trackpad.js camera方法中的update位置 文件。
• 如果我理解，有3个主要视图正在呈现 它正确：main.js，ScrollView，ScaleView。所有这些 在RocketView的{​​{1}}方法内启动。但他们都是 在init文件中定义。
• 这三个视图中的每一个都有一个 采用main.js或fvh.js的{​​{1}}方法 参数。这些updatePosition方法在内部调用 camera.y文件的mainScrollPosition方法相同。

• 然后有一个updatePosition，其中包含所有3个视图的大量位置数据，例如它包含以下格式的update数据： main.js等。

• 此外，ScrollMap.js文件中定义了一个ScrollView变量也非常有趣，因为这是在同一文件中的mcxxx:{view:'nameofelement',depth:xx,startFrame:xxx,endFrame:xxx,position:[xxx,...]}方法中使用的补间并将某个部分放入视野。

• 所以魔术基本上发生在每个视图的sectionLandPositions方法中以及如何在main.js中计算值。这是我让你进一步调试并带回家的地方。 ：）

经过审查的文件包括：onMenuItemPressed，updatePosition，Trackpad.js，Trackpad.js。希望你觉得它很有用。

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

Ť

Answer 2

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

• Tween one：Pans Camera连续缓慢下降。
• 补间二：等到x，匆匆淡化精灵y，淡化精灵，...

确保，你不会玩＃39;创建它们之后的补间，但手动调整时间（基于滚动位置）。

您可以使用一些用于pixi的tweeing框架：Greensocks，Impact，tween.js 并且在html5gamedevs forum.

上对此进行了讨论