带有已绘制元素的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);
}());

这将使其来回移动，这是一个示例，可以帮助您入门。