JavascriptでrequestAnimationFrameループを呼び出す方法は？

私は、requestAnimationFrameを使ってアニメーションをループする方法を説明しているvideoを見ました。私はそれを複製しようとし、私は非常に近いと信じているが、重要な点を欠いている。 "ボックス"をクリックすると、onclick = "loopKeyFrame（）"がアクティブになり、runKeyFrame（）が1回だけ呼び出されます。JavascriptでrequestAnimationFrameループを呼び出す方法は？

私の意図は、このコードでrunKeyframe（）を無限にループすることでした。私はそれが永遠に実行するためにCSSに "無限"を置くことができることを知っているが、それはポイントではない。ビデオで使用されていたようにrequestAnimationFrameを使用しようとしています。

私のコードCodePen

<html> 
<head> 
<title>RequestAnimation Lesson</title> 
<style> 
body { 
background-color: grey; 
} 

#box { 
position:relative; 
width:30px; 
border:1px solid blue; 
background-color:blue; 
height:10px; 
top:0px; 
left:0px; 
} 

@keyframes myMove { 
0%{left:0%;} 
50%{left:95%;} 
100%{left:0%;} 
} 
</style> 
<script> 

function runKeyFrame() { 
    document.getElementById("box").style.animation = "myMove 4s"; 
} 

function loopKeyFrame() { 
    runKeyFrame(); 
    requestAnimationFrame(loopKeyFrame); 
} 



</script> 
</head> 
<body> 
<div id="box" onclick="loopKeyFrame()"></div> 
</body> 
</html>

出典

2016-08-07 Ghoyos

あなたは4秒後にパラメータとしてloopKeyFrameでを呼び出すためにsetTimeoutを使用して、代わりに要素のstyleを設定するのでclassNameを追加および削除することができます。

function runKeyFrame() { 
 
    document.getElementById("box").className = "myMove"; 
 
} 
 

 
function loopKeyFrame() { 
 
    runKeyFrame(); 
 
    setTimeout(function() { 
 
    document.getElementById("box").className = "" 
 
    requestAnimationFrame(loopKeyFrame) 
 
    }, 4000) 
 
}

body { 
 
    background-color: grey; 
 
} 
 

 
#box { 
 
    position: relative; 
 
    width: 30px; 
 
    border: 1px solid blue; 
 
    background-color: blue; 
 
    height: 10px; 
 
    top: 0px; 
 
    left: 0px; 
 
} 
 

 
.myMove { 
 
    animation: myMove 4s; 
 
} 
 

 
@keyframes myMove { 
 
    0% { 
 
    left: 0%; 
 
    } 
 
    50% { 
 
    left: 95%; 
 
    } 
 
    100% { 
 
    left: 0%; 
 
    } 
 
}

<div id="box" onclick="loopKeyFrame()"></div>

あなたは、代わりに再帰的に私が出てくることができたいくつかの実験をした後loopKeyFrame

var animation; 
 

 
function runKeyFrame() { 
 
    return document.getElementById("box") 
 
    .animate([{ 
 
     left: "0%" 
 
    }, { 
 
     left: "95%" 
 
    }, { 
 
     left: "0%" 
 
    }], { 
 
     duration: 4000, 
 
     iterations: 1 
 
    }); 
 
} 
 

 
function loopKeyFrame() { 
 
    animation = runKeyFrame(); 
 
    animation.onfinish = loopKeyFrame; 
 
} 
 

 
document.querySelector("button") 
 
.addEventListener("click", function() { 
 
    animation.cancel() 
 
});

body { 
 
    background-color: grey; 
 
} 
 
#box { 
 
    position: relative; 
 
    width: 30px; 
 
    border: 1px solid blue; 
 
    background-color: blue; 
 
    height: 10px; 
 
    top: 0px; 
 
    left: 0px; 
 
}

<div id="box" onclick="loopKeyFrame()"></div><br> 
 
<button>cancel</button>

出典

2016-08-07 16:15:52 guest271314

深刻な修正をありがとうございました。しかし、私は貴重な教訓を学びました。あなたは@keyframeでrequestAnimationFrameを使用することはできません...それはあなたができるようにそれを固定した場合、非常に便利な思考になります – Ghoyos

なぜあなたはsetTimeoutでラップしたらrAFの使用？ – Kaiido

@Kaiido次の再描画の前に、ブラウザがアニメーションを実行するように要求します。 – guest271314

にあなたのコードがうまく実行されているはずです。しかし、あなたが言ったことは、必ずしもあなたがしたいことではありません。

説明するには、<div id="box" onclick="runKeyFrame()"></div>を代わりに使用してください。それは最初に登録するように見えるだけです。

これは、既に含まれている値に.style.animationを設定しても、何も達成されないためです。

は、通常、CSSアニメーションではなくJavaScriptアニメーションと組み合わせられます。 JavaScriptでCSSアニメーションを操作するには、おそらくanimationEndイベントが必要です。

出典

2016-08-07 15:47:55

アイブ氏は

を試してみましたが、あなたの言ってrequestAnimationFrameのないループのcss @keyFrameアニメーションできますか？場合は、単にJSのアニメーションを作成するが、私は私が続行する前に確信しています。 – Ghoyos

ループを行うのは正しい方法ではありません。 CSSで 'infinite'を使うか、' animationEnd'を使って再起動をトリガーするか、JavaScriptでアニメーションを実装するだけです。 –

を呼び出すために.animate()、finishイベントハンドラを使用することができますこれで：はCODEPEN

<html> 
<head> 
<title>RequestAnimation Lesson</title> 
<style> 
body { 
background-color: grey; 
} 

#box { 
position:relative; 
width:30px; 
border:1px solid blue; 
background-color:blue; 
height:10px; 
top:0px; 
left:0px; 
} 
@keyframes myMove { 
0%{left:0%;} 
50%{left:95%;} 
100%{left:0%;} 
} 
</style> 
<script> 

function runKeyFrame() { 
document.getElementById("box").style.animation = "myMove 4s infinite"; 
} 

function stopAnimation() { 
document.getElementById("box").style.animation = "none"; 
} 





</script> 
</head> 
<body> 

<button onclick="runKeyFrame()">Start Animation</button> 
<button onclick="stopAnimation()">Stop Animation</button> 
<br> 
<br> 
<div id="box"></div> 
</body> 
</html>

出典

2016-08-08 01:28:17 Ghoyos

JavascriptでrequestAnimationFrameループを呼び出す方法は？

答えて

関連する問題