如何在 flashvhtml.com 上创建页面滚动?顶部的链接如何触发滚动以及其他“子动画”事件如何与滚动背景相关联?
最佳答案
这是我能够收集到的:
- 在
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
关于animation - pixi.js:网站 flashvhtml.com 上的滚动是如何完成的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30282204/