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通過動畫循環

回答

相關問題