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

前几天我开始开发一个用 HTML和 javascript编写的动画里程表,我打算在我开发的RPG游戏中使用.另外,我一直在使用Pixi.js来帮助我的动画.以下2个图像是程序的主要组成部分：

里程表

行数：

这里是我迄今为止所完成的印刷品：

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

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

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); //HP - Hundred digit (left)
    container.addChild(hph);
    hpt = new HPPP(128,0);//HP - Ten digit (middle)
    container.addChild(hpt);
    hpu = new HPPP(160,0); //HP - Unit digit (right)
    container.addChild(hpu);
    pph = new HPPP(96,140,0);//PP - Hundred digit (left)
    container.addChild(pph);
    ppt = new HPPP(128,0); //PP - Ten digit (middle)
    container.addChild(ppt);
    ppu = new HPPP(160,0); //PP - Unit digit (right)
    container.addChild(ppu);
  }

直到现在,我经历了两个场景：第一个(其中onClick = controller(),为“设置新值”按钮),如果代码执行没有修改,程序将运行,里程表编号将更新瞬间,这意味着不会有动画.

然而,如果在update()方法的开头添加了controller()方法,则数字将非常快速地生成动画,但是不会遵守由差异值定义的限制(这意味着它将无限期地从000到999).

我仍然非常新鲜的HTML和JavaScript开发,我甚至不知道Pixi.js将是最好的选择.无论如何,是否可以为这个里程表执行平滑和受控的动画？

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

解决方法

我已经设法找到这个问题的解决方案前几天.基本上,我在控制方法中混乱了一些变量(变量值对于windows.requestAnimationFrame(更新)中的每次迭代都是相同的),我也在使用while循环进行计算,这是冻结窗口选项卡.

无论如何,我将在清理并组织之后,使用更正的解决方案上传我的源代码.