Question

所以我正在开展一个小项目，主要是为了帮助我学习更好的javascript，我遇到了一些问题。我可以做动画很好，但我的问题是..我正在试图找出计算动画每一步的像素变化量所必需的数学。所以说我的div是450px宽，我说的是animate（{width：600，duration：2000}）。如果我每隔3毫秒调用一次setTimeout函数，那么我会为每一帧移动150px的移动量。我知道解决方案可能很简单，但出于某种原因，也许只是因为我在写一整篇文章的时候一直在墙上敲我的脑袋，现在我想不出来就搞清楚了。如果有人需要，我可以显示代码示例。感谢您的帮助。根据要求，这里是我到目前为止做动画的代码......

animate : function(params, duration) {
    if(!params) {
        return this;
    } else {
        this.current = this._defCurrent;
        console.log(this.current);
        var time = (duration) ? duration : this.slow;
        var target;
        for(var index in params) {
            if(index == 'queue') {
                if(params[index]){
                    this.animQueue = true;
                } else {
                    this.animQueue = false;
                }
            } else {
                var current = parseFloat(this.getStyle(index));
                if(current < params[index]) {
                    target = params[index] - current;
                    animDirection = '+';
                } else {
                    target = current - params[index];
                    animDirection = '-';
                }
                totalMovement = target / time;
                animObj = {type : index, target : target, move : totalMovement, direction : animDirection, duration : time};
                this.setAnimQueue(animObj);
            }
        }
    }
    this.setTheTimeout();
},
setAnimQueue : function(obj) {
    var that = this;
    for(var i = 0, amt = (obj.duration * this.fps); i < amt; i++) {
        var fun = this.wrapFunction(that.doAnim, this, [obj.type, obj.move, obj.direction]);
        this.queue.push(fun);
    }
},
setTheTimeout : function() {
    var that = this;
    this.interValAmt = setInterval(function() {
        that.deQueue()
    }, this.fps);
},
doAnim : function(type, amount, direction) {
    var totalAmount = eval(parseFloat(this[type]()) + direction + amount);
    if(this.elem.style[this.toCamelCase(type)]) {
        this[type](totalAmount);
    } else {
        this[type](totalAmount)
    }
    return this;
}

Answer 1

你有距离，而且有持续时间。划分它们可以提高速度。只需将速度乘以时间增量即可得到距离增量。

根据时间计算运动

1 个答案: