Erklärung der dynamischen Front-End-Effekte und tatsächlicher Kampf

Jetzt live: LF AI Foundation veranstaltet die erste AICON 2022 >>>

Autor: vivo Internet-Front-End-Team - ZhaoJie

Dieser Artikel wird das gesamte Animationssystem aus verschiedenen Blickwinkeln klassifizieren, die Implementierungsmethoden verschiedener Frontend-Animationen vorstellen und schließlich die Animationsmöglichkeiten für jede Szene in der aktuellen Entwicklung zusammenfassen.

1. Hintergrund

Die Front-End-Animationsszene braucht mehr

Die Auswahl an technischen Umsetzungslösungen für viele Animationsszenen ist relativ vage

Die Vor- und Nachteile jedes Animationsschemas und der anwendbaren Szenarien sind vage

Es gibt zu viele vorhandene Animationsbibliotheken, ich weiß nicht, welche ich auswählen soll

Die anwendbare Szene der Mainstream-Animationsbibliothek ist vage

Lassen Sie uns zunächst das gesamte Animationssystem aus verschiedenen Blickwinkeln klassifizieren, damit wir das gesamte Animationssystem klar verstehen können.

2. Klassifizierung

2.1 Winkel verwenden

Zunächst einmal unterscheiden wir den Zweck der Animation bzw. die Perspektive des Business und unterteilen unsere üblichen Animationen in Display-Animationen und interaktive Animationen.

2.1.1 Animation anzeigen

Ähnlich wie ein GIF oder ein Video. Wenn wir beispielsweise die Schatztruhe öffnen, fügen wir eine Übergangsanimation hinzu, um das ursprüngliche stumpfe Warten auf das Ergebnis zu ersetzen.

In tatsächlichen Anwendungsszenarien gibt es viele Möglichkeiten, Anzeigeanimationen zu implementieren, z. B. die Verwendung von GIF-Bildern, Leinwand, CSS3-Animation usw., aber das endgültige Ausgabeergebnis ist nicht interaktiv , d. h. vom Startzustand der Animation bis zum Ende Zustand in einem Rutsch, Benutzer können diesen Prozess wahrnehmen , aber nicht teilnehmen .

2.1.2 Interaktive Animation

Der Benutzer beteiligt sich selbst. Bei interaktiven Animationen können wir die entsprechende Operation zu einem bestimmten Zeitpunkt der Animationswiedergabe auslösen und den Benutzer dann daran teilhaben lassen. Das häufigste Beispiel ist der rote Umschlagregen , der sich nicht nur verbessern kann das Benutzererlebnis, sondern können auch die Vielfalt unserer Produkte erweitern.

Ein Problem, dem interaktive Animationen häufig gegenüberstehen, ist jedoch, dass es sehr kompliziert ist, interaktive Animationen durch nativen Code zu implementieren. Gleichzeitig sind Leistung und Kompatibilität Probleme, die ernsthaft berücksichtigt werden müssen. Eine bessere Lösung besteht darin, verwandte Frameworks zu suchen.

2.2 Zeichnen der technischen Perspektive

Unabhängig davon, mit welcher Methode die Animation erstellt wird, besteht die endgültige Präsentation auf der Frontend-Seite aus nichts anderem als den folgenden drei Formen:

1. Leinwand

2. div

3. SVG

PS: Der Einfachheit halber kann auch Video verwendet werden, aber wenn die Wiedergabeszene der Animation nicht festgelegt ist, ist die Wiedergabeanzeige von mobilem Video in verschiedenen Apps, verschiedenen Modellen und verschiedenen Systemen unterschiedlich, und es ist einfach, auf viele zu treten Gruben.

2.2.1 Leistungsunterschiede verschiedener Rendering-Techniken

Leinwand

• Hohe Effizienz, gute Performance, hohe Steuerbarkeit, kann nur Bitmaps verarbeiten, konstanter Speicherverbrauch

• Auflösung abhängig

• Ereignishandler werden nicht unterstützt

• Schwache Textwiedergabefunktionen

• Möglichkeit, das resultierende Bild im .png- oder .jpg-Format zu speichern

• Am besten geeignet für grafikintensive Spiele, bei denen viele Objekte häufig neu gezeichnet werden

div

• Einschließlich CSS-gesteuerter DOM-Animation, JS-gesteuerter DOM-Animation

• Eher geeignet für einfache Animationen mit weniger Zahlen und weniger Komplexität

SVG

• Verarbeiten Sie Vektorgrafiken ohne Verzerrung

• Auflösung unabhängig

• Ereignishandler unterstützen

• Am besten für Anwendungen mit großen Rendering-Bereichen (wie Google Maps)

• Hohe Komplexität verlangsamt das Rendern (jede Anwendung, die das DOM überbeansprucht, ist nicht schnell)

• Nicht geeignet für Gaming-Anwendungen

2.2.2 Vergleich von Canvas und SVG

Zusammenfassung in einem Satz: Alle sind 2D-Grafiken, SVG ist ein Vektordiagramm und Canvas ist eine Bitmap. Canvas wird Pixel für Pixel gerendert, was für Spiele geeignet ist.

SVG

• SVG zeichnet Vektorgrafiken, das Zoomen hat keinen Einfluss auf die Anzeige, daher ist es am besten für Anwendungen mit großen Rendering-Bereichen (z. B. Google Maps)

• SVG ist eine Sprache zur Beschreibung von 2D-Grafiken mit XML.

• SVG basiert auf XML, was bedeutet, dass jedes Element im SVG-DOM verfügbar ist. Sie können JavaScript-Ereignishandler an ein Element anhängen.

• In SVG wird jede gezeichnete Grafik als Objekt betrachtet. Wenn sich die Eigenschaften des SVG-Objekts ändern, kann der Browser die Grafik automatisch wiedergeben.

Leinwand

• Canvas verwendet JavaScript, um 2D-Grafiken zu zeichnen.

• Canvas wird Pixel für Pixel gerendert.

• In Canvas erregt eine einmal gezeichnete Grafik nicht mehr die Aufmerksamkeit des Browsers. Ändert sich deren Position, muss auch die gesamte Szene neu gezeichnet werden, einschließlich aller Objekte, die möglicherweise von Grafiken verdeckt wurden.

• Canvas belegt nur einen DOM-Knoten, und bei einigen Animationen mit vielen beweglichen Elementen wie Feuerwerk und Schnee ist die Leistung besser als bei CSS/SVG.

Leistungsvergleich

• Im Allgemeinen verschlechtert sich die Leinwand mit zunehmender Bildschirmgröße, da mehr Pixel gezeichnet werden müssen.

• Wenn die Anzahl der Objekte auf dem Bildschirm zunimmt, wird SVG langsam schlechter, da wir diese Objekte ständig zum DOM hinzufügen.

• Diese Messungen sind nicht unbedingt genau und variieren notwendigerweise in Implementierung und Plattform, ob vollständig hardwarebeschleunigte Grafiken verwendet werden sollen, und der Geschwindigkeit der JavaScript-Engine.

2.3 Animationstyp Winkel

Front-End-dynamische Entwicklung, das erste, was Sie bestimmen sollten, ist

