Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Natalia Terlecka

25. Februar 2024

Min Read

Fügen Sie Ihrer App mit POP niedliche Animationen hinzu

Es gibt viele Eigenschaften, die sich hervorragend für eine Anwendung eignen. Aber persönlich Immer wenn mich eine App mit einer niedlichen Animation begrüßt, probiere ich ihre Funktionen viel eher aus. Manchmal braucht es eine einfache Animation, um den Benutzer viel mehr zu fesseln und ihm das Gefühl zu geben, eine App zu verwenden.

Trotzdem habe ich wirklich das Gefühl, dass Projekte an ihnen sparen, vorausgesetzt, sie sind so zeitaufwändig, dass sich der Aufwand im Endprodukt nicht auszahlt. Allerdings iOS macht es wirklich einfach, Animationen auszuführen, füge einfach deinen Schnittstellenänderungscode in den Standard ein:

Block kann sich sofort aus dem Blauen heraus in fließende Übergänge verwandeln. Es benötigt buchstäblich eine Codezeile, also glaube ich nicht, dass ich jemanden überreden muss, es zu benutzen.

Aber du kannst damit noch weiter gehen.

blue arrow to the left
Imaginary Cloud logo

Fügen Sie Ihrer App mit POP niedliche Animationen hinzu

Ich habe kürzlich ein Framework von Facebook entdeckt namens POP. Es bietet Ihnen das gesamte Paket an physikbasierten Animationen aus der realen Welt. Und das Beste daran ist, dass die APIs fast so einfach sind wie die Standard-APIs.

Lass es mich dir zeigen.

POP hat drei eingebaute Animationstypen: PopBasicAnimation, PopSpringAnimation und PopDecayAnimation.

Nachdem Sie sie initialisiert haben:


Sie müssen eine der unterstützten Eigenschaften auswählen, um z. B. zu animieren:


Stellen Sie dann FromValue bzw. ToValue ein:


Startzeit festlegen:


Zuletzt fügen Sie die Animation dem gewünschten Objekt hinzu:


Die Schlüsseleigenschaft hier wird verwendet, um die Animation zu identifizieren. In der Dokumentation heißt es: „Der 'Schlüssel' kann eine beliebige Zeichenfolge sein, sodass pro Objekt nur eine Animation pro eindeutigem Schlüssel hinzugefügt wird“.

Und das war's, du hast deiner App gerade einen süßen Animationskick gegeben!

Sie können sich wahrscheinlich vorstellen, dass es viele Eigenschaften zu bearbeiten gibt. Um Ihnen eine Vorstellung zu geben, die ich am häufigsten verwende, sind:


Und diese reichen bis zu Geschwindigkeit, Reibung oder sogar der Animation Ihrer benutzerdefinierten Eigenschaften. Sie können Delegate-Callbacks verwenden, um Animationen zu verketten. Fügen Sie Unterstützung für Benutzergesten hinzu. Die Möglichkeiten sind endlos.

Zu all dem gibt es weitere Lesematerialien und Tutorials auf der GitHub-Seite, mit diesem - 5 Schritte zur Verwendung von Facebook Pop - ein guter Ausgangspunkt.

Und so funktioniert der obige Code, der für drei Elemente wiederholt wird:

Dots Animation

Ich empfehle Ihnen dringend, es auszuprobieren und es immer wieder zu verwenden. Das Hinzufügen niedlicher Animationen ist viel einfacher als es scheint.

Tolle Ergebnisse und zufriedene Nutzer sind garantiert!

Ready for a UX Audit? Book a free call

Fanden Sie diesen Artikel hilfreich? Diese könnten dir auch gefallen!

blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
blue arrow to the left
Imaginary Cloud logo
Natalia Terlecka
Natalia Terlecka

Ein erfahrener iOS-Entwickler, der Teil eines agilen iOS-Teams ist und Einzelpersonen dabei unterstützt, ihre Träume und Ziele zu verwirklichen.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon