我可以使用JavaScript/jQuery實時移動對象來創建動畫嗎？

-2

我有一個存儲PHP系列動作的項目。例如，我有一個帶有兩個盒子的100x100網格。 PHP代碼創建箱子移動到的座標，每個箱子可以每回合執行多次移動。我可以使用JavaScript/jQuery實時移動對象來創建動畫嗎？

我想動畫的動作，使用戶可以看到盒子實時移動。爲此，我使用PHP創建了一個座標爲JS的數組，然後創建一個jQuery腳本來遍歷數組並逐個移動對象，使用setTimeout來控制更改的速度。

但是，這似乎只是處理所有的動作，然後只輸出最終的位置。 Firefox的效果比Chrome好一些，但setTimeout似乎延遲了顯示的最終結果，而不是延遲每一步。

有沒有一種方法可以實時顯示每個動作？

這裏是我的JS：

var locations = {}; 
locations[0] = { "box":"box1" , "left":"52" , "top":"94" }; 
locations[1] = { "box": "box2" , "left":"0" , "top":"18" }; 
locations[2] = { "box": "box1" , "left":"29" , "top":"34" }; 
... 

$(document).ready(function(){ 
    $.each(locations,function(step,details){ 
     setTimeout(processMove,1000,step,details); 
    }); 
}); 
function processMove(step,details){ 
    var box = $('#' + details['box']); 
    box.css("left",details['left'] + 'px'); 
    box.css("top",details['top'] + 'px'); 
}

感謝提前:)

來源

2017-07-30 Ian Copeland

有在API爲[效果]一個整體部分（http://api.jquery.com/category/effects/）。一個簡單的谷歌搜索'jQuery動畫'會產生許多結果。 [Stack Overflow用戶需要多少研究工作？]（https://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users） – charlietfl

The問題不在於jQuery動畫效果。 –

可以肯定地這樣解釋，因爲它不是很清楚什麼*「實時顯示每個動作」*真正的意思。更何況... ***「我想動畫的動作」*** – charlietfl

這將適用於您的設置，但我會建議使用數組locations而不是對象。

var locations = {}; 
 
locations[0] = { "box":"box1" , "left":"52" , "top":"94" }; 
 
locations[1] = { "box": "box2" , "left":"0" , "top":"18" }; 
 
locations[2] = { "box": "box1" , "left":"29" , "top":"34" };var cnt = 0; 
 
    
 
var handle = setInterval(function() { 
 
    //processMove(locations[cnt]); 
 
    console.log(locations[cnt++]); 
 
    if (cnt > Object.keys(locations).length - 1) { 
 
     clearInterval(handle); 
 
    } 
 
}, 1000);

來源

2017-07-30 19:46:32

完美，非常感謝你:) –

可以。在jQuery中有一個完整的API： http://api.jquery.com/animate/

來源

2017-07-30 19:42:26 user1777136

謝謝，但jQuery的動畫不適合我需要的東西。 –

我可以使用JavaScript/jQuery實時移動對象來創建動畫嗎？

回答

相關問題