Одиночная анимация с использованием Pixi.js

Несколько дней назад я начал разрабатывать анимированный одометр, написанный в HTML и javascript, который я намереваюсь использовать в игре rpg, которую я разрабатываю. Кроме того, я использовал Pixi.js, чтобы помочь мне в анимации. 2 следующие изображения являются основными компонентами программы:

одометр

строка чисел:

И вот отпечаток того, что я сделал до сих пор:

В основном, первые две кнопки мгновенно обновляют (без анимации) цифры на изображении одометра, основываясь на фактических значениях HP и PP, содержащихся в реальных текстовых окнах HP и PP. Если нажать "Установить новые значения", он рассчитает разницу между фактическими и новыми значениями, преобразует их в пиксели и затем выполнит необходимые изменения на одометре. Все изменения выполняются с помощью метода controller(). Внутри этого метода существует цикл while, который прерывается, когда значения разности HP и PP равны нулю.

Мне удалось правильно запрограммировать метод controller(), поэтому все числа в одометре обновляются как ожидалось. Однако в настоящее время я испытываю некоторые трудности при реализации анимации. Поскольку я использовал Pixi.js, я добавил следующий код кода HTML, чтобы создать движения анимаций:

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

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

Контейнер определяется как показано ниже (я также использую PIXI.extras.TilingSprite.call() внутри класса конструкции как одометра, так и 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);
  }

До сих пор у меня было два сценария: первый (где onClick=controller(), для кнопки "Установить новое значение" ), если код выполнен без каких-либо изменений, программа запустится, а номера одометра будут мгновенно обновляется, что означает, что анимации не будет.

Однако, если метод controller() добавлен в начале метода update(), числа будут анимироваться очень быстро, но пределы, определяемые значениями разности, не будут соблюдаться (что означает, что он будет анимировать бесконечно от 000 до 999).

Я все еще очень свежую в разработке HTML и javascript, и я даже не знаю, будет ли Pixi.js лучшим выбором для этого. Во всяком случае, можно ли выполнять плавные и управляемые анимации для этого одометра?

Поскольку я не размещал много деталей из своего кода, я приведу здесь исходный код моего проекта (Примечание: он может быть выполнен с помощью приглашения node.js): http://www.mediafire.com/download/gfvpajsk7ft1gcd/parallax_odometer.rar

Ответ 1