ですから、私は小さなプロジェクトに取り組んでいます。主に、より良いJavaScriptを学ぶのを助けるためで、少し問題があります。アニメーションは問題なく実行できますが、問題は..アニメーションの各ステップを移動するためのピクセルの変化量を計算するために必要な計算を理解しようとしています。つまり、divの幅が450ピクセルで、animate({width:600、duration:2000})と言っているとします。これにより、合計で150ピクセルの移動が残りますが、3ミリ秒ごとにsetTimeout関数を呼び出す場合、フレームごとにどのくらいの移動を行うかが決まります。解決策はおそらく簡単だと思いますが、何らかの理由で、このすべてを書いている間、壁に頭をぶつけていたためか、今ではそれを理解するのに十分なことを考えることができません。必要に応じてコード例を示すことができます。よろしくお願いします。
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;
}