Heim > Artikel > Web-Frontend > Implementierungsmethode für JS-Animationen

Implementierungsmethode für JS-Animationen

一个新手Original: 2017-09-23 10:33:122125Durchsuche

Es gibt sechs Hauptmethoden zum Implementieren von Animationen: direkte Javascript-Animation, skalierbare Vektorgrafik-Animation (SVG), CSS-Übergang, CSS3-Animation, Canvas-Animation und requestAnimationFrame.

Javascript-Implementierung

<!DOCTYPE html><html><head>
    <style>
        .content{width: 100px;height: 100px;background-color: red;}
    </style></head><body><p class="content"></p><script>
    var ele=document.getElementsByClassName("content")[0];    
    var left=0;    
    let timer=setInterval(function () {
        if(left<window.innerWidth-100){
            ele.style.marginLeft=left+&#39;px&#39;;
            left++;
        } else {
            clearInterval(timer);
        }
    },16);</script></body></html>

Nachteile: Die Implementierung von Animationen über Javascript führt normalerweise zu häufigem Neuanordnen und Neuzeichnen der Seite, was die Leistung beeinträchtigt.
Nach dem gesunden Menschenverstand führt eine Änderung der Position von Elementen zu einer Neuanordnung. Warum werden alle im Bild oben gezeigten Bilder neu gezeichnet? Der Grund dafür ist, dass durch die absolute Positionierung eine neue Ebene erstellt wird und sich auf dieser Ebene nur das aktuelle Element befindet, sodass es nur neu gezeichnet und nicht neu angeordnet wird. Dies zeigt uns auch, dass in derselben Ebene die Neuordnungsleistung besser und die Geschwindigkeit höher ist, wenn die Anzahl der Elemente gering ist.

CSS3-Übergang

<!DOCTYPE html><html><head>
    <style>
        .content{            
        width: 100px;            
        height: 100px;            
        background-color: red;            
        transition: all 10s ease-in-out 0s;            
        -webkit-transition: all 10s ease-in-out 0s;            
        margin-left: 0;        
        }
        .right{            
        width: 100px;            
        height: 100px;            
        margin-left: 400px;            
        background-color: blue;        
        }
    </style></head><body><p class="content"></p><script>var timer=setTimeout(function () {
    var content=document.getElementsByClassName("content")[0];
    content.setAttribute(&#39;class&#39;,&#39;right&#39;);
},500);</script></body></html>

Warum löst die Transformation kein Repaint aus? Kurz gesagt, die Transformationsanimation wird von der GPU gesteuert, unterstützt die Hardwarebeschleunigung und erfordert kein Software-Rendering.

Prinzip der Hardwarebeschleunigung
Nachdem der Browser das Seitendokument empfangen hat, analysiert er die Auszeichnungssprache im Dokument in einen DOM-Baum. Der DOM-Baum und CSS werden kombiniert, um den Rendering-Baum für den Browser zum Erstellen der Seite zu bilden. Der Rendering-Baum enthält eine große Anzahl von Rendering-Elementen, und jede Ebene wird in die GPU geladen, um eine Rendering-Textur zu bilden Ebenen, die Transformation verwenden, werden von unabhängigen Compositor-Prozessen verarbeitet.

CSS3-Animation

<!DOCTYPE html><html><head>
    <style>
        .content{            
        width: 100px;            
        height: 100px;            
        background-color: red;            
        transition: all 10s ease-in-out 0s;            
        -webkit-transition: all 10s ease-in-out 0s;            
        animation: move 4s infinite;            
        margin-left: 0;        
        }
        @keyframes move {            
        from{                
        margin-left: 0;            
        }
            50%{                
            margin-left: 400px;           
            }
            to{                
            margin-left: 0;            
            }
        }    
        </style></head><body><p class="content"></p></body></html>

Nicht alle CSS-Eigenschaften können eine GPU-Hardwarebeschleunigung auslösen (Änderungen der Ebeneneigenschaften in der GPU lösen kein Repaint aus). Tatsächlich nur a Nur wenige Eigenschaften können dies, wie zum Beispiel die folgenden:
transformieren
Opazität
Filter

Canvas-Animation

<!DOCTYPE html><html><head></head><body><canvas id="canvas" width="700" height="500"></canvas><script>
    var canvas=document.getElementById("canvas");    
    var ctx=canvas.getContext("2d");    
    var left=0;    
    var timer=setInterval(function () {
        ctx.clearRect(0,0,700,550);
        ctx.beginPath();
        ctx.fillStyle="#f00";
        ctx.fillRect(left,0,100,100);
        ctx.stroke();        
        if(left>700){
            clearInterval(timer);
        }
        left+=1;
    },16);</script></body></html>

requestAnimationFrame

<!DOCTYPE html><html><head>
    <style>
        p{width: 100px;height: 100px;background-color: red;}
    </style></head><body><p id="box" width="700" height="500"></p><script>
    window.requestAnimationFrame=window.requestAnimationFrame||
            window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame;    
            let element=document.getElementById("box");    
            let left=0;
    requestAnimationFrame(step);    
    function step() {
        if(left<window.innerWidth-200){
            left+=1;
            element.style.marginLeft=left+"px";
            requestAnimationFrame(step);
        }
    }</script></body></html>

Das obige ist der detaillierte Inhalt vonImplementierungsmethode für JS-Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：So löschen Sie Dateien oder Ordner im Github-Remote-RepositoryNächster Artikel：So löschen Sie Dateien oder Ordner im Github-Remote-Repository

In Verbindung stehende Artikel

Mehr sehen