javascript中简单补间类的问题

Question

我正在尝试用 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 没有被重绘？

多谢

Answer 1

您必须将 left 的 position 样式设置为 absolute、fixed 或 relative > 样式有任何效果。