html - How to call in Javascript a requestAnimationFrame loop?

I watched a video describing how to use requestAnimationFrame to loop a animation. 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?

My intention was to loop runKeyframe() infinitely with this code. I know I can put "infinite" in the css to make it run forever but thats not the point. im trying to use requestAnimationFrame as was used in the video.

My code in 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>

My code in 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>

Share Improve this question asked Aug 7, 2016 at 15:43 Ghoyos 6223 gold badges7 silver badges19 bronze badges

Add a ment |

3 Answers 3

Sorted by: Reset to default 4

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.

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

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>

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. 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.

requestAnimationFrame is usually bined with JavaScript animations, not CSS ones. To work with CSS animations in JavaScript, you will need the animationEnd event, most likely.

After some experimentation I was able to e up with this: 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>

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744292611a4567108.html

html - How to call in Javascript a requestAnimationFrame loop? - Stack Overflow

3 Answers 3

发表回复

评论列表（0条）

联系我们

400-800-8888

html - How to call in Javascript a requestAnimationFrame loop? - Stack Overflow

3 Answers 3

相关推荐