SwiftUI #2: Drop-In / Fly-In Animation

SwiftUI #2 Drop-In_Fly-In Animation
Übersicht
    Add a header to begin generating the table of contents

    Worum geht es?

    In diesem Post möchte ich euch zeigen wie ihr mit SwiftUI und sehr wenig Aufwand einen sehr schön und modern aussehenden Drop-In/Fly-In Effekt erzeugen könnt.

    Erstellen des View-Modifiers

    Der Effekt an sich besteht relativ simpel nur aus den drei Komponenten: opacityoffset und scaleEffect. Diese werden dann über eine Spring-Animation animiert. Am wichtigsten dabei ist der scaleEffect. Dieser sorgt dafür, dass das Objekt zu beginn groß erscheint und sich dann zur Original-Größe reduziert. Damit das ganze nicht zu wuchtig erscheint, nutzen wir den opacity-Effekt mit dem die Objekte etwas harmonischer erscheinen. Damit die Objekte nicht plump „gerade“ runterfallen, nutzen wir noch einen offset-Effekt der das ganze noch ein wenig verschiebt. Dabei sollten man es nur auf der y-Achse verschieben, da es ansonsten leicht unnatürlich aussehen kann. Damit man den Modifier einfacher anwenden kann, erstellen wir zusätzlich eine extension der View Klasse. 

    Anwendung in der Praxis

    In der Praxis empfiehlt es sich gleich mehrere Objekte in Reihe mit dem Effekt zu versehen. Dabei sollte man darauf achten, dass sich der offset auf einen Fixpunkt bezieht. Hier hat sich die Bildschirm-Mitte als guter Wert erwiesen. Für den Delay hat sich 0.3 Sekunden als praktischer Wert herausgestellt. Zusammen erhält man damit eine Animation wie im Beispiel Video, wobei es natürlich jedem überlassen ist, hier mit den eigenen Werten zu experimentieren. Ausgelöst wird die Animation dann über eine Bool-Variable. Im Beispiel habe ich diese auf true gesetzt beim Erscheinen, hier bieten sich aber vor allem verschiedene Interaktionen mit Buttons an.

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht.

    DAs selfmade-projekt

    Geld verdienen im Internet, wie geht das?

    Scroll to Top