0

私はjavascriptsetIntervalでアニメーション効果を達成するために使用しようとしています.div200px100px1000ms

var MAX = 300, duration = 1000;
var inc = parseFloat( MAX / duration );

var div = $('div')[0];
var width = parseInt(div.style.width, 10);

function animate (id) {
    width += inc;
    if (width >= MAX) {
        clearInterval(id);
        console.timeEnd("animate");
    }
    div.style.width = width + "px";
}

console.time("animate");
var timer = setInterval(function () {
    animate(timer);
}, 0)

を使用しconsole.timeて所要時間を計算しますが、1 秒ではなく、常に 3 秒以上かかります。

では、私のコードの何が問題なのですか?

デモはこちら

しかし、私がjquery animateを使用すると、私が指摘したのと同じように：

console.time("animate");
$('div').animate({
    width: '300px'
}, { 
    duration: 1000,
    complete: function () {
        console.timeEnd("animate");
    }
})

デモはこちら

では、なぜ jquery はそれを達成できたのでしょうか?秘密は何ですか?

4

2 に答える 2

1

「秘密」は、フレームごとに必要なステップを計算することです。

更新された例を次に示します (いくつかの最適化を含む):
http://jsfiddle.net/AbdiasSoftware/nVgTj/7/

//init some values
var div = $('div')[0].style;
var height = parseInt(div.height, 10);
var seconds = 1;

//calc distance we need to move per frame over a time
var max = 300;
var steps = (max- height) / seconds / 16.7;

//16.7ms is approx one frame (1000/60)

//loop
function animate (id) {
    height += steps; //use calculated steps
    div.height = height + "px";

    if (height < max) {
        requestAnimationFrame(animate);
    }
}

animate();

hh54188 が指摘しているように、requestAnimationFrameまだすべてのブラウザで利用できるわけではないことに注意してください (Chrome と Firefox はプレフィックス付きでサポートしています)。

このポリフィルを使用すると、問題なく呼び出しを使用できますが、使用できないsetTimeout場合requestAnimationFrameは適切にフォールバックします。

http://www.paulirish.com/2011/requestanimationframe-for-smart-animation/

于 2013-06-17T09:20:11.457 に答える