Animation Web optimisée HTML5 : requestAnimationFrame

黄舟

Libérer： 2017-02-27 15:22:20

original

1906 Les gens l'ont consulté

Nous avons de nombreuses options pour implémenter une animation dans la page
Vous pouvez utiliser la transition CSS3
L'animation en CSS3 coopère avec les règles d'images clés
SMIL peut également être utilisé en SVG - animation
La méthode la plus originale est que nous utilisons setTimeout/setInterval de JavaScript pour implémenter l'animation
Mais maintenant nous avons une autre méthode
requestAnimationFrame

Avantages

requestAnimationFrame Le principe et les utilisations sont similaires à setTimeout/setInterval
Il implémente l'animation sous une forme récursive
Comme il est spécialement utilisé pour l'animation Web, il doit avoir ses propres avantages

Utiliser setTimeout/setInterval pour créer les animations présentent les inconvénients suivants

La précision de ms ne peut pas être garantie (JavaScript est monothread et peut provoquer un blocage)
Le mécanisme de boucle pour appeler l'animation n'est pas optimisé
Il ne prend pas en compte le meilleur moment pour dessiner l'animation (il suffit d'appeler la boucle à un certain moment)

En comparaison, requestAnimationFrame présente les avantages suivants

L'animation est plus fluide et optimisée par le navigateur (exécutée une fois avant l'actualisation de la page)
La fenêtre n'est pas activée. L'animation est mise en pause, ce qui permet d'économiser efficacement la surcharge du processeur
Économie d'énergie, très conviviale pour les terminaux mobiles

Utilisation

requestAnimationFrame Comme setTimeout/setInterval,
sont toutes des méthodes sur la fenêtre
, nous pouvons donc utiliser directement
requestAnimationFrame()
Le paramètre est une fonction de rappel, à l'intérieur de la fonction dont nous avons besoin pour changer le style de l'élément
et avoir besoin L'exécution manuelle du rappel
renvoie également un handle
Passer dans CancelAnimationFrame peut l'annuler
Regardez un exemple

Maintenant, nous voulons élargir un élément de la page

<p id="demo"></p>

Copier après la connexion

#demo {    width: 0;    height: 100px;    background-color: orange;}

Copier après la connexion

Jetons d'abord un coup d'œil à l'implémentation de setInterval

var demo = document.getElementById(&#39;demo&#39;);
var len = 0;var timerFunc = function(){    len += 5;    if(len <= 200){
        demo.style.width = len + &#39;px&#39;;     
    }else{
        clearInterval(timer);
    }
}var timer = setInterval(timerFunc, 20);

Copier après la connexion

L'animation implémentée par requestAnimationFrame

var demo = document.getElementById(&#39;demo&#39;);var len = 0;
var timerFunc = function(){    len += 5;    if(len <= 200){
        demo.style.width = len + &#39;px&#39;;
        requestAnimationFrame(timerFunc); /*执行回调*/
    }else{
        cancelAnimationFrame(timer); 
    }
}var timer = requestAnimationFrame(timerFunc);

Copier après la connexion

Vous pouvez trouver notre demandeAnimationFrame display L'animation est très fluide

Compatible

Comme il s'agit d'une chose relativement nouvelle, il y aura inévitablement des problèmes de compatibilité avec divers navigateurs
Mais les navigateurs actuels le supportent déjà très bien

Nous pouvons écrire un polyfill pour cela

window.requestAnimationFrame = (function(){  
return  window.requestAnimationFrame       ||          
window.webkitRequestAnimationFrame ||          
window.mozRequestAnimationFrame    ||          
function(callback){            
window.setTimeout(callback, 1000 / 60);
          };
})();
window.requestAnimationFrame = (function(){  
return  window.cancelAnimationFrame       ||          
window.webkitCancelAnimationFrame ||          
window.mozCancelAnimationFrame    ||          
function(ID){            
window.clearTimeout(ID);
          };
})();

Copier après la connexion

Si ce navigateur n'a vraiment rien
alors il ne peut que se dégrader (repli) Utilisez setTimeout et clearTimeout

Ce qui précède n'est qu'un simple polyfill
Mais le maître en a écrit un meilleur
Vous pouvez également unifier le préfixes de divers navigateurs

(function() {
    var lastTime = 0;
    var vendors = [&#39;ms&#39;, &#39;moz&#39;, &#39;webkit&#39;, &#39;o&#39;];
    for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + &#39;RequestAnimationFrame&#39;];
        window.cancelAnimationFrame = window[vendors[x] + &#39;CancelAnimationFrame&#39;] || window[vendors[x] + &#39;CancelRequestAnimationFrame&#39;];
    }
    if (!window.requestAnimationFrame) window.requestAnimationFrame = function(callback, element) {
        var currTime = new Date().getTime();
        var timeToCall = Math.max(0, 16 - (currTime - lastTime));
        var id = window.setTimeout(function() {
            callback(currTime + timeToCall);
        }, timeToCall);
        lastTime = currTime + timeToCall;
        return id;
    };
    if (!window.cancelAnimationFrame) window.cancelAnimationFrame = function(id) {
        clearTimeout(id);
    };}());

Copier après la connexion

Plus tard, il y a eu une mise à jour
Les js pertinents peuvent être cliqués ici
adresse originale de github

if (!Date.now)    
Date.now = function() { return new Date().getTime(); };

(function() {    &#39;use strict&#39;;    
var vendors = [&#39;webkit&#39;, &#39;moz&#39;];    
for (var i = 0; i < vendors.length && !window.requestAnimationFrame; ++i) {        
var vp = vendors[i];
        window.requestAnimationFrame = window[vp+&#39;RequestAnimationFrame&#39;];
        window.cancelAnimationFrame = (window[vp+&#39;CancelAnimationFrame&#39;]
                                   || window[vp+&#39;CancelRequestAnimationFrame&#39;]);
    }    if (/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent) // iOS6 is buggy
        || !window.requestAnimationFrame || !window.cancelAnimationFrame) {        
        var lastTime = 0;
        window.requestAnimationFrame = function(callback) {
            var now = Date.now();            
            var nextTime = Math.max(lastTime + 16, now);            
            return setTimeout(function() { callback(lastTime = nextTime); },
                              nextTime - now);
        };
        window.cancelAnimationFrame = clearTimeout;
    }
}());

Copier après la connexion

Les étudiants intéressés peuvent l'étudier

Ce qui précède est une animation Web optimisée pour HTML5 — requestAnimationFrame Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !