如何在Javascript中调用requestAnimationFrame循环？
[英]How to call in Javascript a requestAnimationFrame loop?
问题描述
I watched a video describing how to use requestAnimationFrame to loop a animation. 
我观看了一个视频，描述了如何使用requestAnimationFrame来循环动画。 I tried to replicate it and believe I am very close but am missing a key point. 我试图复制它并相信我非常接近，但我错过了一个关键点。 When I click the "box" the onclick="loopKeyFrame()" activates and calls runKeyFrame() only once? 当我单击“框”时，onclick =“loopKeyFrame（）”激活并仅调用一次runKeyFrame（）？
My intention was to loop runKeyframe() infinitely with this code. 我的目的是使用此代码无限循环runKeyframe（）。 I know I can put "infinite" in the css to make it run forever but thats not the point. 我知道我可以在css中加入“无限”以使其永远运行但这不是重点。 im trying to use requestAnimationFrame as was used in the video. 即时尝试使用视频中使用的requestAnimationFrame。
My code in CodePen 我在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>
3 个解决方案
解决方案1
4 已采纳 2016-08-07 16:15:52
You can add and remove a className instead of setting style of element, use setTimeout to call requestAnimationFrame with loopKeyFrame as parameter after four seconds. 您可以添加和删除className而不是设置元素的style ，使用setTimeout在四秒钟后使用loopKeyFrame作为参数调用requestAnimationFrame 。
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>
You could alternatively use .animate() , finish event handler to recursively call loopKeyFrame 您也可以使用.animate() ， finish事件处理程序以递归方式调用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>
解决方案2
1 2016-08-07 15:47:55
Your code should be running just fine. 你的代码应该运行得很好。 But what you told it to do isn't necessarily what you wanted it to do. 但你告诉它要做的并不一定是你想要它做的。
To demonstrate, try using <div id="box" onclick="runKeyFrame()"></div> instead. 要演示，请尝试使用<div id="box" onclick="runKeyFrame()"></div> 。 It will only seem to register the first time. 它似乎只是第一次注册。
This is because setting .style.animation to the value it already contains isn't exactly going to achieve anything. 这是因为将.style.animation设置为已包含的值并不能完全实现。
requestAnimationFrame is usually combined with JavaScript animations, not CSS ones. requestAnimationFrame通常与JavaScript动画结合使用，而不是CSS动画。 To work with CSS animations in JavaScript, you will need the animationEnd event, most likely. 要在JavaScript中使用CSS动画，最有可能需要animationEnd事件。
解决方案3
0 2016-08-08 01:28:17
After some experimentation I was able to come up with this: CODEPEN 经过一些实验，我得出了这个： 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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.