我看了一个 video 描述如何使用 requestAnimationFrame 来循环动画。我试图复制它并相信我非常接近但遗漏了一个关键点。当我单击“框”时，onclick="loopKeyFrame()"激活并仅调用一次 runKeyFrame()？
我的意图是使用此代码无限循环 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>
最佳答案
您可以添加和删除一个className而不是设置元素的style，使用setTimeout调用requestAnimationFrame四秒后以 loopKeyFrame 作为参数。
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>您也可以使用 .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>关于javascript - 如何在 Javascript 中调用 requestAnimationFrame 循环？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38815799/