Animation
Es gibt drei Wege, etwas in Bewegung zu bringen. Diese Seite hilft Ihnen, den passenden zu wählen und einzurichten.
Art der Animation wählen
| Weg | Am besten für | Wo Sie ihn einrichten |
|---|---|---|
| Übergang | eine einzelne weiche Änderung von A nach B | eine Dauer am Schritt Zustand setzen |
| Zeitleiste | eine Bewegung mit Keyframes oder mehrere Objekte im selben Takt | das Panel Animation; der Schritt Animation abspielen startet sie |
| Modell-Clip | Animation, die ein importiertes Modell mitbringt | das Panel Animation, wo der Import ihn ablegt |
Zum Beispiel:
- eine Schaltfläche ausblenden oder eine Tür beim Antippen öffnen ist ein Übergang in einen anderen Zustand;
- eine Zwischensequenz ist eine Zeitleiste;
- eine laufende Figur ist ein Modell-Clip.
Animieren Sie ein Objekt nie auf zwei Arten gleichzeitig. Die Zeitleiste überschreibt unbemerkt einen Übergang. Wenn eine Animation gegen sich selbst zu arbeiten scheint, liegt es daran.
Übergänge
Geben Sie einer Änderung eine Dauer, dann läuft sie weich ab, statt zu springen. Die Schritte Zustand setzen und Eigenschaften überschreiben haben beide eine Dauer und eine Kurve (Easing).
Manche Eigenschaften ändern sich weich, alle anderen erst am Ende des Übergangs. Siehe was sich weich animieren lässt.
In einem Skript kann ctx.startTransition einen Übergang außerdem wiederholen und hin und zurück
laufen lassen (yoyo).
Damit es hin und zurück läuft, brauchen Sie repeat: 2 oder mehr.
Animationsschritte
Ereignisse starten und stoppen Animationen mit zwei Schritten:
| Schritt | Macht |
|---|---|
| Animation abspielen | spielt eine Animation aus der Zeitleiste ab, an einem beliebigen Objekt; Sie legen Schleifenmodus, Wiederholungen, Geschwindigkeit und Verzögerung fest |
| Animation stoppen | stoppt sie |
Um etwas aus einem Ereignis heraus zu verschieben, zu drehen, zu skalieren, auszublenden oder umzufärben, legen Sie im Panel Animation eine Animation an und spielen sie mit Animation abspielen ab. Für eine einzelne Änderung reicht Zustand setzen mit einer Dauer.
Ältere Projekte können auch die Schritte Transformation, Deckkraft, Material, Knochen-Transformation und Eingebaute Animation enthalten. In diesen Projekten laufen sie weiter, aber der Editor bietet sie nicht mehr an. Material zum Beispiel blendet Farbe, Deckkraft, Leuchten und Oberflächeneinstellungen der Zielobjekte zu einem gespeicherten Material hin über und behält dabei Typ und Texturen jedes Slots.
Keyframes und Easing
Ein Keyframe ist ein Wert zu einem bestimmten Zeitpunkt. Das Easing legt fest, wie sich der Wert zwischen zwei Keyframes verändert.
Das Easing gehört zu dem Keyframe, auf den sich der Wert zubewegt, nicht zu dem, von dem er kommt. Ohne Easing ändert sich der Wert gleichmäßig, in einer geraden Linie.
Easing ist eine Kurve mit zwei Griffen, wie cubic-bezier in CSS. Die benannten Presets sind
fertige Griffpositionen: quad, quart, circular, expo und back, jeweils als In, Out oder InOut.
| Easing | Wirkt so |
|---|---|
| In | startet langsam und wird schneller, wie etwas, das gerade losfährt |
| Out | kommt an und läuft sanft aus; die natürlichste Wahl für UI-Elemente |
| InOut | an beiden Enden langsam; gut für lange Bewegungen |
| Back | schießt leicht über das Ziel hinaus und kommt zurück; verspielt |
| Elastic | schießt über das Ziel hinaus und federt nach; Stärke und Periode stellen Sie selbst ein |
| Step | hält den Wert und springt am Ende um; zum Umschalten, nicht zum Gleiten |
Wenn Sie unsicher sind, beginnen Sie mit Out.
Die Zeitleiste
Nutzen Sie das Panel Animation, wenn sich mehrere Dinge im selben Takt bewegen sollen. Wie Sie im Panel arbeiten, lesen Sie unter Animation.
Eine Zeitleiste hat drei Ebenen:
- ein Preset ist eine Animation, die Sie über ihren Namen abspielen;
- ein Balken ist der Teil eines Objekts darin und liegt auf einer Spur;
- innerhalb eines Balkens hat jede Eigenschaft eigene Keyframes.
Ein Balken kann auch ein Abspielbalken sein. Er animiert selbst nichts. Stattdessen startet er das Preset eines anderen Objekts, sobald der Abspielkopf ihn erreicht. So bleibt eine Figur synchron, auch wenn jede Gliedmaße ihr eigenes Preset hat.
- Schleife und Geschwindigkeit gelten für jedes Preset, das ein Abspielbalken startet.
- Wenn Sie ein Preset stoppen, stoppt alles, was es gestartet hat.
Sie können eine einzelne Eigenschaft in einem Balken stummschalten. Ein Balken, der Position und Rotation animiert, kann zum Beispiel die Rotation abschalten. Die Keyframes bleiben dabei erhalten.
Animation, die mit einem Modell kommt, behält ihre ursprünglichen Kurven. Ein importierter Gehzyklus läuft genau so, wie er angelegt wurde.
Modell-Clips
Ein Modell kann eigene benannte Clips mitbringen. Beim Import des Modells wird jeder Clip zu einer Animation an diesem Modell, mit dem Namen des Clips. Sie finden sie im Panel Animation, wie jede Animation, die Sie selbst angelegt haben.
Um einen Clip aus einem Ereignis heraus abzuspielen, nutzen Sie den Schritt Animation abspielen und wählen diese Animation.
Einheiten
- Zeit wird in Sekunden angegeben. Dauern bei Zustandswechseln in Millisekunden.
- Rotation ist überall, wo Sie sie sehen, in Grad angegeben.
Keiner der drei Wege meldet, wann eine Animation zu Ende ist. Um danach etwas zu starten, nutzen Sie einen Schritt Warten, dann mit derselben Länge oder messen die Zeit in einem Skript.
Weiter: Zustände – das Aussehen eines Objekts speichern und zwischen den Varianten wechseln.