Odometer animation using Pixi.js

Question

Some days ago I've started developing an animated odometer written in HTML and javascript, which I intend to use on a rpg game that I am developing. Also, I've been using Pixi.js to help me on the animations. The 2 following images are the main components of the program:

odometer

row of numbers:

And here is a print of what I've accomplished so far:

Basically, the first two buttons update instantly (with no animation) the numbers on the odometer image, based the actual HP and PP values contained in the actual HP and PP textboxes. If the 'Set New Values' is pressed, it will calculate the difference between the actual and new values, convert it to pixels and then perform the needed changes on the odometer. All the changes are performed by a controller() method. Inside this method, there is a while loop that will break when both HP and PP difference values are zero.

I've managed to program the controller() method correctly, so all the numbers in the odometer are updated as expected. However, I am currently facing some difficulties in implementing the animations. Since I've been using Pixi.js, I've added the following method to the HTML code in order to create the animations' movements:

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

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

The container is defined as shown below (I am also using a PIXI.extras.TilingSprite.call() inside the construction class of both Odometer and HPPP):

  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);
  }

Until now, I've experienced 2 scenarios: The first one (where onClick=controller(), for the 'Set New Value' button), if the code is executed with no modifications, the program will run and the odometer numbers will update instantly, which means that there will be no animation.

However, if the controller() method is added in the beginning of the update() method, the numbers will animate very rapidly, but the limits defined by the difference values will not be obeyed (which means that it will animate indefinitely from 000 to 999).

I am still really fresh on HTML and javascript development, and I don't even know if Pixi.js would be the best choice for this. Anyway, is it possible to perform smooth and controlled animations for this odometer?

Since I did not post many details from my code, I will provide here the source code of my project (Note: It can be executed using node.js prompt): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

Answer 1

I've managed to find the solution for this problem some days ago. Basically, I was messing up with some variables inside the control method (the variables values were the same for every iteration on the windows.requestAnimationFrame(update) ) and I was also using a while loop for the calculations, which was freezing the window tab.

Anyway, I will afterwards upload my source code with the corrected solution after I clean up and organize it.