0

このサイトの画面を横切ってヘリコプターがパンしており、現在左から右に移動しています。しかし、30 秒後に方向を変えたいと思います。その後、30 秒後に再び方向を変えます。それが行くという点で本当にループラウンド

  • 左 > 右
  • 右 > 左

ループで。

jQuery Spritelyを使用してヘリコプターをアニメーション化しています。

私の現在のjQueryは次のように設定されています:

$(document).ready(function()
{       
/* Initial Helicopter Movement */
 $('#helicopter').pan({fps: 30, speed: 1.5, depth: 10, dir: 'right'});
 $('#helicopter').spState(1);

 setInterval(function() {
   $("#helicopter").spStop();
   $('#helicopter').pan({fps: 30, speed: 1.5, dir: 'left'});
   $('#helicopter').spState(2);
   $("#helicopter").spStart();
 }, 5000 ); 
};

ループを達成するにはどうすればよいですか？

前もって感謝します。

4

2 に答える 2

1

setInterval関数内のコードブロックを次のように変更します。

setInterval(function() {
    if (props.dir == 'left') {
    props.dir = 'right';
    $("#helicopter").spState(1).spChangeDir('right');
}
    else { 
        props.dir = 'left';
    $("#helicopter").spState(2).spChangeDir('left');
    }
}, 5000 );

ここでは、props.dir5秒ごとに値を確認し、方向を変えています。Spritely JS組み込みのspChangeDir()メソッドがあり、間隔ごとにプロパティを設定およびリセットする必要はありません。

于 2012-04-26T11:11:31.517 に答える
1

現在進行中の方向を変数で追跡し、関数がトリガーされるたびに間隔を変更します。

$(function() {

 var dir = 'right';

 /* Initial Helicopter Movement */
 $('#helicopter').pan({fps: 30, speed: 1.5, depth: 10, dir: dir});
 $('#helicopter').spState(1);

 setInterval(function() {

   if (dir == 'left') dir = 'right';
   else dir = 'left';

   $("#helicopter").spStop();
   $('#helicopter').pan({fps: 30, speed: 1.5, dir: dir});
   $('#helicopter').spState(2);
   $("#helicopter").spStart();
 }, 30000 ); 
});

ただし、fpsと速度が常に同じであるため、コードを少し最適化できます

var props = {
  fps:30,
  speed:1.5,
  depth:10,
  dir:'right'
};


$(function() {

 /* Initial Helicopter Movement */
 $('#helicopter').pan(props);
 $('#helicopter').spState(1);

 setInterval(function() {

   if (props.dir == 'left') props.dir = 'right';
   else props.dir = 'left';

   $("#helicopter").spStop();
   $('#helicopter').pan(props);
   $('#helicopter').spState(2);
   $("#helicopter").spStart();
 }, 30000 ); 
});
于 2012-04-26T09:58:34.303 に答える