javascript - 使用 Pixi.js 的里程表动画

Question

几天前，我开始开发一个用 HTML 和 javascript 编写的动画里程表，我打算在我正在开发的 rpg 游戏中使用它。此外，我一直在使用 Pixi.js 来帮助我制作动画。下面两张图片是程序的主要组成部分:

里程表

行号:

这是我到目前为止所取得的成就的打印:

基本上，前两个按钮会根据实际 HP 和 PP 文本框中包含的实际 HP 和 PP 值立即(没有动画)更新里程表图像上的数字。如果按下“设置新值”，它将计算实际值和新值之间的差异，将其转换为像素，然后在里程表上执行所需的更改。所有更改均由 controller() 方法执行。在该方法内部，有一个 while 循环，当 HP 和 PP 差值为零时，该循环将中断。

我已经设法正确地对 controller() 方法进行编程，因此里程表中的所有数字都按预期更新了。但是，我目前在实现动画方面遇到了一些困难。由于我一直在使用 Pixi.js，我已将以下方法添加到 HTML 代码中以创建动画的 Action :

function update() {
  renderer.render(container);

  window.requestAnimationFrame(update);
}
window.requestAnimationFrame(update); //called after the method definition

容器定义如下所示(我还在 Odometer 和 HPPP 的构造类中使用了 PIXI.extras.TilingSprite.call()):

  function init() {
    container = new PIXI.Container();
    renderer = PIXI.autoDetectRenderer(224, 219, {view:document.getElementById("odometer-canvas")});
    odometer = new Odometer();
    container.addChild(odometer);
    hph = new HPPP(96, 85, 0, 0); //HP - Hundred digit (left)
    container.addChild(hph);
    hpt = new HPPP(128, 85, 0, 0);//HP - Ten digit (middle)
    container.addChild(hpt);
    hpu = new HPPP(160, 85, 0, 0); //HP - Unit digit (right)
    container.addChild(hpu);
    pph = new HPPP(96, 140, 0, 0);//PP - Hundred digit (left)
    container.addChild(pph);
    ppt = new HPPP(128, 140, 0, 0); //PP - Ten digit (middle)
    container.addChild(ppt);
    ppu = new HPPP(160, 140, 0, 0); //PP - Unit digit (right)
    container.addChild(ppu);
  }

到目前为止，我经历过两种情况:第一种(onClick=controller()，用于“设置新值”按钮)，如果代码在没有修改的情况下执行，程序将运行并且里程表数字将立即更新，这意味着不会有动画。

但是，如果 controller() 方法被添加到 update() 方法的开头，数字将非常快速地动画，但是由将不遵守差异值(这意味着它将无限期地从 000 到 999 进行动画处理)。

我对 HTML 和 javascript 开发还很陌生，我什至不知道 Pixi.js 是否是最好的选择。无论如何，是否可以为这个里程表执行流畅且受控的动画？

由于我没有发布我的代码的很多细节，我将在这里提供我的项目的源代码(注意:它可以使用 node.js 提示符执行): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

Answer 1

几天前我设法找到了这个问题的解决方案。基本上，我搞砸了控制方法中的一些变量(变量值对于 windows.requestAnimationFrame(update) 的每次迭代都是相同的)并且我还使用了一个 while 循环进行计算，这卡住了窗口选项卡.

无论如何，我会在清理和整理后上传我的源代码和更正的解决方案。