jQuery在动画中循环

Question

我有一架直升机在本站屏幕上翻滚，目前它从左转右。但30秒后，我希望它能改变方向。30秒后再改变方向。一个真正的循环，因为它的运行

• 左>右
• 右>左

在一个循环中。

我正在使用jQuery飞快动画直升机。

我的当前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 ); 
};

我该如何实现我的循环呢？

提前谢谢。

Answer 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.dir值后每5秒和交替的方向。Spritely JS有一个内置的spChangeDir()方法，并且不需要在每个间隔之后设置和重置属性。

Answer 2

有一个可变的跟踪，你目前的方向，并改变它在你的间隔，每次函数被触发。

$(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 ); 
});