JavaScriptをアニメーションに連続してループする

Question

私の質問はアニメーションを連続的にループする方法です。たとえば、単純なボックスが上から下に移動して停止するW3Schoolのリンクを参照してください。

http://www.w3schools.com/js/tryit.asp?filename=tryjs_dom_animate_3

しかし、私が把握することはできませんすることは、それが再びその出発場所まで移動し、アニメーションが永遠に続けて下になった後、すなわち、このボックスアニメーションノンストップを作成する方法です。

Answer 1

あなたはJSにこれらの調整を行うことができます。

var elem = document.getElementById("animate"); 
 
var pos = 0; 
 
var id = setInterval(frame, 10); 
 

 
function frame() { 
 
    if (pos == 150) { pos = 0; } 
 
    pos++; 
 
    elem.style.top = pos + 'px'; 
 
    elem.style.left = pos + 'px'; 
 
}

#container { width: 200px; height: 200px; position: relative; background: yellow; } #animate { width: 50px; height: 50px; position: absolute; background-color: red; }

<div id ="container"> 
 
    <div id ="animate"></div> 
 
</div>

Answer 2

アニメーションタイマーを停止し、その場所にボックスにそれが達するたびに再配置するために、このpos = 0;を追加clearInterval(id);を削除しますコーナー。

Answer 3

これにスクリプトを変更すると、それ以上終了しません。 2番目の矩形の表示をロックするにはrunAlreadyが必要で、pos=0のifステートメントでは、四角形の座標を左上隅に設定します。

var runAlready=false; 
function myMove() { 
    if(!runAlready){ 
    runAlready=true; 
    var elem = document.getElementById("animate"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    function frame() { 
    if (pos == 350) { 
     pos=0; 
    } else { 
     pos++; 
     elem.style.top = pos + 'px'; 
     elem.style.left = pos + 'px'; 
    } 
    } 
    } 
} 

Answer 4

setInterval（frame、5）は、プログラムが5分の1秒ごとにframe（）関数を呼び出すように指示します。それがアニメーションを作り出すものです。

clearInterval（id）関数は、アニメーションを停止するように指示します。

以下に加えた変更を見てください。 'direction'という名前の変数を使用してボックスの方向を変更します。ボックスがLRコーナーに着くときにアニメーションを停止するのではなく、方向を逆にして動き続けます。

function myMove() { 
    var elem = document.getElementById("animate"); 
    var pos = 0; 
    var id = setInterval(frame, 5); 
    var direction = 1; 
    function frame() { 
    if (pos == 0){ 
     direction = 1; 
    } else if(pos == 350){ 
     direction = -1; 
    } 
    pos += direction; 
    elem.style.top = pos + 'px'; 
    elem.style.left = pos + 'px'; 
    } 
}