Question

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

里程表

一排数字：

以下是我迄今为止所取得的成就：

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

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

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

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

容器的定义如下所示（我也在里程表和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循环进行计算，这冻结了窗口选项卡

无论如何，我会在清理完组合后，用修正后的解决方案上传我的源代码。

使用Pixi.js进行里程表动画

1 个答案: