Zusatz-Animation mit dem Web-Animationen API

0
68

Diese Funktionen noch nicht gelandet in einer stabilen Browser zu der Zeit des Schreibens. Jedoch, alles, was diskutiert wird, bereits in Firefox Nightly von Standard und key Teile sind in Chrome Canary (mit der Experimental-Web-Platform-Features-flag aktiviert ist), so empfehle ich, mit einem dieser Browser (wenn Sie diesen Artikel Lesen), um zu sehen, wie viele der features in Aktion wie möglich.

Unabhängig davon Ihre bevorzugte Methode, um die animation auf dem web, es werden die Zeiten, die Sie brauchen, um zu animieren, die gleiche Eigenschaft in separate Animationen. Haben Sie vielleicht ein hover-Effekt, skaliert ein Bild und ein click-Ereignis auslöst übersetzen — sowohl Auswirkungen auf die Transformation. Standardmäßig, diese Animationen nicht wissen, etwas über das andere, und nur einer wird visuell angewendet werden (da Sie auf den selben CSS-Eigenschaft und der zweite Wert wird überschrieben).

element.animate({
transformieren: [‘translateY(0)’, ‘translateY(10px)’]
}, 1000);

/* Dieses komplett überschreiben Sie die Vorherige animation */
element.animate({
transformieren: [“Skala(1)’, ‘scale(1.15)’]
}, 1500);

Die zweite animation in diesem Web-Animationen API-Beispiel ist das einzige, das wäre visuell wiedergegeben in diesem Beispiel, wie beide Animationen gleichzeitig spielen, und es war die Letzte definiert.

Manchmal haben wir sogar grander Ideen, wo wir wollen eine grundlegende animation und dann basierend auf Benutzer-Interaktion Veränderung in der Zustand, den wir problemlos ändern, die animation ein bisschen midway, ohne dabei die bestehenden Dauer, keyframes, oder Lockerung. CSS-Animationen und die aktuellen Web-Animationen API in stabilen Browser heute können das nicht aus der box.

Eine Neue Option

Die Web-Animationen Spezifikation stellt die zusammengesetzte Eigenschaft (und den zugehörigen iterationComposite). Die Standard-composite-ist ‘ersetzen’ und hat das Verhalten, das wir hatten, seit Jahren nun, wo ein aktiv zu animieren, den Wert der Eigenschaft ersetzt einfach alle vorher gesetzten Wert — entweder von einem Regelwerk oder einer anderen animation.

Die ‘add’ – Wert ist, wo die Dinge ändern sich die bisherigen Normen.

element.animate({
transformieren: [“Skala(1)’, ‘scale(1.5)’]
}, {
Dauer: 1000,
füllen: ‘sowohl als auch’
});
element.animate({
transformieren: [‘rotate(0deg)’, ‘rotate(180GRAD)’]
}, {
Dauer: 1500,
füllen: ‘sowohl als auch’,
composite -: ‘hinzufügen’,
});

Nun beide Animationen zu sehen sein wird, wie der browser on-the-fly-Figuren aus der entsprechenden transformation an einem bestimmten Punkt im element s timeline Finanzbuchhaltung für beide Transformationen. In unserem Beispiele, die Beschleunigung ist ‘linear’ ist standardmäßig aktiviert, und Animationen zur gleichen Zeit starten, so können wir ausbrechen, was die effektive Transformation ist an einem gegebenen Punkt. Wie zum Beispiel:

  • 0ms: Skala(1) rotate(0deg)
  • 500ms: scale(1.25) rotate(60deg) (auf halbem Weg durch die erste animation, 1/3 durch Sekunde)
  • 1000ms: scale(1.5) drehen(120deg) (Ende des ersten, 2/3 durch Sekunde)
  • 1500ms: scale(1.5) drehen(180GRAD) (Ende der zweiten)

Finden Sie den Stift, Animation, Composite, die von Dan Wilson (@danwilson) auf CodePen.

So Let ‘ s Get Creative

