How to call requestAnimationFrame loop in Javascript?

Question

How to call requestAnimationFrame loop in Javascript?

I watched a video describing how to use requestAnimationFrame for looping animation. I tried to reproduce it and I think that I am very close, but I miss the key point. When I click "field", onclick = "loopKeyFrame ()" is activated and calls runKeyFrame () only once?

My intention was to have the runKeyframe () loop endlessly with this code. I know that I can put "infinite" in css so that it runs forever, but that is 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>

+4

javascript html css

Ghoyos Aug 7 '16 at 15:43

source share

3

. , , , , .

, <div id="box" onclick="runKeyFrame()"></div>. .

, .style.animation , , .

requestAnimationFrame JavaScript, CSS. CSS JavaScript animationEnd, .

+1

Niet the Dark Absol 07 . '16 15:47

After some experimentation, I was able to come 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>

0

Ghoyos Aug 08 '16 at 1:28

source share

guest271314 · Accepted Answer · 2016-08-07T16:15:52+0000

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>

Hide result

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

Hide result

How to call requestAnimationFrame loop in Javascript?

More articles: