Question

我在this site屏幕上有一架直升机平移，它目前从左到右。但是30秒后，我希望它改变方向。然后在30秒后再次改变方向。一个循环实际上就是它

left＆gt;右
对＆gt;离开

在一个循环中。

我正在使用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 ); 
};

我如何实现循环？

提前致谢。

Answer 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 ); 
});

Answer 2

将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 );

在这里，您每隔5秒钟检查props.dir值并交替方向。 Spritely JS具有内置spChangeDir()方法，并且不需要在每个间隔后设置和重置属性。

jQuery循环播放动画

2 个答案: