jQuery通过动画循环

我有一个直升机在屏幕上平移this site它目前从左到右。但30秒后，我希望它改变方向。然后在30秒后再次改变方向。环路圆真的，它去jQuery通过动画循环

左>右
右>左

在一个循环。

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

我将如何去实现我的循环？

在此先感谢。

来源

2012-04-26 StuBlackett

我从来没有使用'jQuery Spritely'，但我很困惑，你的函数在'setInterval'中。显然，你的直升机方向首先是“正确的”，5000毫秒后你的'setInterval'将它变成'left'。另外5000毫秒后，它仍然将方向改为“左”。所以我认为你应该每次在'setInterval'函数中改变方向。希望这对你有所帮助。 – Pikaurd 2012-04-26 11:03:40

更改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()方法，并且不需要在每个间隔之后设置和重置属性。

来源

2012-04-26 11:11:31 kayen

如果您希望直升机在相同的路线上回转并移动，您需要通过消除两幅图像之间的空白来更新您的直升机图形。当你改变状态时，它的位置正在向下移动几个像素。 – kayen 2012-04-26 11:20:29

这就是完美@kayen。非常感谢。通过gilesc的回答，我终于实现了我想要的。接下来是看这个空白问题，以防止它被打倒。 – StuBlackett 2012-04-26 11:21:25

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

$(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-26 09:58:34 GillesC

Hi @gilesc如果你现在看看这个网站。根据你的回答，我已经优化了我的代码，但是正如你所看到的，直升机似乎与动画一起挣扎，并且也落在了错误的方向，任何想法......？ – StuBlackett 2012-04-26 10:06:37

jQuery通过动画循环

回答

相关问题