帶有已繪制元素的html5動畫畫布

Question

在畫布上設置動畫元素時，我可以獲得一些幫助嗎？ 我想獲取已經在畫布上繪制的元素，然后將它們“移出”畫布並顯示新元素。 我的函數在javascript中，並且運行良好。 我只想添加動畫。 TIA。

Answer 1

只需讓事件處理程序控制該畫布ID的樣式的left ，然后指定一個循環即可根據時間更改或向左/向右移動。

(function() {
var speed = 10,
movePic = function(moveBy) {
    var el = document.getElementById("animationStyle"),
        left = el.offsetLeft


    if ((moveBy > 0 && left > 399) || (moveBy < 0 && left < 51)) {
        clearTimeout(timer);
        timer = setInterval(function () {
            movePic(moveBy * -1);
        }, speed);
    } 
    el.style.left = left + moveBy + "px";
};
var timer = setInterval(function () {
movePic(3)
}, speed);
}());

這將使其來回移動，這是一個示例，可以幫助您入門。