Eine individuelle animation besteht nicht nur aus einem start-Zustand und end-Zustand — es kann seine eigene easing -, Iterations-Anzahl, – Dauer, – und mehr keyframes in der Mitte. Während ein element ist die Mitte der animation, die Sie werfen kann eine zusätzliche transformation mit seinem eigenen timing-Optionen.

Finden Sie den Stift, Fügen Sie mehr verwandeln Animationen von Dan Wilson (@danwilson) auf CodePen.

In diesem Beispiel können Sie anwenden mehrerer Animationen auf dem gleichen element, beeinflussen die transform-Eigenschaft. Damit gehen alle aus in diesem Beispiel beschränken wir jede animation zu einer einzigen transformation-Funktion zu einem Zeitpunkt (z.B. nur ein Maßstab), beginnend bei einem Standard-Wert (z.B. Skala(1) bzw. translateX(0)), und endet bei einer angemessenen zufälligen Wert auf, dass die gleiche transformation-Funktion wiederholt sich unendlich. Die nächste animation wird sich auf eine andere single-Funktion mit seiner eigenen randomisierten, Dauer und Lockerung.

element.animieren(getTransform(), //z.B. { transform: [‘rotate(0deg), ‘rotate(45deg)’] }
{
Dauer: getDuration(), //zwischen 1000 und 6000ms
Iterationen: die Unendlichkeit,
composite -: ‘hinzufügen’,
Lockerung: getEasing() //eine von zwei Optionen
});

Wenn jede animation startet, wird der browser effektiv zu finden, wo es in der bisher angewandten Animationen und starten Sie eine neue Rotations-animation mit dem angegebenen timing-Optionen. Auch wenn es schon eine rotation in die entgegengesetzte Richtung, wird der browser tun, die Mathematik, um herauszufinden, wie viel eine rotation ausgeführt werden muss.
Da jede animation hat seine eigene timing-Optionen, sind Sie wahrscheinlich zu sehen, die genau die gleiche Bewegung wiederholt sich in diesem Beispiel einmal die Sie Hinzugefügt haben ein paar. Das verleiht der animation eine frisch fühlen, wie Sie ihn sehen.

Da jede animation in unserem Beispiel beginnt bei der default-Wert (0 für übersetzungen und 1 für die Skalierung), erhalten wir einen reibungslosen start. Wenn wir stattdessen hatte keyframes wie { transform: [‘scale(.5)’, ‘scale(.8)’] }, wir würden einen Sprung, weil die nicht über diese Skala vor und plötzlich fängt die animation auf die Hälfte skalieren.

Wie werden Werte Hinzugefügt?

Transformation Werte der syntax Folgen, die der in der spec, und wenn Sie hinzufügen, eine transformation, die Ihr Anhängen an eine Liste.

Für die Transformation Animationen A, B, und C die resultierende berechnete Transformation wird der Wert [Aktueller Wert] [Aktueller Wert in B] [Aktueller Wert in C]. Zum Beispiel, vorausgesetzt, die folgenden drei Animationen:

element.animate({
transformieren: [‘translateX(0)’, ‘translateX(10px)’]
}, 1000);

element.animate({
transformieren: [‘translateY(0)’, ‘translateY(-20px)’]
}, {
Dauer:1000,
composite -: ‘hinzufügen’,
});

element.animate({
transformieren: [‘translateX(0)’, ‘translateX(300px)’]
}, {
Dauer:1000,
composite -: ‘hinzufügen’,
});

Jede animation läuft für 1 Sekunde mit einer linearen Lockerung, also auf halbem Weg durch die Animationen der daraus resultierenden verwandeln würde, haben den Wert translateX(5px) translateY(-10px) translateX(150px). Easings, Zeitdauern, Verzögerungen und mehr werden alle auf den Wert, wie Sie entlang gehen.

Transformationen sind nicht die einzige Sache, die wir animieren können, jedoch. Filter (hue-rotate(), blur(), etc) Folgen einem ähnlichen Muster, bei dem die Elemente werden an eine filter-Liste.

Einige Eigenschaften, die eine Zahl als Wert, wie die Deckkraft. Hier die zahlen addieren sich zu einer Summe.

