Zoeken…
Syntaxis
- window.requestAnimationFrame ( callback );
- window.webkitRequestAnimationFrame ( callback );
- window.mozRequestAnimationFrame ( callback );
parameters
| Parameter | Details |
|---|---|
| Bel terug | "Een parameter die een functie opgeeft die moet worden aangeroepen wanneer het tijd is om uw animatie bij te werken voor de volgende herschilderen." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
Opmerkingen
Als het gaat om het vloeiend animeren van DOM-elementen, zijn we beperkt tot de volgende CSS-overgangen:
- POSITIE -
transform: translate (npx, npx); - SCHAAL -
transform: scale(n); - ROTATIE -
transform: rotate(ndeg); - OPACITY -
opacity: 0;
Het gebruik hiervan is echter geen garantie dat uw animaties vloeiend zullen zijn, omdat het ervoor zorgt dat de browser nieuwe paint start, ongeacht wat er verder aan de hand is. Kortom, paint wordt inefficiënt gemaakt en uw animatie ziet er "janky" uit omdat de frames per seconde (FPS) eronder lijden.
RequestAnimationFrame moet worden gebruikt in combinatie met de bovenstaande CSS-overgangen om soepele DOM-animaties te garanderen.
De reden dat dit werkt, is omdat de requestAnimationFrame API laat de browser weten dat u wilt een animatie te gebeuren bij de volgende paint cyclus, in tegenstelling tot het onderbreken van wat er gaande is naar een nieuwe verf cyclus forceren wanneer een niet-RAF-animatie wordt genoemd.
| Referenties | URL |
|---|---|
| Wat is jank? | http://jankfree.org/ |
| Hoogwaardige animaties | http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ . |
| HET SPOOR | https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en |
| Kritiek weergavepad analyseren | https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en |
| Renderprestaties | https://developers.google.com/web/fundamentals/performance/rendering/?hl=en |
| Verftijden analyseren | https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en |
| Knelpunten in verf identificeren | https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en |
Gebruik requestAnimationFrame om element in te faden
- Bekijk jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
- Kopieer + Pasteable code hieronder :
<html>
<body>
<h1>This will fade in at 60 frames per second (or as close to possible as your hardware allows)</h1>
<script>
// Fade in over 2000 ms = 2 seconds.
var FADE_DURATION = 2.0 * 1000;
// -1 is simply a flag to indicate if we are rendering the very 1st frame
var startTime=-1.0;
// Function to render current frame (whatever frame that may be)
function render(currTime) {
var head1 = document.getElementsByTagName('h1')[0];
// How opaque should head1 be? Its fade started at currTime=0.
// Over FADE_DURATION ms, opacity goes from 0 to 1
var opacity = (currTime/FADE_DURATION);
head1.style.opacity = opacity;
}
// Function to
function eachFrame() {
// Time that animation has been running (in ms)
// Uncomment the console.log function to view how quickly
// the timeRunning updates its value (may affect performance)
var timeRunning = (new Date()).getTime() - startTime;
//console.log('var timeRunning = '+timeRunning+'ms');
if (startTime < 0) {
// This branch: executes for the first frame only.
// it sets the startTime, then renders at currTime = 0.0
startTime = (new Date()).getTime();
render(0.0);
} else if (timeRunning < FADE_DURATION) {
// This branch: renders every frame, other than the 1st frame,
// with the new timeRunning value.
render(timeRunning);
} else {
return;
}
// Now we're done rendering one frame.
// So we make a request to the browser to execute the next
// animation frame, and the browser optimizes the rest.
// This happens very rapidly, as you can see in the console.log();
window.requestAnimationFrame(eachFrame);
};
// start the animation
window.requestAnimationFrame(eachFrame);
</script>
</body>
</html>
Een animatie annuleren
Als u een oproep voor requestAnimationFrame wilt annuleren, hebt u de id nodig van de requestAnimationFrame waarop deze voor het laatst werd gebeld. Dit is de parameter die u gebruikt voor cancelAnimationFrame . Het volgende voorbeeld start een hypothetische animatie en pauzeert deze na één seconde.
// stores the id returned from each call to requestAnimationFrame
var requestId;
// draw something
function draw(timestamp) {
// do some animation
// request next frame
start();
}
// pauses the animation
function pause() {
// pass in the id returned from the last call to requestAnimationFrame
cancelAnimationFrame(requestId);
}
// begin the animation
function start() {
// store the id returned from requestAnimationFrame
requestId = requestAnimationFrame(draw);
}
// begin now
start();
// after a second, pause the animation
setTimeout(pause,1000);
Compatibiliteit behouden
Natuurlijk kunt u, net als de meeste dingen in browser JavaScript, er niet op rekenen dat alles overal hetzelfde zal zijn. In dit geval kan requestAnimationFrame op sommige platforms een voorvoegsel hebben en een andere naam hebben, zoals webkitRequestAnimationFrame . Gelukkig is er een heel gemakkelijke manier om alle bekende verschillen te groeperen die tot 1 functie kunnen bestaan:
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
Merk op dat de laatste optie (die invult wanneer er geen bestaande ondersteuning werd gevonden) geen id retourneert voor gebruik in cancelAnimationFrame . Er is echter een efficiënte polyfill geschreven die dit oplost.