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

有一个变量跟踪您当前的方向，并在每次触发该功能时在您的时间间隔内更改它。

$(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 回答
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()方法，不需要在每个间隔后设置和重置属性。

于 2012-04-26T11:11:31.517 回答