So rufen Sie in Javascript eine AnfrageAnimationFrame-Schleife?

Ich sah eine video beschreiben, wie Sie requestAnimationFrame verwenden, um eine Animation zu loopen. Ich habe versucht, es zu replizieren und glaube, dass ich sehr nahe bin, aber einen Schlüsselpunkt vermisse. Wenn ich auf die "Box" klicke, wird onclick = "loopKeyFrame()" aktiviert und ruft runKeyFrame() nur einmal auf?So rufen Sie in Javascript eine AnfrageAnimationFrame-Schleife?

Meine Absicht war es, runKeyframe() unendlich mit diesem Code zu loopen. Ich weiß, dass ich "unendlich" in die CSS setzen kann, um es für immer laufen zu lassen, aber das ist nicht der Punkt. Ich versuche, requestAnimationFrame wie im Video verwendet zu verwenden.

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

Quelle

2016-08-07 Ghoyos

können Sie hinzufügen und entfernen einen className statt style des Elements einstellen, verwenden Sie setTimeoutrequestAnimationFrame mit loopKeyFrame als Parameter nach vier Sekunden zu rufen.

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>

Sie könnten alternativ .animate(), finish Ereignishandler verwenden rekursiv 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>

Quelle

2016-08-07 16:15:52 guest271314

Vielen Dank für die gründliche Korrektur. aber ich habe eine wertvolle Lektion gelernt. Sie können nicht requestAnimationFrame auf einem @keyframe verwenden ... es wäre super praktisch gedacht, wenn das behoben wäre, so könnten Sie aber – Ghoyos

warum die Verwendung von rAF, wenn Sie es in SetTimeout umwickeln? – Kaiido

@Kaiido Um diesen Browser anzufordern, führen Sie die Animation vor dem nächsten Repaint durch. – guest271314

Ihr Code sollte gut laufen. Aber was Sie ihm gesagt haben, ist nicht unbedingt, was Sie wollten.

Um dies zu demonstrieren, verwenden Sie stattdessen <div id="box" onclick="runKeyFrame()"></div>. Es scheint nur das erste Mal zu registrieren.

Das liegt daran, dass die Einstellung .style.animation auf den Wert, den es bereits enthält, nicht genau etwas erreichen wird.

requestAnimationFrame wird normalerweise mit JavaScript-Animationen kombiniert, nicht mit CSS-Animationen. Um mit CSS-Animationen in JavaScript arbeiten zu können, benötigen Sie höchstwahrscheinlich das Ereignis animationEnd.

Quelle

2016-08-07 15:47:55

Ive versuchte

, aber Sie sagen kann eine CSS request @keyFrame Animation nicht Schleife? Wenn das der Fall ist, einfach einfach die Animation in JS erstellen, aber ich bin sicher, bevor ich fortfahre. – Ghoyos

Es ist nicht der richtige Weg, deine Schleife zu machen, nein. Entweder verwenden Sie im CSS "unendlich" oder verwenden Sie "animationEnd", um einen Neustart auszulösen, oder implementieren Sie die Animation einfach in JavaScript. –

Nach einigen Experimenten nennen ich in der Lage war zu kommen mit diesem: 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>

Quelle

2016-08-08 01:28:17 Ghoyos

So rufen Sie in Javascript eine AnfrageAnimationFrame-Schleife?

Antwort

Verwandte Themen