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

页面滚动是如何创建的？顶部的链接如何触发滚动，其他“子动画”事件如何与滚动背景关联

一个简单的方法是添加，然后使用滚动/拖动输入和链接在tween的时间线上移动

• 中间一：将相机缓慢地连续向下平移
• Tween Tween 2：等到x，不整洁地淡出精灵，淡出精灵

确保在创建后不会“播放”tween，而是手动调整时间（基于滚动位置）

有几个tweeing框架可用于pixi：，

---

在

上有一个讨论，这是我能够收集到的：

• 交互的侦听器添加到

  Trackpad.js

  文件中。鼠标拖动、键盘事件、触摸等事件的侦听器。所有这些事件都计算

  值

  变量
• 然后，

  Trackpad.js

  的

  值

  变量 用于调整

  main.js的
  update
  方法中的
  camera
  位置
  文件

• 如果我理解的话，有3个主要视图正在呈现 正确显示：

  ScrollView

  ，

  ScaleView

  ，

  RocketView

  。所有这些 在

  main.js的
  init
  方法中启动。但他们都是
  在
  fvh.js
  文件中定义

• 这三个视图中的每一个都有一个

  updatePosition

  方法将

  camera.y

  或

  main滚动位置

  视为 参数这些

  updatePosition

  方法在 与

  main.js

  文件的

  update

  方法相同
• 然后是一个

  ScrollMap.js

  ，其中包含所有3个视图的位置数据，例如，它包含

  ScrollView

  格式的数据：

  mcxxx:{视图：'nameofement'，深度：xx，起始帧：xxx，结束帧：xxx，位置：[xxx，…]}

• 另外，在

  main.js

  文件中定义了一个

  sectionLandPositions

  变量，这也是非常有趣的，因为这是在同一文件中的

  onMenuItemPressed

  方法中使用的变量，用于tween和查看某个节

• 因此，每个视图的

  updatePosition

  方法以及在

  Trackpad.js

  中如何计算值基本上都是神奇的。这就是我让您进一步调试并将其带回家的地方。：）

正在审查的文件有：

Trackpad.js

，

fvh.js

，

ScrollMap.js

，

main.js

。希望你觉得这一切都有用

为创建这一信息丰富、引人入胜的网站，我们感到非常荣幸

---

谢谢塔希尔，回答得很好！你的解释真的帮助我理解了这段代码。你认为他们是如何创建滚动地图位置点的？在调整动画时，似乎需要手工编写很多代码-我想知道是否有一些动画工具，他们使用这些工具来获取导出这些数字的位置点。我的猜测是，或者至少在这个项目中已经使用了一些功能，但不确定如何将其用于这样的定位。在给你一个明确的答案之前，我得深入研究。如果我有时间的话，我会试着进一步挖掘它，希望这个魔法也能解开：）希望：）。浏览别人的代码肯定很有趣，而不是：D@TahirAhmed您是一位传奇人物，先生，谢谢您的全面回答：）