Erstelle aus einer Vektorgrafik von Adobe Stock einen animierten Lade-Screen für eine Mobile App.
Eine Vektorgrafik suchen.
Suche bei Adobe Stock nach einer Vektorgrafik, die sich individuell animieren und gestalten lässt.
Buchstaben aus Illustrator nach XD kopieren.
Kopiere einzelne Buchstaben aus der Illustrator-Datei, und füge sie in das XD-Layout ein. Wandle jeden der Buchstaben in eine wiederverwendbare Komponente um.
Zweite Zeichenfläche mit deaktiviertem Buchstaben erstellen.
Dupliziere die Zeichenfläche in XD. Ersetze einen Buchstaben durch die „ausgeschaltete“ Version, und reduziere im Bedienfeld „Aussehen“ die Deckkraft.
Eine zeitgesteuerte Animation zwischen Zeichenflächen erstellen.
Verknüpfe im Modus „Prototyp“ die erste Zeichenfläche mit der zweiten. Wähle als Trigger „Zeitgesteuert“ und gib eine Verzögerung ein. Als Animationstyp wähle „Auto-Animate“ mit „Springen“. Erstelle nach demselben Verfahren einige weitere Zeichenflächen mit unterschiedlicher Dauer.
Animation mit dem Haupt-Screen verknüpfen.
Schließe die Animation für den Lade-Screen ab, indem du den letzten Animations-Screen mit dem Haupt-Screen der Mobile App verknüpfst.
Fertig.
Du weißt jetzt, wie du einen animierten Lade-Screen für eine spannende User Experience erstellst.
Für dein nächstes Projekt könnte es sich lohnen, auch in dieser kuratierten Sammlung von Adobe Stock nach geeigneten Elementen zu suchen.