element.animate({
Deckkraft: [0, .1]
}, 1000);

element.animate({
Deckkraft: [0, .2]
}, {
Dauer:1000,
composite -: ‘hinzufügen’,
});

element.animate({
Deckkraft: [0, .4]
}, {
Dauer:1000,
composite -: ‘hinzufügen’,
});

Da jede animation ist wieder 1s Dauer mit einem linearen Lockerung, können wir berechnen, der resultierende Wert an jedem Punkt in dieser animation.

  • 0ms: Deckkraft: 0 (0 + 0 + 0)
  • 500ms: opacity: .35 (.05 + .1 + .2)
  • 1000ms: opacity: .7 (.1 + .2 + .4)

Als solche, Sie werden nicht sehen, viel, wenn Sie mehrere Animationen, die gehören, den Wert 1 als ein Schlüsselbild. Das ist ein max Wert für seine visuellen Zustand, so hinzufügen von bis zu Werten über, die gleich Aussehen, als wäre es nur eine 1.

Finden Sie den Stift, Fügen Sie mehr Deckkraft Animationen von Dan Wilson (@danwilson) auf CodePen.

Ähnlich wie die Deckkraft und andere Eigenschaften, die akzeptiert Anzahl Werte, Eigenschaften, akzeptieren, Längen, Prozentwerten, oder Farben, wird auch die Summe zu einem einzigen Ergebnis-Wert. Mit Farben, denken Sie daran, Sie haben auch einen max-Wert zu verwenden (egal ob ein max von 255 in rgb() oder 100% Sättigung/Helligkeit im hsl()), so Ihr Ergebnis, könnte max sich zu einem weißen. Mit Längen, Sie können wechseln zwischen Einheiten (wie px-vmin), als ob es innerhalb einer calc().

Für weitere Einzelheiten der Spezifikation beschreibt die verschiedenen Arten von animation und wie das Ergebnis berechnet wird.

Arbeiten mit Fill-Modi

Wenn du nicht gerade eine unendliche animation (egal, ob Sie über ein composite-oder nicht) standardmäßig wird die animation nicht zu seinem Ende Stand, wie die animation endet. Die fill-Eigenschaft erlaubt es uns, dieses Verhalten zu ändern. Wenn Sie wollen, um einen reibungslosen übergang beim hinzufügen eines finite-animation, werden Sie wahrscheinlich wollen eine Füllmodus entweder nach vorne oder beide, um sicherzustellen, dass die end-Zustand bleibt.

Finden Sie die Stift-Spirale: Composite Add + Füllen Sie Leitet mit Dan Wilson (@danwilson) auf CodePen.

Dieses Beispiel hat eine animation mit einem gewundenen Pfad durch die Angabe einer rotation und einer translation. Es gibt zwei Schaltflächen, die Sie neu hinzufügen einer zweiten Animationen mit einer kleinen übersetzung. Da Sie angeben, fill: ‘weiter’ – jede weitere übersetzung effektiv bleibt Teil des transform-Liste. Die wachsenden (oder schrumpfenden) Spirale passt sich nahtlos an jede übersetzung, Anpassung, denn es ist eine additive animation von translateX(0) auf eine neue Höhe und bleibt an diese neue Höhe.

Ansammeln Animationen

Die neuen composite-option hat einen Dritten Wert — ‘accumulate”. Es ist konzeptionell in einer Linie mit ‘add’ mit Ausnahme bestimmter Arten von Animationen wird sich anders Verhalten. Einklang mit unserer transformieren, beginnen wir mit einem neuen Beispiel mit ‘add’ und dann diskutieren, wie ‘sammeln’ ist anders.

element.animate({
transformieren: [‘translateX(0)’, ‘translateX(20px)’]
}, {
Dauer: 1000,
composite -: ‘hinzufügen’,
});
element.animate({
transformieren: [‘translateX(0)’, ‘translateX(30px)’]
}, {
Dauer: 1000,
composite -: ‘hinzufügen’,
});
element.animate({
transformieren: [“Skala(1)’, ‘scale(.5)’]
}, {
Dauer: 1000,
composite -: ‘hinzufügen’,
});

