проблема с простым классом анимации в JavaScript - PullRequest
0 голосов
/ 28 апреля 2011

Я пытаюсь создать простой класс Tween в javascript.Код выглядит примерно так:

function Tween(object, parameters) {      // constructor-class def.
    this.object = object;
    this.parameters = parameters;
    this.isRunning = true;
    this.frameRate = some value;
    this.timeElapsed = some value;
    this.duration = some value;
}

Tween.prototype.drawFrame = function () {
    var self = this;
    this.nextFrame();
    if (this.isRunning)
        setTimeout( function () { self.drawFrame() } , 1000 / frameRate);
}

Tween.prototype.nextFrame = function () {
    if (this.timeElapsed < this.duration) {
                // calculate and update the parameters of the object
    } else
        this.isRunning = false;
}

Tween.prototype.start = function () {
    this.isRunning = true;
    this.drawFrame();
}

Затем он вызывается другим скриптом, например, main.js:

window.onload = init;

init = function() {

var tweenDiv = document.createElement('div');
tweenDiv.id = 'someDiv';
document.body.appendChild(tweenDiv);
var myTween = new Tween(document.getElementById('someDiv').style, 'left', parameters);
myTween.start();

}

К сожалению, это не работает.Если я проверю свой сайт с помощью инструментов разработчика Google Chrome, то у someDiv его атрибут left-style будет установлен на количество пикселей, заданное в параметрах.Но он не двигается на экране.

Кто-нибудь знает, что я делаю не так?Почему не некоторые перерисовывают?

Обязан

1 Ответ

1 голос
/ 28 апреля 2011

Вы должны установить стиль position на absolute, fixed или relative, чтобы стиль left имел какой-либо эффект.

...