これらのアニメーションを異なる時間にアニメーション化するにはどうすればよいですか？

私はこれまでに何をしていたのですか？これは私がこれまで行ってきたことです。私はこれが控えめで、おそらくこれを行う最も簡単でスマートな方法ではないと思います。私が知る必要があるのは、アニメーションを別々の時間にアニメーション化する方法です。この現在のコードは、穴から出てくる9つの異なる奇形をアニメーション化するように動作しますが、異なる時間にアニメートする必要があります（その間に何も同時に現われないか、数ミリ秒以内に現れます）。現在のコードはこれらのアニメーションを異なる時間にアニメーション化するにはどうすればよいですか？

です

<html> 
<body> 
<style type="text/css"> 
body, a, a:hover {cursor: url(http://cur.cursors-4u.net/others/oth-5/oth438.cur), 
progress;} 
</style> 
<body background = "http://i52.tinypic.com/34e9ekj.jpg"> 
<b><center><font size="5"><div id='counter'>0</div></font></center><b> 
<b><center><i>Whack-A-Mole</i> - by Steven</center></b> 
<div 
    style=" 
     top: 37; 
     left: 350; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<center><img id='animation0' src ='http://i51.tinypic.com/sxheeo.gif'/></center> 
</div> 
<div 
    style=" 
     top: 37; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<left><img id='animation1' src ='http://i51.tinypic.com/sxheeo.gif'/></left> 
</div> 

<div 
    style=" 
     top: 37; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<right><img id='animation2' src ='http://i51.tinypic.com/sxheeo.gif'/></right> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 352; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation3' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation4' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 200; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation5' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 350; 
     left: 700; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation6' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
<div 
    style=" 
     top: 350; 
     left: 33; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation7' src ='http://i51.tinypic.com/sxheeo.gif'/> 

</div> 
<div 
    style=" 
     top: 350; 
     left: 352; 
     position: absolute; 
     z-index: 1; 
     visibility: show;"> 
<img id='animation8' src ='http://i51.tinypic.com/sxheeo.gif'/> 
</div> 
</body> 
<head> 
<script type="text/javascript"> 
var urls; 

function animate0(pos) { 
    pos %= urls.length; 
    var animation0 = document.getElementById('animation0'); 
    var counter = document.getElementById('counter'); 
    animation0.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation0.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation0.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate0(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate1(pos) { 
    pos %= urls.length; 
    var animation1 = document.getElementById('animation1'); 
    var counter = document.getElementById('counter'); 
    animation1.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation1.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation1.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate1(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate2(pos) { 
    pos %= urls.length; 
    var animation2 = document.getElementById('animation2'); 
    var counter = document.getElementById('counter'); 
    animation2.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation2.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation2.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate2(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate3(pos) { 
    pos %= urls.length; 
    var animation3 = document.getElementById('animation3'); 
    var counter = document.getElementById('counter'); 
    animation3.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation3.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation3.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate3(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate4(pos) { 
    pos %= urls.length; 
    var animation4 = document.getElementById('animation4'); 
    var counter = document.getElementById('counter'); 
    animation4.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation4.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation4.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate4(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate5(pos) { 
    pos %= urls.length; 
    var animation5 = document.getElementById('animation5'); 
    var counter = document.getElementById('counter'); 
    animation5.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation5.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation5.onclick = function() { 
      //do nothing onclick 
     } 
    } 
    setTimeout(function() { 
     animate5(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate6(pos) { 
    pos %= urls.length; 
    var animation6 = document.getElementById('animation6'); 
    var counter = document.getElementById('counter'); 
    animation6.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation6.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation6.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate6(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate7(pos) { 
    pos %= urls.length; 
    var animation7 = document.getElementById('animation7'); 
    var counter = document.getElementById('counter'); 
    animation7.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation7.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation7.onclick = function() { 
      //do nothing 
     } 
    } 
    setTimeout(function() { 
     animate7(++pos); 
    }, (Math.random()*500) + 1000); 
} 
function animate8(pos) { 
    pos %= urls.length; 
    var animation8 = document.getElementById('animation8'); 
    var counter = document.getElementById('counter'); 
    animation8.src = urls[pos]; 
    if (pos == 1) { // only make onclick when have a certain image 
     animation8.onclick = function() { 
      counter.innerHTML = parseInt(counter.innerHTML) + 1; 
     } 
    } 
    else { 
     animation8.onclick = function() { 
      //do nothing 
     } 
    } 
     setTimeout(function() { 
     animate8(++pos); 
    }, (Math.random()*500) + 1000); 
} 
window.onload = function() { //Frames go below, seperated by commas format= , "URL"); 
    urls = new Array("http://i51.tinypic.com/sxheeo.gif", "http://i56.tinypic.com/2i3tyw.gif"); 
    animate0(0); 
    animate1(0); 
    animate2(0); 
    animate3(0); 
    animate4(0); 
    animate5(0); 
    animate6(0); 
    animate7(0); 
    animate8(0); 
} 
</script> 
</head> 
</html>

出典

2011-07-02 Steven

少しでも、ああ...私はちょうどそれがjavascriptのための素晴らしい、困難な始まりのプロジェクトになると思った。：P – Steven

これは、IEでのasplodeに行くhaha –

私はfirefoxを使用してうれしい。 :) – Steven

このように機能をコピー/貼り付けするのは実際には厄介です！モル倍が出たり、それがハンマーで打ったときはfalseに

var isMole = false;//at first there is no mole 
if(!isMole){  
    //there is no mole, you can show one here  
    isMole = true;//there is a mole now! 
}else{ 
    //there is a mole, we wait. 
}

今そのフラグを設定します。

あなたはセットアップにフラグを必要とします！

出典

2011-07-02 05:25:18 philVigneault

ええと、私はこれを現在の関数にどのように統合するのか分かりません。（私はjavascript：Pのnoobです）意味がありますが、実装する方法はわかりません。関数に関数を実装する方法や、適切に機能する関数を表示することができますか？ああ、ありがとう。 – Steven

0と開始時間のバリエーションの間に9つの乱数を生成します。アニメーション間の最大距離を決め、乱数をその時間枠に合わせます。その後、それぞれのタイマーがアニメーションを開始するように、現在から9つのタイマーを設定します。

あなたは500以上のミリ秒を開始するには、アニメーションを望んでいた場合、あなたはこのような何かしたい：

var randomTimes = [9]; 

for (var i = 0; i < 9; i++) { 
    randomTimes[i] = Math.floor(Math.random() * 501); 
}

を今、あなたは500ミリ秒に広がる9つのランダムな時間を持っているとあなたがsetTimeoutをして、これらの値を使用することができます各アニメーションをランダムに開始します。

出典

2011-07-02 05:47:07 jfriend00

あなたの言っていることが分かりますが、それは.gifアニメーションではありません。透明な背景をサポートしていない他のフォーマットのため、フレームを.gif形式で保存していました。私は実際にアニメーションのための2つのフレームとurl配列を使用します。私は1つのフレーム（.gifアニメーション）を持っていればこれは素晴らしいですが、私は2つのフレームを持っています。 – Steven

まあ、技術的には499ミリ秒以上に広がっていますが、私はあなたのためにそれをドッキングしません;） –

@スティーブン。はい、アニメーションは機能しますが、乱数を使用してアニメーションを別々の時間に開始することができます。おそらく、アニメーションを制御/管理するために、いくつかの乱数を使用したいと思ってしまうでしょう（可変時間の上/下、それが繰り返されるまでの時間）。 – jfriend00

これらのアニメーションを異なる時間にアニメーション化するにはどうすればよいですか？

答えて

関連する問題