J'ai regardé une vidéo décrivant comment utiliser requestAnimationFrame pour boucler un animation. J'ai essayé de le reproduire et je crois que je suis très proche mais je manque un point clé. Lorsque je clique sur la "case", onclick = "loopKeyFrame ()" s'active et n'appelle runKeyFrame () qu'une seule fois?

Mon intention était de boucler runKeyframe () à l'infini avec ce code. Je sais que je peux mettre "infini" dans le CSS pour le faire fonctionner pour toujours mais ce n'est pas le point. im essayant d'utiliser requestAnimationFrame comme cela a été utilisé dans la vidéo.

Mon code dans 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
Ghoyos 7 août 2016 à 18:43

3 réponses

Meilleure réponse

Vous pouvez ajouter et supprimer un className au lieu de définir style d'élément, utilisez setTimeout pour appeler requestAnimationFrame avec loopKeyFrame comme paramètre après quatre secondes.

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>

Vous pouvez également utiliser .animate(), < un gestionnaire d'événements href = "https://developer.mozilla.org/en-US/docs/Web/API/Animation/onfinish" rel = "nofollow"> finish pour appeler récursivement {{ X2}}

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>
4
guest271314 7 août 2016 à 23:31

Votre code devrait fonctionner correctement. Mais ce que vous lui avez dit de faire n'est pas nécessairement ce que vous vouliez qu'il fasse.

Pour illustrer cela, essayez d'utiliser <div id="box" onclick="runKeyFrame()"></div> à la place. Il ne semblera que de s'inscrire la première fois.

Cela est dû au fait que la définition de .style.animation à la valeur qu'il contient déjà ne va rien accomplir.

requestAnimationFrame est généralement combiné avec des animations JavaScript, pas avec des animations CSS. Pour travailler avec des animations CSS en JavaScript, vous aurez probablement besoin de l'événement animationEnd.

1
Niet the Dark Absol 7 août 2016 à 15:47

Après quelques essais, j'ai pu trouver ceci: 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 8 août 2016 à 01:28