Bei der 1 Sekunden-Marke (Ende der Animation), der effektive Wert wird:

transform: translateX(20px) translateX(30px) scale(.5)

Die visuell push ein element auf der rechten 50px und dann verkleinere Sie um die halbe Breite und halbe Höhe.

Wenn jede animation war mit “accumulate” statt, dann wäre das Ergebnis:

transform: translateX(50px) scale(.5)

Die visuell push ein element auf der rechten 50px und dann verkleinere Sie um die halbe Breite und halbe Höhe.

Keine Notwendigkeit, eine doppelte nehmen, die visuellen Ergebnisse sind in der Tat die exakt gleiche — so wie “accumulate” anders?

Technisch, wenn die Eröffnung eines transform-animation sind wir nicht mehr immer Anhängen an eine Liste. Wenn eine transformation-Funktion bereits vorhanden ist (wie die translateX() in unserem Beispiel) werden wir nicht fügen Sie den Wert, wenn wir anfangen, unsere zweite animation. Stattdessen werden die inneren Werte (d.h. die Länge der Werte) wird Hinzugefügt und in das vorhandene Funktion.

Wenn unsere visuellen Ergebnisse sind die gleichen, warum gibt es die option zu akkumulieren innere Werte vorhanden sind?

Im Falle der Transformation, um die Liste der Funktionen Fragen. Die transformation translateX(20px) translateX(30px) scale(.5) ist anders als translateX(20px) scale(.5) translateX(30px), weil jede Funktion wirkt sich auf das Koordinatensystem der Funktionen, die darauf Folgen. Wenn Sie ein scale(.5) in der Mitte, die letzteren Funktionen auch passieren, auf die Hälfte skalieren. Also mit diesem Beispiel der translateX(30px) wird visuell gerendert als 15px übersetzung auf der rechten Seite.

Finden Sie den Stift Visuelle Referenz: Transformieren von Koordinatensystemen von Dan Wilson (@danwilson) auf CodePen.

Also, mit der Akkumulation haben, können wir eine Bestellung, die ist anders, als wenn wir immer fügen Sie die Werte in die Liste.

Ansammeln, die für Jede Iteration

Habe ich schon erwähnt, dass es auch eine neue Verwandte iterationComposite Eigenschaft. Es bietet die Möglichkeit zu tun, einige der Verhaltensweisen, die wir bereits besprochen haben, außer auf einer einzigen animation von einer zur nächsten iteration.

Im Gegensatz zu composite, diese Eigenschaft hat nur zwei gültige Werte: ‘ersetzen’ (dies ist die Standardeinstellung, die Sie bereits kennen und lieben) und “accumulate”. Mit “accumulate” – Werte Folgen, die bereits diskutiert akkumulationsprozess für Listen (mit Transformation) oder zusammengezählt, um eine Anzahl von Eigenschaften wie Deckkraft.

Als Start-Beispiel, das visuelle Ergebnis für die folgenden zwei Animationen identisch wären:

Abständen.animate([{
transformieren: `rotate(0deg) translateX(0vmin)`,
Deckkraft: 0
}, {
transformieren: `rotate(50deg) translateX(2vmin)`,
opacity: .5
}], {
Dauer: 2000,
Iterationen: 2,
füllen: ‘vorwärts’,
iterationComposite: “accumulate”
});

intervals2.animate([{
transformieren: `rotate(0deg) translateX(0vmin)`,
Deckkraft: 0
},{
transformieren: `rotate(100deg) translateX(4vmin)`,
Deckkraft: 1
}], {
Dauer: 4000,
Iterationen: 1,
füllen: ‘vorwärts’,
iterationComposite: ‘ersetzen’ //default Wert
});

Die erste animation ist nur, stoßen sich die Opazität von .5, drehen 50 Grad, und bewegen 2vmin für 2000 Millisekunden. Es hat unsere neue iterationComposite Wert und wird für 2 Iterationen. Daher, wenn die animation endet, wird es für 2 * 2000ms und erreicht eine Opazität von 1 (2 * .5), gedreht 100 Grad (2 * 50deg) und übersetzt 4vmin (2 * 2vmin).

