-1

波の画像をいくつかアニメーション化して、ゆっくりと繰り返し上下に動かし、より活気のある感じにしています。Javascript の setInterval() を見つけました。これは、私の異なる波の画像を5.3秒ごとに（わずかに異なる速度で）上下にアニメーション化するのに完全に機能しています。

self.setInterval("waves()",5300);

function waves() {  
$('.waves1').animate({
    bottom: '-5px'
}, 2000);
$('.waves1').animate({
    bottom: '7px'
}, 3000);

$('.waves2').animate({
    bottom: '-5px'
}, 2200);
$('.waves2').animate({
    bottom: '7px'
}, 2800);

$('.waves3').animate({
    bottom: '-5px'
}, 1800);
$('.waves3').animate({
    bottom: '7px'
}, 3200);
}

これを実装した後、再帰的な jQuery 関数を使用してアニメーションを継続できることもわかりました。例えば：

function animateWaves() {
   $('.waves1').animate({ top: '+=15' },
                        { duration: 2000, easing: "linear" })
               .animate({ top: '-=15' },
                        { duration: 3000, easing: "linear",
                          complete: animateWaves });
}

$(function() {
    animateWaves();
});

一方 (再帰または setInterval) が他方より優れている点は何ですか?

4

1 に答える 1

1

それは実際には再帰ではありません。これは関数内からの自己参照ですが、関数呼び出しではなく単なる参照です。関数呼び出しは、アニメーションの完了時にフレームワークによって後で行われます。

再帰には、アクティブな関数呼び出しの「スタック」が重なり合っています。(絡み合った相互再帰関数の場合、介在するアクティブな関数が存在する可能性があります。) ここではそうではありません。呼び出しに渡された参照に基づいて呼び出しが行われるまでに、.animate()「animateWaves」への外部呼び出しが完了します。

jQuery アニメーション メカニズムは、そのすべての下で、ブラウザーのタイマー メカニズムも使用することに注意してください。とにかくライブラリを使用している場合は、ライブラリに繰り返しを処理させたほうがよいでしょう。

于 2012-07-27T22:16:24.900 に答える