0

1 つの画像から始めて、画像をクリックするたびに循環させたい 3 つのアニメーションがあります。このスイッチを作成しました：

function switcher() {
// counts to 4 then resets to 0
x = x+1
if (x>3) {x = 0}

// Fire OFF
if (x == 0) {
    // animation code ?
}

// Fire LARGE
if (x == 1) {
// animation code ?    
}

// Fire MEDIUM
if (x == 2) {
// animation code ?
}

// Fire SMALL
if (x == 3) {
// animation code ?
}}

1 つの静的ステート + 3 つのアニメーション ステート。

私が持っているアニメーションでは、Paul Irish の requestAnimframe Polyfill を使用しています。

function animate() 
    {   
    setTimeout(function()
        {
        requestAnimFrame( animate );        
        draw();   
        }, 1000 / 2);
    } 

function draw()    
    {   
    flame=document.getElementById('myimage')
    if (flame.src.match("Images/lfire1.png"))
        {
        flame.src="Images/lfire2.png";
        }
    else
        {
        flame.src="Images/lfire1.png";
        }     
    }

各アニメーションは基本的にこれと同じコードですが、画像が異なります。コードを直接テストすると機能しますが、スイッチにコピーすると機能しません。

複数の方法を使用してこれらをスイッチに接続しようとしましたが、何も機能しないようです。任意のヒント？ありがとうございました！

4

1 に答える 1

0

switcher() メソッドをどのように呼び出しているかは不明ですが、問題は Javascript が setTimeout() を処理する方法に関係していると思われます。

Javascript で setTimeout() を呼び出すと、タイムアウトが終了するまでスクリプト自体が停止しないことに注意してください。代わりに、指定されたタイムアウトを処理するプロセスを生成し、コードを処理し続けます。

メソッドが呼び出されたときにアニメーションを実行し、setTimeout() を使用して再度自分自身を呼び出す前に、カウンターが 2 未満かどうかを確認するように、1 つのメソッドとカウンター (メソッドの呼び出し間で永続化されるもの) を使用してアニメーションをチェーンする場合、あなたは大丈夫です。

ここでベースから外れていたらごめんなさい。重要な前提での操作: setTimeout() を使用して switcher() を呼び出しています。

これが役立つことを願っています。

于 2013-05-12T08:58:29.643 に答える