Finden Sie die Stift-Spirale mit WAAPI iterationComposite von Dan Wilson (@danwilson) auf CodePen.

Super!!! Wir haben gerade eine neue Eigenschaft, unterstützt nur Firefox Nightly neu zu erstellen, was können wir schon tun, mit der Web-Animationen-API (oder CSS)!
Die weitere interessante Aspekte der iterationComposite ins Spiel kommen, wenn Sie kombinieren es mit anderen Elementen in die Web-Animationen spec, die bald kommen werden (und auch schon in Firefox Nightly).

Neue Effekt-Optionen

Die Web-Animationen-API-so steht es in stabil den Browsern ist heute weitgehend auf Augenhöhe mit CSS-Animationen, mit einigen zusätzlichen Feinheiten wie eine playbackRate-option und die Fähigkeit zu springen/suchen, um verschiedene Punkte. Aber die Animation-Objekt ist, gewinnt man die Fähigkeit, aktualisieren Sie die Effekt-und timing-Optionen auf bereits Laufenden Animationen.

Finden Sie den Stift WAAPI iterationComposite & composite von Dan Wilson (@danwilson) auf CodePen.

Hier haben wir ein element mit zwei Animationen Auswirkungen auf die transform-Eigenschaft und setzt dabei auf composite -: ‘hinzufügen’ — das macht das element bewegt sich über den Bildschirm horizontal und bewegte es sich vertikal in einer versetzten Art und Weise. Der Endzustand ist ein wenig höher auf den Bildschirm, als die anfangs-Zustand der zweiten animation, und mit iterationComposite: ‘sammeln’ es immer höher und höher. Nach acht Iterationen die animation beendet ist und kehrt sich um weitere acht Iterationen wieder nach unten, um den unteren Rand des Bildschirms, wo der Prozess erneut beginnt.

Wir können ändern, wie weit sich des Bildschirms wird die animation geht durch ändern der Anzahl der Iterationen, die auf die Fliegen. Diese Animationen sind das spielen auf unbestimmte Zeit, aber Sie können ändern Sie die dropdown-Liste eine andere iteration-count in der Mitte der animation. Wenn Sie, zum Beispiel, gehen von sieben Iterationen, um neun, und Sie werden sehen, der sechsten iteration derzeit wird die animation läuft weiter, als ob nichts geändert hat. Jedoch sehen Sie, dass anstelle der Gründung eines reverse nach, die nächste (siebte) iteration, wird es weiterhin für zwei weitere. Sie können auch tauschen Sie neue keyframes und animation-timing wird unverändert bleiben.

animation.Effekt.timing.Iterationen = 4;
animation.Effekt.setKeyframes([
{ transform: “Skala(1)’ },
{ transform: ‘Skala(1.2)’ }
]);

Ändern von Animationen midway kann nicht etwas, was Sie jeden Tag benutzen, aber da es etwas neues ist auf der browser-Ebene wir werden lernen, seinen Möglichkeiten als die Funktionalität wird weiter verbreitet. Ändern der iteration zählt, könnte nützlich sein, für ein Spiel, wenn ein user eine bonus-Runde und gameplay weiterhin länger als ursprünglich vorgesehen. Verschiedene keyframes kann Sinn machen, wenn ein Benutzer geht von einigen Fehler-Zustand zu einem Erfolg Stand.

Wohin gehen wir von hier?

Die neuen composite-Optionen und die Möglichkeit zum ändern der timing-Optionen und keyframes, öffnen neue Türen für reaktive und choreographiert Animationen. Es gibt auch eine aktuelle Diskussion in der CSS-Arbeitsgruppe über das hinzufügen dieser Funktionalität zu CSS, auch über den Kontext von Animationen, die die Kaskade in einer neuen Weise. Wir haben Zeit, bevor das land wird in einem stabilen großen browser, aber es ist spannend zu sehen, neue Optionen kommen und einmal mehr spannend zu werden in der Lage, mit Ihnen zu Experimentieren heute.