Shape Morphing in After Effects: die Apple-UI-Animation erklärt
Du kennst die Animation: Ein quadratisches Icon zieht sich zu einer Suchleiste, die Suchleiste rundet sich zu einem Button, der Button wird zu einer Karte. Es sieht aus wie ein Dutzend Elemente, die einander ablösen. Meist ist es eine einzige Shape Layer.
Das ist der ganze Trick — und der Grund, warum diese Animationen so flüssig wirken. Nichts erscheint, nichts verschwindet: Eine einzelne Form ändert, was sie ist. Alles andere (Icons, Text, Avatare) blendet nur darüber ein.
Die Mechanik ist in fünf Minuten gelernt. Fast alle machen beim ersten Versuch denselben Fehler, also fangen wir damit an.
Der Fehler: Scale benutzen
Der Reflex ist: Ebene auswählen, S drücken, das Seitenverhältnis entkoppeln und die Breite keyframen. Sieht aus, als würde es funktionieren. Tut es nicht.
Wer ein abgerundetes Rechteck skaliert, skaliert alles mit — auch den Eckenradius. Zieh ein 200×200-Quadrat mit 40 px Ecken auf 600×200, und die Ecken werden mitgezogen: Du bekommst platt gedrückte, ovale Enden statt des sauberen Radius, mit dem du gestartet bist. Bei einer Apple-Style-Animation, deren ganzer Sinn gleichbleibende Ecken sind, liest sich das als kaputt.
Die Lösung: den Pfad animieren, nicht die Ebene. Öffne:
Shape Layer → Contents → Rectangle 1 → Rectangle Path 1Dort liegen Size und Roundness als eigene Eigenschaften. Animierst du die, bleibt der Eckenradius exakt dort, wo du ihn gesetzt hast — egal, wie weit sich die Form streckt.
Dieses Video wird von YouTube geladen. Vorher werden keine Daten an Google übertragen.
Die drei Eigenschaften, die alles machen
Sobald du am Pfad statt an der Ebene arbeitest, besteht UI-Morphing aus drei Reglern.
Size — Breite und Höhe, mit einem Kettensymbol dazwischen. Klick es an, um zu entkoppeln, und du kannst horizontal strecken, ohne die Höhe anzufassen. Das macht aus einem Quadrat eine Pill, aus einer Karte eine Leiste.
Roundness — der Eckenradius. Auf null hast du ein Quadrat; zieh ihn hoch, bis sich nichts mehr ändert, und du hast einen Kreis. Diese eine Eigenschaft deckt Quadrat → abgerundetes Quadrat → Kreis ab, und das ist das meiste, was UI-Morphing braucht.
Fill → Color — keyframe die Farbe, und die Form wirkt wie ein anderes Element. Das verkauft die Illusion mehr als alles andere: Die Form ändert Proportionen *und* Farbe gleichzeitig, und das Auge liest das als eine Komponente, die zu einer anderen wird — nicht als Rechteck, das seine Größe ändert.
Eine Sequenz zum Nachbauen: Quadrat → Kreis → Pill
Die Reihenfolge ist wichtiger als die Werte. Aus dieser Sequenz sind die meisten Apple-Style-Animationen gebaut.
- Starte quadratisch. Gleiche Breite und Höhe, Roundness bei etwa 20–30 % der Seitenlänge. Apple nutzt fast nie harte 90°-Ecken — selbst der „quadratische" Zustand ist leicht gerundet.
- Keyframe alle drei Eigenschaften am Anfang. Size, Roundness, Fill. Alles zu keyframen sperrt den Zustand fest, damit spätere Änderungen nicht rückwärts in schon fertige Frames laufen.
- Geh 6–8 Frames weiter. Das ist der Arbeitsbereich für UI-Übergänge: lang genug zum Erkennen, kurz genug, um reaktionsschnell zu wirken. Über 12 Frames beginnt es träge zu werden.
- Roundness aufs Maximum. Jetzt ist es ein Kreis.
- Nochmal 6–8 Frames weiter,
Sizeentkoppeln, Breite ziehen. Aus dem Kreis wird eine Pill — und weil Roundness bereits am Anschlag ist, bleiben die Enden von allein perfekt halbrund.
Alle Keyframes weich machen (F9), dann in den Graph-Editor und die Anfasser hereinziehen. Der Standard-Ease ist für UI zu symmetrisch: Interface-Bewegung will meist einen schnellen Start und ein langes Ausklingen.
Dieses Video wird von YouTube geladen. Vorher werden keine Daten an Google übertragen.
Bezier-Pfade: wenn es keine Rechtecke sind
Die Rectangle-Path-Methode deckt Quadrate, Kreise, Pills und Karten ab — also fast alles im UI-Bereich. Für beliebige Formen, Logos oder Icons brauchst du einen anderen Weg.
Erstelle beide Formen und wähle bei jeder per Rechtsklick auf den Pfad Convert To Bezier Path. Dann den Pfad der ersten Form keyframen, in der Timeline nach vorn gehen, den Pfad-Keyframe der zweiten Form auswählen, kopieren und auf die Pfad-Eigenschaft der ersten Form einfügen.
After Effects interpoliert zwischen den beiden Punktmengen. Danach löschst oder versteckst du die zweite Form — sie war nur die Vorlage.
Zwei Dinge entscheiden, ob das gut aussieht:
Die Punktanzahl. After Effects ordnet Punkte der Reihe nach zu. Hat eine Form 4 Punkte und die andere 12, muss die Interpolation eine Zuordnung erfinden — und das Ergebnis verdreht sich auf eine Weise, die niemand will. Gib beiden Formen dieselbe Punktzahl, möglichst in derselben Reihenfolge, bevor du morphst.
Der Positions-Versatz. Die Form verrutscht während des Morphs oft leicht, weil die Pfade unterschiedliche Mittelpunkte haben. Behebe das, indem du Position mit-keyframest und am Endpunkt neu zentrierst.
Dieses Video wird von YouTube geladen. Vorher werden keine Daten an Google übertragen.
Was es teuer aussehen lässt
Der Morph selbst ist der einfache Teil. Drei Dinge trennen einen technisch korrekten Morph von einem, der aussieht, als käme er von Apple.
Motion Blur, auf jeder Ebene. Das ist die mit Abstand häufigste Auslassung. Schalte ihn pro Ebene ein *und* den Hauptschalter in der Timeline. Ohne ihn springt die Form zwischen den Frames; mit ihm liest sich der Übergang als physische Bewegung. Kostet nichts und ändert alles.
Ein Bounce auf der Size. Eine Bounce-Expression auf Size gibt der Form ein leichtes Überschwingen beim Einrasten — genau die elastische Qualität, die Apples eigene Übergänge haben. Wir haben die Bounce Expression, die wir nutzen mit jedem Parameter erklärt veröffentlicht. Für Shape Morphing die Amplitude niedrig halten (etwa 0,02–0,04), weil ein Größen-Überschwinger deutlich sichtbarer ist als ein Positions-Überschwinger.
Gestaffelte Inhalte. Icons und Text sollten nicht in dem Moment erscheinen, in dem die Form fertig ist. Versetze jedes Element um ein bis zwei Frames, sodass sie nacheinander hereinkommen. Dieser eine Frame Versatz ist der Unterschied zwischen „Elemente sind erschienen" und „das Interface hat reagiert".
Häufige Probleme
Die Ecken verzerren. Du animierst Scale statt Rectangle Path → Size. Der Klassiker.
Die Form springt zu Beginn des Morphs. Eine Eigenschaft wurde am Anfang nicht gekeyframet, also interpoliert After Effects über die ganze Ebene hinweg. Keyframe jede Eigenschaft, die du ändern willst, ganz am Anfang — bevor du irgendetwas änderst.
Der Bezier-Morph verdreht sich. Unterschiedliche Punktzahlen. Füge der einfacheren Form Punkte hinzu, bis beide gleich viele haben.
Der Übergang wirkt trotz Easing steif. Prüf, ob Motion Blur wirklich an ist — auf der Ebene *und* am Hauptschalter — und zieh die Graph-Anfasser weiter herein. Der Standard-Easy-Ease ist für UI zu zurückhaltend.
Im Viewport sieht es gut aus, im Export nicht. Motion-Blur-Einstellungen unterscheiden sich zwischen Vorschau und Render. Prüf den Shutter-Winkel der Komposition, bevor du ausspielst.
Wofür sich das lohnt
UI-Demo-Videos für eine App oder ein Feature, Produktlaunch-Clips und Social Posts, in denen sich ein Interface in acht Sekunden selbst erklären muss. Es wirkt durchdacht und teuer — genau deshalb nutzt Apple es, und genau deshalb ist eine einzelne Shape Layer mit drei animierten Eigenschaften so ein gutes Aufwand-Ertrags-Verhältnis.
Nicht lohnenswert ist es, wenn es das Interface wirklich gibt. Existiert das Produkt, ist eine Bildschirmaufnahme ehrlicher und in zehn Minuten fertig.
FAQ: Shape Morphing in After Effects
Wie morphe ich eine Form in After Effects?
Bei Rechtecken und Kreisen animierst du Contents → Rectangle Path 1 → Size und Roundness statt der Scale der Ebene. Bei beliebigen Formen wandelst du beide Pfade in Bezier-Pfade um, kopierst den Ziel-Pfad-Keyframe und fügst ihn auf der Pfad-Eigenschaft der Ausgangsform ein.
Warum verzerren die Ecken beim Morphen?
Du animierst Scale, und das skaliert den Eckenradius mit. Animier stattdessen Rectangle Path → Size — dann bleibt der Radius fest auf dem Wert, den du in Roundness gesetzt hast.
Brauche ich ein Plugin für Shape Morphing?
Nein. Alles hier ist natives After Effects. Plugins wie Flow oder Bouncer beschleunigen das Easing, aber der Morph selbst braucht keine Installation — was auch bedeutet, dass das Projekt auf fremden Rechnern korrekt öffnet.
Wie mache ich aus einem Quadrat einen Kreis?
Breite und Höhe in Size angleichen, dann Roundness hochziehen, bis der Wert nicht mehr reagiert. Er endet bei der Hälfte der kürzeren Seite — und das ist exakt ein Kreis.
Wie lang sollte ein UI-Übergang sein?
Sechs bis acht Frames bei 30 fps für die meisten Übergänge. Unter vier Frames ist es zu schnell zum Erkennen, über zwölf wirkt es träge. Interface-Bewegung soll reaktionsschnell wirken, nicht filmisch.
Warum verdreht und faltet sich mein Bezier-Morph?
Die beiden Pfade haben unterschiedlich viele Punkte, also gibt es keine saubere Zuordnung. Füge der einfacheren Form Punkte hinzu, bis beide dieselbe Anzahl haben — möglichst in derselben Reihenfolge.
Was lässt Apple-Animationen so flüssig wirken?
Drei Dinge jenseits des Morphs: Motion Blur auf jeder Ebene, ein leichtes Überschwingen beim Einrasten und Inhalte, die um ein bis zwei Frames versetzt erscheinen statt alle gleichzeitig.
Was nach dem Render passiert
Die Animation ist der sichtbare Teil der Arbeit. Der Rest besteht darin, sie dem Auftraggeber zu zeigen, Anmerkungen zu bekommen, die auf einen konkreten Frame zeigen statt auf „das in der Mitte wirkt komisch", und eine Freigabe zu haben, auf die man sich berufen kann. Genau diese Hälfte deckt Exportlab ab — frame-genaue Kommentare am echten Schnitt, am selben Ort, an dem die Datei ausgeliefert wird.
