0

javascriptで簡単なTweenクラスを作成しようとしています。コードは次のようになります。

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-attributeがパラメーターに設定されているピクセル数に設定されています。ただし、画面上では移動しません。

誰かが私が間違っていることを知っていますか？someDivが再描画されないのはなぜですか？

とても感謝しております

4

1 に答える 1

1

positionスタイルをabsoluteに設定するfixedかrelative、leftスタイルに効果を持たせる必要があります。

于 2011-04-27T20:10:02.427 に答える