Sök…
Syntax
- windows.requestAnimationFrame ( återuppringning );
- windows.webkitRequestAnimationFrame ( callback );
- windows.mozRequestAnimationFrame ( återuppringning );
parametrar
| Parameter | detaljer |
|---|---|
| ring tillbaka | "En parameter som anger en funktion att ringa när det är dags att uppdatera din animering för nästa ommålning." ( https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) |
Anmärkningar
När det gäller att animera DOM-element flytande, är vi begränsade till följande CSS-övergångar:
- POSITION -
transform: translate (npx, npx); - SKALA -
transform: scale(n); - ROTATION -
transform: rotate(ndeg); - OPACITY -
opacity: 0;
Men det är ingen garanti för att använda dessa som dina animationer blir flytande, eftersom det gör att webbläsaren för att starta nya paint oavsett vad som händer. I grund och botten är paint ineffektiva och din animering ser "janky" ut eftersom ramarna per sekund (FPS) lider.
För att garantera smidiga DOM-animationer som möjligt, måste requestAnimationFrame användas tillsammans med ovanstående CSS-övergångar.
Anledningen till att detta fungerar beror på att API: requestAnimationFrame låter webbläsaren veta att du vill att en animering ska hända vid nästa paint , i motsats till att avbryta vad som händer för att tvinga in en ny färgcykel när en icke-RAF-animation kallas .
| referenser | URL |
|---|---|
| Vad är jank? | http://jankfree.org/ |
| Högpresterande animationer | http://www.html5rocks.com/sv/tutorials/speed/high-performance-animations/ . |
| JÄRNVÄG | https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/rail?hl=en |
| Analysera kritisk återgivningsväg | https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=en |
| Rendering Performance | https://developers.google.com/web/fundamentals/performance/rendering/?hl=en |
| Analysera Paint Times | https://developers.google.com/web/updates/2013/02/Profiling-Long-Paint-Times-with-DevTools-Continuous-Painting-Mode?hl=en |
| Identifiera färgflaskhalsar | https://developers.google.com/web/fundamentals/performance/rendering/simplify-paint-complexity-and-reduce-paint-areas?hl=en |
Använd requestAnimationFrame för att bleka i elementet
- Visa jsFiddle : https://jsfiddle.net/HimmatChahal/jb5trg67/
- Kopiera + Pasteable kod nedan :
<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>
Avbryter en animering
För att avbryta ett samtal till requestAnimationFrame , behöver du den id som den returnerade från när den senast ringdes. Det här är den parameter du använder för cancelAnimationFrame . Följande exempel startar en hypotetisk animering och pausar sedan den efter en sekund.
// 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);
Håller kompatibilitet
Naturligtvis, precis som de flesta saker i webbläsarens JavaScript, kan du bara inte räkna med det faktum att allt kommer att vara detsamma överallt. I det här fallet kan requestAnimationFrame ha ett prefix på vissa plattformar och namnges annorlunda, till exempel webkitRequestAnimationFrame . Lyckligtvis finns det ett riktigt enkelt sätt att gruppera alla kända skillnader som kan existera till en funktion:
window.requestAnimationFrame = (function(){
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
};
})();
Observera att det sista alternativet (som fylls i när inget befintligt stöd hittades) inte kommer att returnera ett id som ska användas i cancelAnimationFrame . Det finns emellertid en effektiv polyfyll som skrevs som fixar detta.
