1

私は現在、オンラインで見つけたプロジェクトのクールなデモを再作成することで、jQuery の知識を広げようとしています。私が現在取り組んでいるのはhttp://www.beautyoftheweb.com/#/privateの回転する眼球ですが、画像を 2 方向に回転させる方法を見つけるのに苦労しています。

私はそのウェブサイトと同じようにレイヤー化された画像のセットを使用しており、個々の画像を 2 つの異なる方向にスムーズに回転させることができました。私の現在のコードは次のようになります。

var angle = 0,
    angle2 = 0,
    angle3 = 0,
    angle4 = 0;
    setInterval(function(){
      angle += 0.5;
     $("#3").rotate(angle);
},30);
setInterval(function(){
      angle2 -= 0.025;
     $("#2").rotate(angle2);
},10);
setInterval(function(){
      angle3 += 0.25;
     $("#5").rotate(angle3);
},10);
setInterval(function(){
      angle4 -= 0.025;
     $("#4").rotate(angle4);
},10);

私はこれでjQueryRotateも使用していますが、すべてがそのままうまく機能します。これを X 秒間実行できるようにする機能を実装する方法はありますか?その後、別のローテーションを呼び出すことができるので、2 方向に進みますか? 何かのようなもの：

angle +=0.25;
    run for 3-4 seconds
angle -=0.25;
    run for 1 second
angle +=0.25; 
    run for 2 seconds
angle +=0.125;
    run for 1 second
4

1 に答える 1

1

あなたが探している機能は、javascript の setTimeout() メソッドのように聞こえます。

ここに良いリソースがあります: https://developer.mozilla.org/en/DOM/window.setTimeout

できることは、setInterval() を使用して、個々の角度で setTimeout() 関数を呼び出す関数を実行することです。これにより、元のサンプルのように、一定の間隔でループします。最初の回転を一定の長さに設定し、それに応じて他のアニメーションをチェーンします。

コード例は次のようになります: http://jsfiddle.net/avCx5/6/

更新エラーがあったため、古いコードを削除しました。ほとんどのブラウザーでは、setTimeout で関数パラメーターを使用すると、すぐに実行されます。上記の例では、最初のアニメーションが 3 秒間実行され、次に 2 番目のアニメーションが 3 秒間実行され、その後両方が停止されます。（わかりやすくするために画像のスタックを解除しました）。

無期限に実行される大まかな例を次に示します: http://jsfiddle.net/avCx5/7/

適切に答えるために、コードは次のとおりです。

HTML

    <img src="http://i.imgur.com/w7dQh.png" class="overlay" id="1" />
    <img src="http://i.imgur.com/isx4q.png" class="overlay" id="2" />​

jQuery

   var angle = 0,
       angle2 = 0,
       angle3 = 0;

   var angle1rotation;
   var angle2rotation;

   function rotation1() {
      angle1rotation = setInterval(function() {
        angle3 += 0.25;
        $("#1").rotate(angle3);
      }, 10);

   }

 function rotation2() {
      angle2rotation = setInterval(function() {
         angle2 -= 0.5;
         $("#2").rotate(angle2);
      }, 10);
  }

  function animation_sequence() {
     rotation1();
     window.setTimeout(function(){
       clearInterval(angle1rotation);
       rotation2();
     }, 3000);
     window.setTimeout(function(){
       clearInterval(angle2rotation);        
     }, 6000);   
   }

   var main_loop = setInterval(function(){
      animation_sequence();
   }, 8000);


   animation_sequence();
于 2012-07-25T23:46:40.797 に答える