Zusammenfassung von sieben Möglichkeiten zur Implementierung von Front-End-Animationen (mit Code)

Dieser Artikel bietet Ihnen eine Zusammenfassung von sieben Methoden (mit Code), die zur Implementierung von Front-End-Animationen verwendet werden können. Ich hoffe, dass er hilfreich ist zu dir.

1. JavaScript implementiert direkt

oder setTimeout-Methode wird kontinuierlich aufgerufen, um den CSS-Stil eines Elements zu ändern und den Effekt einer Elementstiländerung zu erzielen.

<div id="rect"></div>
 
    <script>
 
        let elem = document.getElementById(&#39;rect&#39;);
 
        let left = 0;
 
        let timer = setInterval(function(){
 
            if(left<window.innerWidth-200){
 
                elem.style.marginLeft = left+&#39;px&#39;;
 
                left ++;
 
            }else {
 
                clearInterval(timer);
 
            }
 
        },16);
 
</script>

Nachteile: Javascript-Implementierung von Animationen führt normalerweise zu häufigem Neuanordnen und Neuzeichnen der Seite, was Leistung verbraucht. Es sollte im Allgemeinen in Desktop-Browsern verwendet werden. Bei der Verwendung auf mobilen Endgeräten kommt es zu offensichtlichen Verzögerungen.

2. SVG (Skalierbare Vektorgrafiken);

3. CSS3-Übergang; Animation;

5. Canvas-Animation;

requestAnimationFrame; Das Prinzip ähnelt setTimeout und setInterval. Beide lösen Animationsaktionen durch kontinuierliche Schleifenmethodenaufrufe in Javascript aus. Allerdings ist requestAnimationFrame eine vom Browser speziell für Animationen optimierte API, deren Leistung besser ist als die der beiden anderen.

    <div id="rect"></div>
 
 <script type="text/javascript">
 
window.requestAnimationFrame = window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;
 
    let elem = document.getElementById("rect");
 
    let left = 0;
 
    //自动执行持续性回调
 
    requestAnimationFrame(step);
 
    //持续该改变元素位置
 
    function step() {
 
        if(left<window.innerWidth-200){
 
            left+=1;
 
            elem.style.marginLeft = left+"px";
 
            requestAnimationFrame(step);
 
        }
 
    }
 
</script>

7. jq-Animation

1) Ein- und ausblenden: .show(ms) .hide(ms) .toggle(ms) Nein Wenn Parameter bereitgestellt werden, erfolgt standardmäßig das sofortige Ein- und Ausblenden ohne Animation. Prinzip: Wird durch das Anzeigeattribut mit Millisekunden-Parameter implementiert: Es wird ein Animationseffekt angezeigt.

Umschalten zeigt ausgeblendete Elemente an und blendet angezeigte Elemente aus

2) Nach oben und unten schieben: .slideUp(ms) .slideDown(ms) .slideToggle(ms)3) Ein- und Ausblenden: .fadeIn(ms) .fadeOut(ms) .fadeToggle(ms)

2. Universelle Animation:

$(…).animate(params,speed, callback)

params: eine Karte mit Stilattributen und -werten

speed: Geschwindigkeitsparameter [optional]

callback: Funktion, die ausgeführt wird, wenn die Animation abgeschlossen ist [optional] ], Dies bezieht sich in der Callback-Funktion auf das aktuelle DOM-Element, das die Animation abspielt

8. Zusammenfassung

Desktop-Browser empfehlen die Verwendung von Javascript, um Animationen oder SVG direkt zu implementieren.

Das mobile Endgerät kann die Verwendung von CSS3transition, CSS3animation, Canvas oder requestAnimationFrame in Betracht ziehen

Verwandte Empfehlungen:

SVG-Animation in der Front-End-Entwicklung

Mobile Web-Front-End-Entwicklung CSS-Animationserfahrung Sharing_html/css_WEB-ITnose

Kapselung mobiler Animationsfunktionen_html/css_WEB-ITnose

Das obige ist der detaillierte Inhalt vonZusammenfassung von sieben Möglichkeiten zur Implementierung von Front-End-Animationen (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!