javascript - jQuery 循环播放动画

Question

我有一架直升机在this site屏幕上平移。目前它是从左到右。但 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 ); 
};

我将如何实现我的循环？

提前致谢。

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

在这里，您只需每 5 秒检查一次 props.dir 值并改变方向。 Spritely JS 有一个内置的 spChangeDir() 方法，不需要在每个时间间隔后设置和重置属性。