Animationsverwendung -> Animationstyp bestätigen -> Zeichentechnik bestätigen -> Bestätigen, wie die Animation implementiert wird.

Obwohl es drei Träger (Zeichentechniken) für die endgültige Darstellung von Animationen gibt, gibt es viele Möglichkeiten, Animationen zu erreichen.Wir müssen die Umsetzung von Animationen von der Art der Animation aus diskutieren:

(1) Frame-by-Frame-Animation (Sequenz-Frame-Animation)

• GIF-Implementierung

• CSS-Implementierung (Animation)

• JS+DOM-Implementierung

• JS+Canvas-Implementierung

(2) Tween-Animation (Tween-Animation\Keyframe-Animation)

• Die CSS-Implementierung (Übergang, Animation usw.) verwendet einige Beschleunigungsfunktionen

• JS-Implementierung

(3) SVG-Animation

• Definieren Sie Diagramme im XML-Format

• Sie können KI und andere SVG-Bearbeitungstools verwenden, um SVG-Bilder zu generieren, und dann mit vorhandenen Bibliotheken wie anime.js und GSAP für die Animationsproduktion zusammenarbeiten

(4) Skelettanimation

• Im Allgemeinen werden Tools wie Spine und DragonBones verwendet, um die entsprechenden Ressourcenbilder und JSON-Animationskonfigurationsressourcen vor der Verwendung zu exportieren.

(5) 3D-Animation

• Die DOM-Manipulation wird mit CSS 3D implementiert. (perspektivische Eigenschaft, css3d-engine )

• WebGL zur Szenenkonstruktion (Three.js etc.)

• Nachdem die 3D-Modellanimation mit Blender oder Maya erstellt wurde, kann sie zur Verwendung exportiert werden

2.3.1 Frame-by-Frame-Animation (Sequenz-Frame-Animation)

Bild-für-Bild-Animation besteht darin, Bild-für-Bild-Inhalte im Zeitrahmen zu zeichnen. Da es sich um eine Bild-für-Bild-Malerei handelt, hat die Bild-für-Bild-Animation eine große Flexibilität und kann fast jeden gewünschten Inhalt ausdrücken.

Da der Inhalt der Frame-Sequenz der Frame-by-Frame-Animation anders ist, erhöht sie nicht nur den Produktionsaufwand, sondern erzeugt auch eine große Menge an endgültigen Ausgabedateien, aber ihre Vorteile liegen auch auf der Hand: Da sie dem Wiedergabemodus für Filme ähnlich ist, Es eignet sich sehr gut für sehr filigrane Animationen wie 3D-Effekte, Personen oder Tiere drehen sich scharf und so weiter.

Was ist also der Kern der Umsetzung von Frame-by-Frame-Animation, nämlich das schnelle Schleifen und Abspielen dieser statischen Bilder, um einen dynamischen Animationseffekt zu erzeugen? Dies ist eine Frame-Animation.

2.3.1.1 GIF-Implementierung

Wir können Frame-Animationen in ein GIF-Bild exportieren, das GIF-Bild wird kontinuierlich abgespielt und kann nicht angehalten werden.Es wird oft verwendet, um kleine Detailanimationen zu realisieren, die kostengünstig und einfach zu verwenden sind. Aber auch seine Nachteile liegen auf der Hand:

1. In Bezug auf die Bildqualität unterstützt GIF weniger Farben (maximal 256 Farben), eine schlechte Alpha-Transparenzunterstützung und ernsthafte gezackte Bildränder;

2. In Bezug auf die Interaktion können die Spiel-, Pausen- und Spielzeiten nicht direkt gesteuert werden, und die Flexibilität ist gering;

3. In Bezug auf die Leistung verursacht GIF ein periodisches Zeichnen der Seite, und die Leistung ist schlecht.

2.3.1.2 CSS-Implementierung

CSS3-Frame-Animation ist die Lösung, auf die wir uns heute konzentrieren müssen.Der Kern besteht darin, die Animationsanimation in CSS3 zu verwenden, um genau zu sein, die Schrittfunktion steps(number_of_steps, direction) der Animation-Timing-Funktion zu verwenden, um das Kontinuierliche zu realisieren Wiedergabe von Frame-by-Frame-Animationen.

Das Realisierungsprinzip der Frame-Animation besteht darin, den Inhalt der Bilder im Bild kontinuierlich zu wechseln und das physiologische Phänomen der visuellen Retention zu nutzen, um den Animationseffekt der kontinuierlichen Wiedergabe zu realisieren.Lassen Sie uns einige Schemata zur Erstellung von CSS3-Frame-Animationen vorstellen.

(1) Kontinuierliches Umschalten der Animationsbildadresse src (nicht empfohlen)

Wir legen das Bild in den Hintergrund des Elements (background-image) und wechseln den Frame, indem wir den Wert von background-image ändern. Diese Methode hat jedoch die folgenden Nachteile, weshalb diese Lösung nicht empfohlen wird.

• Mehrere Bilder führen zu mehreren HTTP-Anforderungen

• Das erste Laden jedes Bildes verursacht ein Flackern beim Umschalten zwischen Bildern

• Schlecht für die Dateiverwaltung

(2) Kontinuierliches Wechseln der Position des Sprite-Bildes (empfohlen) Wir führen alle Rahmenanimationsbilder zu einem Sprite-Bild zusammen und realisieren das Umschalten des Animationsrahmens, indem wir den Wert der Hintergrundposition ändern. Tun Sie es in zwei Schritten:

Schritt eins:

 Fügen Sie die Animationsframes zu einem Sprite-Bild zusammen. Die Anforderungen an das Sprite-Bild sind in der Vorbereitung der obigen Materialien zu sehen. Das folgende Animations-Sprite-Bild hat beispielsweise insgesamt 20 Frames.

 

(Das Bild stammt aus: Verschiedene Implementierungen und Leistungsvergleiche von Frame-Animationen )

Schritt 2:

Verwenden Sie die Steps-Step-Funktion, um die Sprite-Map-Position zu wechseln

Einen schreiben:

<div class="sprite"></div>


.sprite {
    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(1,end) both infinite;
}
@keyframes frame {
    0% {background-position: 0 0;}
    5% {background-position: -300px 0;}
    10% {background-position: -600px 0;}
    15% {background-position: -900px 0;}
    20% {background-position: -1200px 0;}
    25% {background-position: -1500px 0;}
    30% {background-position: -1800px 0;}
    35% {background-position: -2100px 0;}
    40% {background-position: -2400px 0;}
    45% {background-position: -2700px 0;}
    50% {background-position: -3000px 0;}
    55% {background-position: -3300px 0;}
    60% {background-position: -3600px 0;}
    65% {background-position: -3900px 0;}
    70% {background-position: -4200px 0;}
    75% {background-position: -4500px 0;}
    80% {background-position: -4800px 0;}
    85% {background-position: -5100px 0;}
    90% {background-position: -5400px 0;}
    95% {background-position: -5700px 0;}
    100% {background-position: -6000px 0;}
}

Fragen zur obigen Animation?

Frage 1: Jetzt, wo die Keyframes im Detail definiert sind, können wir nicht die Schritte-Funktion verwenden und die lineare Änderung direkt definieren?

animation: frame 10s linear both infinite;

