aframe
Animation
Suche…
Einführung
Animationen und Übergänge in A-Frame werden mit dem Element <a-animation> als <a-animation> Element definiert. Das System basiert grob auf der Web-Animations-Spezifikation. A-Frame verwendet intern tween.js.
Bemerkungen
Attribute
Hier finden Sie eine Übersicht über Animationsattribute. Wir werden im Folgenden näher darauf eingehen.
| Attribut | Beschreibung | Standardwert |
|---|---|---|
| Attribut | Attribut zu animieren. Um ein Komponentenattribut anzugeben, verwenden Sie die Syntax componentName.property (z. B. light.intensity ). | Drehung |
| Start | Ereignisname, auf den gewartet werden soll, bevor die Animation beginnt. | '' |
| verzögern | Verzögerung (in Millisekunden) oder Name des Ereignisses, auf den gewartet werden soll, bevor die Animation beginnt. | 0 |
| Richtung | Richtung der Animation (zwischen from und to ). Eine von alternate , alternateReverse , normal , reverse . | normal |
| dur | Dauer in (Millisekunden) der Animation. | 1000 |
| Lockerung | Erleichterungsfunktion der Animation. Es gibt sehr viele zur Auswahl. | Leichtigkeit |
| Ende | Ereignisname, auf den gewartet werden soll, bevor die Animation angehalten wird. | '' |
| füllen | Bestimmt den Effekt einer Animation, wenn sie nicht gerade aktiv ist. Eins von backwards , both forwards , none . | vorwärts |
| von | Startwert | Aktueller Wert. |
| wiederholen | Wiederholen Sie die Zählung oder indefinite . | 0 |
| zu | Endwert Muss angegeben werden | Keiner |
Start
Das begin Attribut legt fest, wann die Animation abgespielt werden soll.
Dies kann entweder eine Zahl sein , die Millisekunden darstellt, die gewartet werden sollen, oder ein Ereignisname, auf den gewartet werden soll. Wir können beispielsweise eine Animation definieren, die 2 Sekunden wartet, bevor eine Entität skaliert wird.
<a-entity>
<a-animation attribute="scale" begin="2000" to="2 2 2"></a-animation>
</a-entity>
Oder wir können eine Animation definieren, die darauf wartet, dass das übergeordnete Element ein Ereignis mit dem Namen fade auslöst, bevor eine Entität ausgeblendet wird.
<a-entity id="fading-cube" geometry="primitive: box" material="opacity: 1">
<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>
</a-entity>
// Trigger an event to begin fading.
document.querySelector('#fading-cube').emit('fade');
Richtung
Das direction definiert, auf welche Weise zwischen dem Startwert und dem Endwert animiert werden soll.
Wenn wir eine abwechselnde Richtung definieren, wechselt die Animation zwischen den Werten from und to zu einem Jo-Jo. Wechselnde Richtungen wirken sich nur aus, wenn wir die Animation wiederholen.
| Wert | Beschreibung |
|---|---|
| wechseln | Animieren Sie in geradzahligen Zyklen von from bis to . Bei ungeradzahligen Zyklen Animation von to bis from |
| Alternate-Reverse | Animieren Sie in ungeradzahligen Zyklen von from bis to . Bei geradzahligen Zyklen Animation von to bis from |
| normal | Animieren von from bis to . |
| umkehren | Animieren von to bis from |
Lockerung
Das easing definiert die Beschleunigungsfunktion der Animation, die standardmäßig ease . Es gibt zu viele Beschleunigungsfunktionen zum Auflisten, aber wir können sie implizit erklären.
Ein möglicher Wert ist linear . Und die grundlegenden Beschleunigungsfunktionen sind ease , ease-in , ease-out und ease-in-out .
Dann gibt es noch mehr Gruppen von Beschleunigungsfunktionen. Die obigen grundlegenden Beschleunigungsfunktionen stellen jeder Gruppe von Beschleunigungsfunktionen ein Präfix vor. Die Gruppen von Beschleunigungsfunktionen sind cubic , quad , quart , quint , sine , expo , circ , elastic , back und bounce .
Zum Beispiel würde die cubic Gruppe von Beschleunigungsfunktionen aus leicht ease-cubic , ease-cubic , ease-in-cubic ease-out-cubic ease-in-out-cubic .
Füllen
Das fill definiert die Wirkung von Animationen, wenn sie nicht gerade aktiv sind. Stellen Sie sich fill als die Werte vor, die die Animation vor und / oder nach jedem Animationszyklus für die Entität festlegt. Nachfolgend sind die möglichen Werte für die fill und ihre Auswirkungen aufgeführt.
| Wert | Beschreibung |
|---|---|
| rückwärts | Bevor die Animation beginnt, stellen Sie den Startwert auf das from Wert. |
| beide | Kombinieren Sie die Effekte der Rückwärtsfüllung und der Rückwärtsfüllung. |
| vorwärts | Nachdem die Animation abgeschlossen ist, bleibt der endgültige Wert auf dem to Wert. Die Standardfüllung. |
| keiner | Stellen Sie vor Beginn der Animation den Startwert auf den Anfangswert ein. Setzen Sie den Wert nach Abschluss der Animation auf den Anfangswert zurück. |
Wiederholen
Das repeat definiert, wie oft die Animation wiederholt wird. Wir nennen jede Wiederholung der Animation einen Zyklus. Wiederholen kann entweder eine Zahl sein, die bei jedem Animationszyklus heruntergezählt wird, bis 0 erreicht ist, an dem Punkt, an dem die Animation endet, oder wir können die repeat auf indefinite und die Animation wird kontinuierlich repeat , bis die Animation manuell entfernt oder gestoppt wird.
VERANSTALTUNGEN
Das Element <a-animation> gibt einige Ereignisse aus.
| Veranstaltungsname | Beschreibung |
|---|---|
| Animationsende | Wird gesendet, wenn die Animation beendet ist. Bei Wiederholungen wird ausgegeben, wenn der Wiederholungszähler 0 erreicht. Nicht für unbestimmte Wiederholungen ausgegeben. |
| Animationsstart | Wird sofort gesendet, wenn die Animation abgespielt wird. |
Beispielanimationen
Einführungsbeispiel: Um einen 5-Meter-Orbit auf einer Entität um die Y-Achse zu definieren, der 10 Sekunden dauert, können wir die Position verschieben und die Rotation animieren. Diese Animation beginnt mit der anfänglichen Drehung um die Y-Achse von 0 Grad und geht um 360 Grad herum. Es ist mit einer Dauer von 10000 Millisekunden definiert, behält den Endwert in jedem Zyklus der Animation bei und wiederholt Endlosschleifen.
<a-entity position="5 0 0" rotation="0 0 0">
<a-animation attribute="rotation"
to="0 360 0"
dur="10000"
fill="forwards"
repeat="indefinite"></a-animation>
</a-entity>
Animieren verschiedener Arten von Eigenschaften
Das Animationssystem von A-Frame kann verschiedene Arten von Eigenschaften animieren.
vec3 Eigenschaften
A-Frame verfügt über standardmäßige vec3 Komponenten (dh position , rotation und scale ). Diese Komponenten bestehen aus drei Faktoren: X, Y und Z. Wir können drei durch Leerzeichen getrennte Zahlen an die Attribute from und übergeben to genau wie wir sie für eine Entität definieren würden. In diesem Fall geht das Animationssystem davon aus, dass wir einen vec3 Wert animieren.
Wenn Sie beispielsweise eine Entität animieren möchten, die von einer Stelle zur anderen geht, können Sie die position animieren.
<a-entity>
<a-animation attribute="position" from="1 1 1" to="2 4 -8"></a-animation>
</a-entity>
Boolesche Eigenschaften
A-Frame verfügt über Standardkomponenten, die einen einzigen booleschen Wert akzeptieren. Boolesche Werte können auch "animiert" werden, indem der Boolesche Wert am Ende jedes Animationszyklus umgedreht wird.
Wir können beispielsweise eine Animation definieren, die die Sichtbarkeit einer Entität nach 5 Sekunden deaktiviert.
<a-entity>
<a-animation attribute="visible" dur="5000" to="false" repeat="indefinite"></a-animation>
</a-entity>
Numerische Eigenschaften
Wir können auch numerische Attribute animieren. Zum Beispiel können wir die Intensität des Lichtprimitivs animieren.
<a-light intensity="1">
<a-animation attribute="intensity" to="3"></a-animation>
</a-light>
Farbeigenschaften
Wir können jede Komponenteneigenschaft mit einem Farbtyp animieren. Zum Beispiel können wir eine Box von weiß nach rot animieren.
<a-entity id="blushing-cube" geometry="primitive: box">
<a-animation attribute="material.color" from="white" to="red" dur="1000"></a-animation>
</a-entity>
Komponenteneigenschaften
Wir können eine bestimmte Eigenschaft einer Komponente mit mehreren Eigenschaften animieren. Dazu wählen wir die Komponenteneigenschaft mit der Punktsyntax aus: componentName.propertyName .
Um beispielsweise den oberen Radius eines Kegels zu animieren, können Sie den radiusTop Wert mit geometry.radiusTop auswählen.
<a-entity geometry="primitive: cone; radiusTop: 1">
<a-animation attribute="geometry.radiusTop" to="0.5"></a-animation>
</a-entity>