javascript - 要素がすでに描画されているhtml5アニメーションキャンバス

Question

キャンバス上の要素をアニメーション化する方法についてヘルプを得ることができますか? キャンバスに既に描画されている要素を取得し、それらをキャンバスから「移動」して新しい要素を表示したいと思います。私の関数はjavascriptであり、うまく機能します。アニメーションを追加したいだけです。ティア。

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);
}());

これは前後に移動します。これは、開始するのに役立つ例です。