Wenn wir es so definieren, wird die Animation nicht schrittweise und schrittweise ausgeführt, sondern ändert kontinuierlich die Position des Hintergrundbilds, was ein Bewegungseffekt ist, kein Schalteffekt, wie unten gezeigt:

Frage 2 :  Sollte es nicht auf 20 Schritte eingestellt werden, warum wurde es 1?

Hier betrachten wir zunächst die Eigenschaft animation-timing-function. Die CSS-Eigenschaft animation-timing-function definiert den Rhythmus, in dem CSS-Animationen während jedes Animationszyklus ausgeführt werden.

Zusammenfassend können wir das wissen, weil wir einen Animationszyklus im Detail definieren, dh er ändert sich einmal zwischen 0% und 5% und einmal zwischen 5% und 10%, damit wir den gewünschten Effekt erzielen können so schreiben.

Zwei schreiben:

<div class="sprite"></div>.sprite {    width: 300px;
    height: 300px;
    background-repeat: no-repeat;
    background-image: url(frame.png);
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {    0% {background-position: 0 0;}//可省略
    100% {background-position: -6000px 0;}
}

Hier definieren wir den Start und das Ende des Keyframes, d. h. definieren eine Keyframe-Periode, aber da wir die Anzeige jedes Frames nicht im Detail definieren, müssen wir das 0%~100%-Intervall in 20 Schritte aufteilen Bühnenausstellung.

(3) Bewegen Sie die Position des Sprite-Bildes kontinuierlich (auf dem mobilen Endgerät empfohlen)

Es ist im Grunde dasselbe wie das zweite, außer dass der Prozess des Wechselns der Position des Sprite-Bildes durch transform:translate3d() ersetzt wird, aber eine zusätzliche Ebene von overflow:hidden;, die Verwendung von transform kann die GPU-Beschleunigung aktivieren und die Maschine verbessern Rendering-Effekt und lösen effektiv das Problem des Frame-Animations-Jitters auf mobilen Endgeräten.

<div class="sprite-wp">    <div class="sprite"></div></div>

.sprite-wp {
    width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {
    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
    animation: frame 333ms steps(20) both infinite;
}
@keyframes frame {
  0% {transform: translate3d(0,0,0);}
    100% {transform: translate3d(-6000px,0,0);}
}

Detaillierte Erklärung der Funktion steps()

Aus dem obigen Code können wir entnehmen, dass der Kern der CSS-Implementierung darin besteht, die Step-Funktionsschritte (number_of_steps, direction) der Animation-Timing-Function-Easing-Funktion zu verwenden, um die kontinuierliche Wiedergabe einer Frame-für-Frame-Animation zu realisieren.

Als nächstes schauen wir uns die Funktion steps() an:

steps gibt eine Step-Funktion mit zwei Argumenten an:

• Der erste Parameter gibt die Anzahl der Intervalle in der Funktion an (muss eine positive Ganzzahl sein);

• Der zweite Parameter ist optional und gibt einen schrittweisen Wechsel am Anfang oder Ende jedes Intervalls an. Er akzeptiert zwei Werte, Start und Ende. Der Standardwert ist Ende.

• Das erste Startbild ist das Ende der ersten Animation, und das erste Endbild ist der Beginn der ersten Animation.

Neben der Steps-Funktion hat die Animation-Timing-Funktion auch zwei Attributwerte step-start und step-end bezogen auf die Frame-by-Frame-Animation:

• step-start ist äquivalent zu steps(1,start)

• step-end ist äquivalent zu steps(1,end)

2.3.1.3 JS-Implementierung

(1) Steuern Sie den src-Attributwechsel von img über JS (nicht empfohlen)

Wie beim background-image-Attribut zum Wechseln von Elementen in der obigen CSS3-Frame-Animation wird es mehrere Anfragen und andere Probleme geben, daher empfehlen wir diese Lösung nicht, aber dies ist eine Lösung.

(2) Steuern Sie das Zeichnen von Leinwandbildern über JS

Das Prinzip der Rahmenanimation durch Leinwand besteht darin, das Bild mit der drawImage-Methode auf die Leinwand zu zeichnen, und wir können den gewünschten Effekt erzielen, indem wir ständig löschen und neu zeichnen.

<canvas id="canvas" width="300" height="300"></canvas>(function () {    var timer = null,
        canvas = document.getElementById("canvas"),
        context = canvas.getContext('2d'),
        img = new Image(),
        width = 300,
        height = 300,
        k = 20,
        i = 0;
    img.src = "frame.png";    function drawImg() {
        context.clearRect(0, 0, width, height);
        i++;        if (i == k) {
            i = 0;
        }
        context.drawImage(img, i * width, 0, width, height, 0, 0, width, height);        window.requestAnimationFrame(drawImg);
    }
    img.onload = function () {        window.requestAnimationFrame(drawImg);
    }
})();

Der obige Animationseffekt wird erzielt, indem die X-Koordinatenposition des zugeschnittenen Bildes geändert wird, oder er kann auch erreicht werden, indem die Koordinatenposition des auf der Leinwand platzierten Bildes wie folgt geändert wird:

context.drawImage(img, 0, 0, width*k, height,-i*width,0,width*k,height);

(3) Steuern Sie Änderungen von CSS-Eigenschaftswerten über JS

Diese Methode ist die gleiche wie die vorherige CSS3-Frame-Animation, es gibt drei Methoden, eine besteht darin, das Element Hintergrundbild Adresse Hintergrundbild über JS umzuschalten, eine besteht darin, das Element Hintergrundbild auf Position Hintergrund-Position über JS umzuschalten, und die Der letzte ist, das Element durch JS transform:translate3d() zu verschieben, der erste wird nicht eingeführt, da es auch Probleme wie Mehrfachanfragen geben wird, die Verwendung wird nicht empfohlen, die beiden letzteren werden hier implementiert.

Position des Hintergrundbildes des Elements umschalten background-position

.sprite {    width: 300px;
    height: 300px;
    background: url(frame.png) no-repeat 0 0;
}

<div class="sprite" id="sprite"></div>(function(){    var sprite = document.getElementById("sprite"),
      picWidth = 300,
      k = 20,
      i = 0,
      timer = null;    // 重置背景图片位置
    sprite.style = "background-position: 0 0";    // 改变背景图位置
    function changePosition(){
        sprite.style = "background-position: "+(-picWidth*i)+"px 0";
        i++;        if(i == k){
            i = 0;
        }        window.requestAnimationFrame(changePosition);
    }    window.requestAnimationFrame(changePosition);
})();

Position des Hintergrundbilds des Elements verschieben transform:translate3d()

.sprite-wp {   width: 300px;
    height: 300px;
    overflow: hidden;
}
.sprite {    width: 6000px;
    height: 300px;
    will-change: transform;
    background: url(frame.png) no-repeat center;
}

<div class="sprite-wp">    <div class="sprite" id="sprite"></div></div>

(function () {
    var sprite = document.getElementById("sprite"),
        picWidth = 300,
        k = 20,
        i = 0,
        timer = null;
    // 重置背景图片位置
    sprite.style = "transform: translate3d(0,0,0)";
    // 改变背景图移动
    function changePosition() {
        sprite.style = "transform: translate3d(" + (-picWidth * i) + "px,0,0)";
        i++;
        if (i == k) {
            i = 0;
        }
        window.requestAnimationFrame(changePosition);
    }
    window.requestAnimationFrame(changePosition);
})();

2.3.1.4 Leistungsanalyse

Wir haben die FPS, CPU-Auslastung, GPU-Auslastung, Scripting, Rendering, Painting und Speichernutzung jedes Schemas durch verschiedene Tools des Chrome-Browsers überprüft und die folgenden Daten erhalten:

Durch die Analyse der oben genannten Daten können wir die folgenden Punkte ziehen:

1. Mit Ausnahme des Schemas CSS transform:translate3d() können die FPS anderer Schemata ein glattes Niveau von 60 FPS erreichen, aber die FPS dieses Schemas sind nicht sehr niedrig.

2. Das am wenigsten CPU-intensive Schema ist das CSS-Schema transform:translate3d().

3. Die Lösung mit der geringsten GPU-Nutzung ist die JS-Leinwandzeichenlösung.

4. CSS-Schemata haben keinen Skripting-Overhead.

5. Das kleinste Rendering ist das CSS-Schema transform:translate3d().

6. Das kleinste Gemälde ist das CSS-Schema transform:translate3d().

7. Die Speichernutzung der einzelnen Programme ist nicht sehr unterschiedlich.

Fazit: Wir sehen, dass das CSS-Schema transform:translate3d() unter den 7 Metriken die schlechtesten 4 erreicht und aus dieser Sicht haben wir allen Grund, dieses Schema für die CSS-Frame-Animation zu wählen.

 

2.3.2 Tween-Animation (Tween-Animation\Keyframe-Animation)

Tween-Animation ist eine der Grundformen der Animation, auch bekannt als Zwischenbildanimation, Verlaufsanimation, die sich auf den Schlüsselzustand der Animation bezieht, dh das Schlüsselbild, und der Übergangsprozess zwischen den Schlüsselbildern muss nur sein vom Computer verarbeitet und gerendert, eine Form der Animation.

Um es ganz klar zu sagen, wenn wir Animationen machen, müssen wir nur in einigen wenigen besonderen Momenten den Zustand der Animation angeben, und der Rest des Zustands wird automatisch vom Computer berechnet und ergänzt.

Zu den üblichen Mitteln zur Realisierung von Tweening-Animationen gehören hauptsächlich die folgenden:

• CSS3-Animation: Fügen Sie Animations-Tweens zwischen jedem Keyframe über die Eigenschaft animation (Zeitfunktion außer steps()) ein.

• CSS3-Übergang: Anders als bei Animationen kann der Übergang nur zwei Keyframe-Zustände im Anfangs- und Endmoment festlegen.

• Animieren mit JavaScript: Zum Beispiel eine JavaScript-Animationsbibliothek oder ein Framework, Anime.js oder TweenJS, eine der Suiten von CreateJS. Darüber hinaus hat die von GreenSock ins Leben gerufene GSAP (GreenSock Animation Platform), die in der Flash-Branche bekannt ist, ebenfalls neu die Unterstützung für Javascript-Animationen eingeführt.

2.3.2.1 CSS-Implementierung

(1) Übergangsanimation

Transition ermöglicht CSS-Eigenschaftswerten einen reibungslosen Übergang innerhalb eines bestimmten Zeitintervalls, dh des Anfangszustands und Endzustands des angegebenen Elements, das eine Animation vervollständigen kann, und die zwischenzeitlichen Änderungen werden vollständig vom Browser selbst bestimmt. Die Wirkung der Animation hängt hauptsächlich von den übergangsbezogenen Eigenschaften ab.

Animationen mit Übergängen haben jedoch auch erhebliche Nachteile:

1. Übergänge erfordern das Auslösen von Ereignissen, sodass sie beim Laden der Seite nicht automatisch ausgeführt werden können.

2. Übergänge sind einmalig und können nicht wiederholt werden, es sei denn, sie werden wiederholt ausgelöst.

3. Eine Transition kann nur einen Startzustand und einen Endzustand definieren und keinen Zwischenzustand, dh es gibt nur zwei Zustände.

4. Eine Übergangsregel kann nur die Änderung eines Attributs definieren und kann nicht mehrere Attribute umfassen.

(2) Animationsanimation

Die Verwendung von Animationen kann eine vollständige CSS-Tween-Animation vervollständigen.Wie oben erwähnt, müssen wir nur den Animationsstatus einiger spezieller Momente definieren. Dieser besondere Moment wird normalerweise als Keyframe bezeichnet.

Schlüsselbilder Schlüsselbilder

Keyframes haben ihre eigenen Grammatikregeln. Ihr Name beginnt mit "@keyframes", gefolgt vom "Namen der Animation" und einem Paar geschweifter Klammern "{}". Die Klammern sind einige Stilregeln für verschiedene Zeiträume. Ein bisschen so unser Schreiben im CSS-Stil.

Für eine Stilregel in „@keyframes“, die sich aus mehreren Prozentsätzen zusammensetzt, z. B. zwischen „0 %“ und „100 %“, können wir in dieser Regel mehrere Prozentsätze erstellen, und wir geben jeden Prozentsatz an Elemente mit Animationseffekten weiter mit unterschiedlichen Attributen hinzugefügt, so dass die Elemente eine sich ständig verändernde Wirkung erzielen können, wie z. B. Verschieben, Ändern der Farbe, Position, Größe, Form etc. des Elements.

Beachten Sie jedoch, dass wir „fromt“ und „to“ verwenden können, um darzustellen, wo eine Animation beginnt und endet, d. h. „from“ entspricht „0 %“ und „to“ entspricht „100“. %" ist erwähnenswert, dass "0%" das Prozentzeichen nicht wie andere Attributwerte weglassen kann. Wir müssen hier das Prozentzeichen ("%") hinzufügen. Wenn es nicht hinzugefügt wird, werden wir Die Keyframes sind ungültig und haben keine Wirkung . Denn die Einheit der Keyframes akzeptiert nur Prozentwerte. Schauen Sie sich den spezifischen Code an:

@keyframes IDENT {
    from {
        Properties:Properties value;
    }
    Percentage {
        Properties:Properties value;
    }
    to {
        Properties:Properties value;
    }
}
/*或者全部写成百分比的形式：*/
@keyframes IDENT {
    0% {
        Properties:Properties value;
    }
    Percentage {
        Properties:Properties value;
    }
    100% {
        Properties:Properties value;
    }
}

IDENT ist ein Animationsname, Sie können ihn nehmen, wie Sie möchten. Natürlich ist es besser, semantisch zu sein. Prozent ist ein Prozentwert. Wir können viele solcher Prozentsätze hinzufügen. Eigenschaften sind CSS-Attributnamen, wie z. B. links, Hintergrund usw ., und Wert ist der relative Wert Der Attributwert des entsprechenden Attributs.

2.3.2.2 JS-Implementierung

Mithilfe von JavaScript zum Erstellen von Animationen können Sie eine Open-Source-JavaScript-Animationsbibliothek oder ein Framework wie Anime.js oder TweenJS verwenden. Nehmen wir Anime.js als Beispiel, um zu demonstrieren, wie eine Tween-Animation implementiert wird.

Anime.js ist bis zu einem gewissen Grad auch eine CSS3-Animationsbibliothek, die auf alle CSS-Eigenschaften anwendbar ist, und die implementierten @keyframes können Frame-Animationen bequemer implementieren und die komplexe Definitionsmethode von CSS3 ersetzen. Jeder Rahmen ist als ein Array von Objekten definiert.

Poke me: Keyframes-Instanz

anime({ 
    targets: 'div', 
    translateX: [ 
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧 
        { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧 
    ] 
}) //这个例子实现了目标元素在两帧中实现水平位移

Die bereitgestellte Timeline kann komplexere Animationseffekte realisieren. Durch diese Timeline können wir die Beziehung zwischen verschiedenen Animationen aufrechterhalten und dann durch mehrere verschiedene Animationen eine komplexere Animation bilden.

Poke me: Timeline-Instanz

var myTimeline = anime.timeline(); 
//通过.add()方法添加动画 
myTimeline 
.add({ 
    targets: '.square', 
    translateX: 250 
}) 
.add({ 
    targets: '.circle', 
    translateX: 250 
}) 
.add({ 
    targets: '.triangle', 
    translateX: 250 
});

2.3.3 SVG-Animation

Wenn wir Animationen implementieren, werden wir nach und nach feststellen, dass die meisten Elemente Bilder sind und die Bilder im Voraus voreingestellt sind und nicht geändert werden können, sondern nur durch neue Bilder ersetzt werden können, z. B. wenn wir eine Smile-Animation für Sie realisieren möchten müssen zwei Bilder zeichnen, eines mit geschlossenem Mund und eines mit offenem Mund lächelnd, und dann Bild für Bild abspielen. Wenn Sie genügend Bilder haben, sieht ein solches Bild nicht starr aus. Wenn es weniger als 24 Bilder hat, wird es unnatürlich. Wie können Sie reibungslose Änderungen erzielen, ohne den Arbeitsaufwand zu erhöhen? Wir haben die Idee der Keyframe-Animation auf die Verzerrung des Elements selbst übertragen, wodurch das Konzept der „flexiblen Animation“ geboren wurde.

2.3.3.1 Erläuterung der SVG-Animation

(Bildquelle: Offizielle GSAP-Website )

Wie aus der obigen Abbildung ersichtlich ist, können sich Elemente gegenseitig ändern und sind sehr glatt. Eine solche Animation erfordert keine schwere Waffe wie Leinwand, und ein einfaches DOM kann erreicht werden. SVG ist wirklich ein Artefakt, nicht nur in der Die Realisierung von Symbolen und Schriftarten ist unverwechselbar und einzigartig bei der Realisierung flexibler Animationen.

SVG ist immer noch das DOM. Es hat ein eigenes Animations-Tag, unterstützt aber auch CSS-Eigenschaften. Das Wesen der Animation besteht darin, sich auf Linien und Füllungen zu verlassen. Änderungen in Linien führen zu Änderungen in der Füllfläche und damit zu Änderungen in Formen. Die Linie hängt vom Pfad und dem Ankerpunkt ab, und die Änderung des Pfads und des Ankerpunkts wirkt sich direkt auf die Änderung der Linie aus.

Sie können KI und andere SVG-Bearbeitungstools verwenden, um SVG-Bilder zu generieren, und dann mit vorhandenen Bibliotheken wie anime.js und GSAP für die Animationsproduktion zusammenarbeiten.

Unten implementieren wir eine SVG-Pfadanimation durch anime.js.

SVG-Zeichnungspfad

Poke me: SVG-Beispiel

var path = anime.path('.motion-path-demo path');


anime({
  targets: '.motion-path-demo .el',
  translateX: path('x'),
  translateY: path('y'),
  rotate: path('angle'),
  easing: 'linear',
  duration: 2000,
  loop: true
});

(Bildquelle: Animejs offizielle Website )

2.3.4 Skelettanimation

Die von SVG implementierte Animation ist relativ lokal und klein, und der Anwendungsbereich ist relativ eng, aber wenn wir komplexe flexible Animationen oder sogar Spiele implementieren, müssen wir immer noch Skelettanimationen verwenden, um dies zu erreichen.

(Bildquelle: Offizielle DragonBones-Website )

Aus dem obigen Bild können wir sehen, dass die Flügel des Drachen ein Bild sind, aber die Muskelkontraktion und -entspannung, die durch das Schlagen der Flügel bewirkt wird, kann durch die lokale Verzerrung und Deformation des Bildes erreicht werden. Wie wird diese Animation erreicht? Dies führt zu einem sehr wichtigen Konzept in der Skelettanimation: Grid .

Hier diskutieren wir dieses Konzept auf einfache Weise. Um lokale Änderungen im Bild zu erreichen, müssen wir das Bild in Blöcke unterteilen. Jeder Block wird als Gitter bezeichnet. Jedes Gitter hat seine eigenen Eckpunkte und Kanten sowie die Verschiebung der Eckpunkte. Es bewirkt eine Änderung der Form des Gitters, und die Änderung der Form bewirkt eine Änderung des angehängten Bildes. Ist das Konzept eines Gitters Pfaden und Ankern sehr ähnlich?Egal um welche Technologie es sich handelt, die Implementierungslogik ist ähnlich.Wichtig ist, nicht ständig auf die unterschiedlichen und sich ändernden Teile zu starren, sondern diese unveränderten Stellen in der richtigen Reihenfolge zu finden um einen Bypass zu erreichen.

Das Erstellen solcher Animationen ist nicht kompliziert, Sie können Tools wie Spine und DragonBones verwenden, aber das Erstellen von Animationen ist wirklich eine manuelle Aufgabe, und Sie müssen ständig debuggen, um einen komfortablen Zustand zu erreichen.

2.3.4.1 Erläuterung der Skelettanimation

Skelettanimation ist eine Animation, die durch Binden der Bilder verschiedener Körperteile des Charakters an die miteinander verbundenen "Knochen" und durch Steuern der Position, Drehrichtung und Vergrößern und Verkleinern dieser Knochen erzeugt wird.

Die Skelettanimation, die wir oft sagen, ist im Allgemeinen in zwei Teile unterteilt:

1. Skelett

2. Haut

Die am Skelett beteiligten Daten umfassen zwei:

• Einer ist die Topologie des Skeletts (Verbindung, Eltern-Kind-Beziehung).

• Die zweite sind die verschiedenen Posen des Skeletts, dh die jeder Aktion entsprechende Positionsinformation des gesamten Skeletts.

Skinning drückt Informationen über Scheitelpunkte aus, die mit Bones verbunden sind.

Der Prozess der Knochenbindung besteht darin, zu bestimmen, welche Knochen von jedem Scheitel betroffen sind und wie viel Gewicht von jedem Knochen beeinflusst wird.Zum Beispiel kann die Haut des Ellbogens von den Knochen des Oberarms und des Unterarms gleichzeitig beeinflusst werden Zeit und ist weit vom Ellbogen entfernt, ein Teil davon kann nur von den Unterarmknochen betroffen sein. Im Allgemeinen unterstützt bei der 3D-Skelettanimation jeder Scheitelpunkt bis zu 4-8 Knochen und wirkt sich gleichzeitig darauf aus, wodurch die Wirkung der gesamten Haut bereits genau ausgedrückt werden kann.

• Vorteile der Skelettanimation:

Die Skelettanimation erfordert mehr Prozessorleistung als die herkömmliche Frame-by-Frame-Animation, hat aber auch mehr Vorteile:

1. Animationen sind lebendiger und realistischer.

2. Bildressourcen belegen den kleinsten Speicherplatz: Die Bildkapazität von Skelettanimationen kann um 90 % reduziert werden (das Komprimierungsschema der Konfigurationsdatei H5 wird später ausführlich erläutert).

3. Automatisches Tween des Animationswechsels: Die Übergangsanimation wird automatisch generiert, um die Aktion flexibler zu gestalten.

4. Knochen steuerbar: Sie können die Knochen durch Code steuern, den Austausch der Charakterausrüstung einfach realisieren und sogar eine spezielle Steuerung oder Ereignisüberwachung für einen bestimmten Knochen durchführen.

5. Skelett-Ereignisframe: Die Animation wird bis zu einer bestimmten Aktion oder einem bestimmten Frame ausgeführt und löst das benutzerdefinierte Ereignisverhalten aus.

6. Vererbung von Aktionsdaten: Mehrere Charaktere können sich einen Satz von Animationsdaten teilen.

7. Kann Physik-Engine und Kollisionserkennung kombinieren.

2.3.4.2 Skelettanimationsproduktion

Schauen wir uns zunächst an, wie Skelettanimationen erstellt werden:

Skelettanimationen werden hauptsächlich mit Tools wie Spine und DragonBones erstellt.

• Drachenknochen

(Bildquelle: Offizielle DragonBones-Website )

DragonBones wurde aus Flash-Animationen erstellt. Die ursprüngliche Absicht war es, die Menge an Ressourcen zu reduzieren und feinkörnigere Aktionen (z. B. interaktiv) zu erreichen, um die Kunst von der mühsamen Arbeit zu befreien, Sprie Sheet Frame für Frame zu zeichnen Jeder Rahmen ist in kleinere Grundkacheln wie Arme, Beine, Oberkörper usw. unterteilt, und jede Grundkachel ist immer noch die kleinste steuerbare Einheit.

Die folgenden Spiel- und Rendering-Engines unterstützen das Rendern exportierter DragonBones-Dateien:

(Bildquelle: Offizielle DragonBones-Website )

• Wirbelsäule

(Bildquelle: Spine offizielle Website )

Spine ist ein Bearbeitungstool für 2D-Skelettanimationen für die Spieleentwicklung. Spine wurde entwickelt, um einen effizienteren und optimierten Arbeitsablauf zum Erstellen der Animationen zu bieten, die Ihre Spiele benötigen.

Ein professionelles Bearbeitungstool für 2D-Skelettanimationen in der Branche, das von Animatoren aufgrund seiner Benutzerfreundlichkeit und Stabilität empfohlen wird. Die folgenden Spiele- und Rendering-Engines unterstützen von Spine exportierte Rendering-Dateien:

(Bildquelle: Spine offizielle Website )

Lassen Sie uns einen kleinen Fall von Skelettanimation machen

• Knochen erstellen

Zuerst müssen wir die Knochen der Hand erstellen, wie unten gezeigt:

1. 1 Stellen Sie sicher, dass sich die obere linke Ecke im SETUP-Modus befindet

2. Stellen Sie sicher, dass der Root-Bone in der rechten Ansicht ausgewählt ist, der Eltern-Bone muss beim Erstellen des Bones ausgewählt werden

3. Klicken Sie auf die Schaltfläche Erstellen in der unteren linken Ecke

4. Beginnen Sie, 5 Knochen nacheinander zu erstellen

• Erstellen Sie ein Netz mit Skins

Dann müssen wir ein Hautnetz (MESH) für die Hand erstellen, wie in der Abbildung unten gezeigt: 

Klicken Sie zuerst auf die Schaltfläche Erstellen, um einen Bone zu erstellen und den Bone-Erstellungsmodus zu verlassen

1. Wählen Sie die Handkarte (Anhang)

2. Überprüfen Sie die Mesh-Option am unteren Rand

3. Klicken Sie auf die Schaltfläche Bearbeiten in der unteren rechten Ecke

4. Menü Edit Mesh aufgerufen

5. Aktivieren Sie die Option Verformt im Menü Netz bearbeiten

6. Klicken Sie im Menü Mesh bearbeiten auf die Schaltfläche Erstellen

7. Beginnen Sie mit der Erstellung von Gitterpunkten auf der Hand

8. Scheitelpunkte können verschoben werden, indem Sie auf die Schaltfläche „Ändern“ im Menü „Netz bearbeiten“ klicken

• Stellen Sie Gitterpunktgewichte ein

Wir müssen die Gewichte jedes Knochens auf die Gitterpunkte setzen. Der gesamte Vorgang ist in der folgenden Abbildung dargestellt:

Schließen Sie zunächst das Menü Mesh bearbeiten

1. Stellen Sie sicher, dass das Häkchen immer noch der Handaufkleber ist

2. Klicken Sie auf die Schaltfläche „Gewichte“ in der unteren linken Ecke, um das Menü „Gewichte“ aufzurufen

3. Klicken Sie unten im Menü „Gewichte“ auf die Schaltfläche „Binden“, um die Knochen zu binden

4. Wählen Sie die fünf Knochen der Hand aus, bis sie alle im Menü „Gewichte“ angezeigt werden. Beachten Sie, dass die Farben der verschiedenen Knochen unterschiedlich sind

5. Klicken Sie im Menü „Gewichte“ auf die Schaltfläche „Auto“ oder drücken Sie die „esc“-Taste, um die automatische Gewichtsberechnung von Spine auszulösen

6. Überprüfen Sie das Overlay des Gewichtsmenüs, wir können die Gewichts-Heatmap nach dem Binden sehen

• Beweg dich!

Jetzt, wo wir die Hand hochheben, zeigen wir nur eine Animation zum Beugen des Arms.

Zuerst müssen wir Keyframes setzen.Lassen Sie uns Keyframes auf Frame 1 und Frame 30 setzen. Die Armpositionen, die diesen beiden Keyframes entsprechen, sind genau gleich, weil wir die Animation wiederholen müssen.

Die konkreten Schritte sind wie folgt:

1. Stellen Sie sicher, dass der Modus in der oberen linken Ecke im ANIMATE-Modus ist

2. Wählen Sie die fünf Knochen der Hand aus (halten Sie die "cmd"-Taste oder die "Control"-Taste gedrückt und klicken Sie nacheinander)

3.  Wählen Sie Rahmen 0 aus

4. Klicken Sie auf die Key-Schaltfläche unter Rotate, wir keyframen die Rotationseigenschaft des Arms

5. Bild 30 auswählen

6. Wiederholen Sie Schritt 4, sodass der Keyframe bei Frame 30 exakt mit Frame 0 übereinstimmt

Als nächstes drehen wir den Arm nur leicht und finden einen Frame in der Mitte der Frames 0-30 als Keyframe: Wir wählen Frame 15 als Keyframe in der Mitte.

1. Bild 15 auswählen

2. Stellen Sie sicher, dass die Schaltfläche Drehen ausgewählt ist

3. Drehe 5 Bones bis zu einem Winkel

4. Drücken Sie die K-Frame-Taste für Keyframing

5. Drücken Sie die Wiedergabetaste, um eine Vorschau der Animation anzuzeigen

Außerdem habe ich die andere Hand, Mund, Gesicht und Haare vernetzt, und hier ist das Rendering der Animation:

 

 

2.3.4.3 Frontend-Display-Skelettanimation

Verwenden Sie Spine, um die erstellte Skelettanimation in Ausgaberessourcen zu exportieren (Bildinformationsdatei: atlas; Animationsinformationsdatei: json, Bildbild: png), und übermitteln Sie diese Ressourcen zur Anzeige an das Front-End.

Front-End-Entwicklung Importieren Sie je nach Rendering-Engine, die Spine oder DragonBones unterstützen kann, die Rendering-Engine in das Projekt, um Skelettanimationen anzuzeigen.

2.3.5 3D-Animation

Die Implementierung der Front-End-3D-Animation kann mit CSS 3D über perspektivische Eigenschaftsoperationen oder direkt mit der Open-Source-Open-Source-Bibliothek Three.js implementiert werden.

Da die 3D-Animation viele Inhalte umfasst und der Platz begrenzt ist, werden wir später ein Kapitel eröffnen, um die Frontend-3D-Animation zu erklären.

3. Zusammenfassung bestehender Programme

3.1 Reine CSS-Implementierung

Passende Szene:  einfache Display-Animation

Verwenden Sie die Eigenschaft „Übergang\Animation“, legen Sie den entsprechenden Keyframe-Status fest und verwenden Sie einige Beschleunigungsfunktionen, um einige vereinfachte Animationen zu implementieren.

Vorteile: geringe Entwicklungskosten, keine Notwendigkeit, zusätzliche Abhängigkeiten zu importieren

Nachteile und Mängel: Es ist nur für einige einfachere Animationen geeignet und kann einige übermäßig verantwortungsbewusste Animationen nicht erreichen.

3.2 Anime.js

Anwendbare Szene:  einfache Anzeigeanimation + schwache interaktive Animation

Anime.js ist eine leichtgewichtige js-gesteuerte Animationsbibliothek. Die Hauptfunktionen sind:

1. Unterstützen Sie Keyframes, verbinden Sie mehrere Animationen

2. Unterstützung von Timeline, die die Möglichkeit bietet, komplexere Animationen zu realisieren

3. Unterstützung der Animationszustandssteuerung, Wiedergabesteuerung, Wiedergabe, Pause, Neustart, Suchanimation oder Zeitachse.

4. Unterstützung des Rückrufs des Animationszustands, Bereitstellung der Rückruffunktion zu Beginn, Ausführung und Ende der Animation

5. Unterstützt SVG-Animation

6. Bezier-Kurven können angepasst werden

7. Jede DOM-Eigenschaft, die einen numerischen Wert enthält, kann animiert werden

• GitHub: https://github.com/juliangarn...

• Codepen-Repository: https://codepen.io/collection…

• Dokumentationsdemo: http://animejs.com/documentat…

Merkmale:

Anime.js ist gewissermaßen auch eine CSS3-Animationsbibliothek, die für alle CSS-Eigenschaften gilt, und die implementierten @keyframes können Frame-Animationen bequemer implementieren und ersetzen die komplexe Definitionsmethode von CSS3. Jeder Rahmen ist als ein Array von Objekten definiert.

Poke me: Keyframes-Instanz

anime({ 
    targets: 'div', 
    translateX: [ 
        { value: 250, duration: 1000, delay: 500, elasticity: 0 }, //第一帧 
        { value: 0, duration: 1000, delay: 500, elasticity: 0 } //第二帧 
    ] 
}) //这个例子实现了目标元素在两帧中实现水平位移

Die bereitgestellte Timeline kann komplexere Animationseffekte realisieren. Durch diese Timeline können wir die Beziehung zwischen verschiedenen Animationen aufrechterhalten und dann durch mehrere verschiedene Animationen eine komplexere Animation bilden.

Poke me: Timeline-Instanz

var myTimeline = anime.timeline(); 
//通过.add()方法添加动画 
myTimeline 
.add({ 
    targets: '.square', 
    translateX: 250 
}) 
.add({ 
    targets: '.circle', 
    translateX: 250 
}) 
.add({ 
    targets: '.triangle', 
    translateX: 250 
});

Die Steuerung der Animationswiedergabe, die gebräuchlichsten sind Pause, Wiedergabe, Fortsetzen, Verfolgung des Animationsstatus, automatische Wiedergabe, Zykluszeiten, Jitter-Effekt

Poke me: Instanz der Wiedergabesteuerung

Callback-Funktionen werden für Animationen bereitgestellt, die zu Beginn, während oder nach Abschluss der Animation oder Zeitleiste ausgeführt werden.

Poke me: Callback-Instanz

var myAnimation = anime({ 
    targets: '#begin .el', 
    translateX: 250, 
    delay: 1000, 
    begin: function(anim) { // callback 
        console.log(anim.began); // true after 1000ms 
    } 
});

Promise wird unterstützt. Nachdem die Animation beendet ist, gibt der Aufruf von anime.finished ein Promise-Objekt zurück.

Poke me: Promise-Instanz

Unterstützt SVG-Zeichnungspfad, unterstützt derzeit keine Leinwandzeichnung.

Poke me: SVG-Beispiel

Bei Elementbezeichnungen mit numerischen Werten wie Input kann die Animation auch über eine Animationsinstanz gesetzt werden.

Poke me: DOM ATTRIBUTES-Instanz

anime({ 
    targets: input, 
    value: 1000, // Animate the input value to 1000 
    round: 1 // Remove decimals by rounding the value 
});

Vorteil:

• Offensichtlich realisiert anime.js nicht nur die tiefe Kapselung der CSS3-Animation, sondern realisiert auch die Betriebszustandsanimation durch js-Fahren.Timeline realisiert die Verwaltung mehrerer Zweiganimationen, was die Möglichkeit bietet, komplexere Animationen zu realisieren.

• Durch die von anime.js bereitgestellten Wiedergabesteuerungen und Rückrufe sowie die Unterstützung für Versprechungen haben wir Raum für einfache Interaktionen mit Animationen.

• Obwohl Canvas nicht unterstützt wird, unterstützt es SVG-Zeichnungspfade.

• Die Browserkompatibilität ist relativ gut, und alle Android 4 und höher werden unterstützt.

Mangel:

Anime.js ist zwar kompetent für Display-Animationen, besonders aufwendige Animationen lassen sich aber nicht realisieren, bei interaktiven Animationen muss man sich noch die Szene anschauen, eher für kleine interaktive Animationen, ähnlich wie beim Berühren Die starke Interaktion von Fußball auf dem Bildschirm ist anime.js nicht sehr vorteilhaft.

3.3 Lotte

Anwendbare Szene:  Komplexe Anzeigeanimation

Exportieren Sie die in AE erstellte Animation über das Bodymovin-Plug-in in AE in eine JSON-Datei, parsen Sie die JSON über Lottie und rendern Sie die Animation schließlich in Form von SVG/Canvas/HTML.

Es kann eine Vielzahl von komplexen Animationen, die von Designern entworfen wurden, perfekt anzeigen.

• Offizielle Dokumentation: http://airbnb.io/lottie/

• Codepen-Repository: https://codepen.io/collection…

Vorteil:

• Plattformübergreifend, einmal zeichnen, einmal konvertieren, überall verfügbar.

• Die Datei ist kleiner, lassen Sie das JSON von AE exportieren und rendern Sie es schließlich über Lottie in das Canvas/svg/html-Format.

• Einige Eigenschaften der Animation können über API manipuliert werden, wie z. B. die Animationsgeschwindigkeit; Callback-Funktionen für jeden Animationszustand können hinzugefügt werden.

• Animationen werden alle in After Effects erstellt, mit Bodymovin exportiert und ohne zusätzlichen Engineering-Aufwand nativ gerendert.

• Befreien Sie die Produktivität von Front-End-Ingenieuren und verbessern Sie die Freiheit von Designern, dynamische Effekte zu erzielen.

Mangel:

• Das Bodymovin-Plug-in muss verbessert werden, und es gibt immer noch einige AE-Effekte, die nicht erfolgreich exportiert werden können.

• Die Interaktionsunterstützung ist nicht sehr gut und wird eher zur Anzeige von Animationen verwendet.

• Die Unterstützung von Lottie für json-Dateien ist verbesserungswürdig, da derzeit einige Effekte, die erfolgreich in json-Dateien exportiert werden können, auf dem mobilen Endgerät nicht gut dargestellt werden können.

• Viele AE-Effekte werden nicht unterstützt  Unterstützte Funktionen anzeigen: Unterstützte Funktionen .

3.4 PixiIce

Anwendbare Szene:  interaktive Animation, Animationsspiele

PixiJS ist eine 2D-Rendering-Engine, und Pixi ist hauptsächlich für das Rendern von Bildern verantwortlich. Umfangreiche interaktive Grafiken, Animationen und Spiele können erstellt werden, ohne sich mit der WebGL-API befassen oder sich mit Browser- und Gerätekompatibilitätsproblemen befassen zu müssen. Inzwischen bietet PixiJS volle WebGL-Unterstützung, mit einem nahtlosen Fallback auf HTML5-Canvas, falls erforderlich. PixiJs verwendet standardmäßig WebGL zum Rendern. Sie können auch Canvas zum Rendern angeben. WebGL wird von mobilen Android 4.4-Browsern nicht unterstützt, kann jedoch mithilfe von Canvas elegant herabgesetzt werden.

• Github:  https://github.com/pixijs/pix...

• Offizielle Dokumentation: http://pixijs.download/releases…

• Offizielle Website: http://www.pixijs.com/

• Beispiele: https://pixijs.io/examples/#/...

Funktionen (aus den offiziellen DOCS):

• Unterstützt WebGL-Rendering

• Unterstützen Sie das Rendern von Leinwänden (offiziell ist PixiJS jetzt das schnellste Rendern von Leinwänden)

• Sehr einfache und benutzerfreundliche API

• Umfassende interaktive Ereignisse, z. B. vollständige Maus- und mobile Touch-Ereignisse

• Pixi verwendet fast dieselbe API wie Canvas Drawing, aber im Gegensatz zur Canvas Drawing API werden die mit Pixi gezeichneten Grafiken auf der GPU über WebGL gerendert

• Es gibt auch eine Reihe von Funktionen, die nach dem Erlernen von PixiJs verstanden werden müssen

Vorteil:

• Der größte Vorteil besteht darin, dass die GPU zum Rendern von Animationen über WebGL verwendet wird, was die Leistung erheblich verbessert.

• Aus diesem Grund sind keine tiefen Kenntnisse der WebGL-API oder der Browserkompatibilität erforderlich.

• Canvas-Fallback wird unterstützt. Wenn das aktuelle Gerät WebGL nicht unterstützt, verwendet PixiJs Canvas zum Rendern von Animationen.

• Vollständige DOCS, aktivere Community, förderlich für vertieftes Lernen. Ich habe jedoch das Gefühl, dass die Lernkosten für PixiJs relativ hoch sind.

Mangel:

• Das erste ist das Kompatibilitätsproblem: WebGL wird in Android 4.4 nicht unterstützt und kann nur mit Canvas heruntergestuft werden.

• Pixi ist hauptsächlich für das Rendern des Bildschirms zuständig, und viele andere Funktionsentwickler müssen es schreiben oder mit anderen Bibliotheken verwenden, aber aus heutiger Sicht erfüllt es unsere Anforderungen.

Leistung:

Bei Handys mit Handyversion Android 4.4 oder höher wird zusätzlich zu der durch die Codeebene bedingten unzureichenden Performance die Performance noch durch den Aufruf des GPU-Renderings über WebGL garantiert. Für Android 4.4 kann jedoch nur Canvas-Rendering verwendet werden, und die Leistung hängt immer noch von der Komplexität der Animation und der Optimierung des Codes ab

3.5 Zusammenfassung

Einfache Anzeigeanimation:

Für einfachere Animationen können wir zunächst versuchen, die Eigenschaft transition\animation von nativem CSS zu verwenden, um sie zu implementieren.

Einfache Display-Animation + schwache Interaktion:

Für eine einfache Animationsanzeige und ein einfaches interaktives Verhalten muss der Benutzer beispielsweise klicken, um den entsprechenden Vorgang anzuhalten, und die Wiedergabe der Animation nach Abschluss des Vorgangs fortsetzen. Die Interaktion ist relativ schwach, und die Anime.js-Lösung kann dies verwendet werden.

Anime.js unterstützt nicht nur alle CSS-Eigenschaften, sondern kann auch verschiedene Zustände der Animationsausführung über Timeline, Rückruf und Wiedergabesteuerung steuern, und Anime.js kann zusammenarbeiten, um SVG-Animationen zu realisieren.

Komplexe Präsentationsanimationen:

1. Wenn die erforderlichen Ressourcen sehr gering sind, können Sie zunächst die Verwendung von GIF-Animation oder Frame-by-Frame-Animations-CSS in Betracht ziehen.

2. Wenn die erforderlichen Ressourcen groß sind, können Sie das Lottie-Schema verwenden und die Schüler dann so entwerfen, dass sie AE verwenden, um json überall zu animieren, und die Animation in svg/canvas/html wiederherstellen.

Starke Interaktion & interaktive Minispiele & Skelettanimation:

1. Wenn Sie eher für interaktive Szenen verantwortlich sind oder ein kleines Spiel erstellen müssen, können Sie PixiJs verwenden, um über WebGL zu rendern, und Hardwareressourcen verwenden, um die Leistung erheblich zu verbessern.In Bezug auf die Kompatibilität können Sie dies für Browser tun, die WebGL nicht unterstützen Canvas-Rendering zur Stabilisierung verwenden zurückgehen;

2. Wenn Sie Skelettanimationen anzeigen müssen, können Sie Dateien, die von Spine oder DragonBones ausgegeben werden, über die PixiJs-Lösung rendern.

{{o.name}}

{{m.name}}