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 février 2024

Min Read

Ajoutez de jolies animations à votre application avec POP

De nombreuses propriétés constituent une excellente application. Mais, personnellement, chaque fois qu'une application m'accueille avec une jolie animation, je suis beaucoup plus susceptible d'essayer ses fonctionnalités. Parfois, une simple animation suffit pour impliquer davantage l'utilisateur et le rendre heureux d'utiliser une application.

Cela dit, j'ai vraiment l'impression que les projets lésinent sur eux en supposant qu'ils prennent tellement de temps que l'effort ne sera pas rentable pour le produit final. Cependant, iOS permet de réaliser des animations très simplement, il suffit de mettre le code de modification de votre interface dans la valeur par défaut :

Le bloc peut immédiatement changer d'apparence bleue pour faciliter les transitions. Il faut littéralement une ligne de code, donc je ne pense pas avoir besoin de persuader qui que ce soit de l'utiliser.

Mais vous pouvez aller encore plus loin.

blue arrow to the left
Imaginary Cloud logo

Ajoutez de jolies animations à votre application avec POP

J'ai récemment découvert un framework de Facebook appelé POP. Il vous offre un ensemble complet d'animations basées sur la physique du monde réel. Et le meilleur, c'est que ses API sont presque aussi simples que celles par défaut.

Laisse-moi te montrer.

POP intègre trois types d'animations : PopBasicAnimation, PopSpringAnimation et PopDecayAnimation.

Après les avoir initialisés :


Vous devez sélectionner l'une des propriétés prises en charge pour animer, par exemple :


Définissez ensuite FromValue et ToValue respectivement :


Régler l'heure de début :


Enfin, vous ajoutez l'animation à l'objet souhaité :


La propriété clé est utilisée ici pour identifier l'animation. Comme l'indique la documentation : « La « clé » peut être n'importe quelle chaîne de caractères telle qu'une seule animation par clé unique est ajoutée par objet ».

Et voilà, vous venez de donner à votre application un joli coup de pouce en matière d'animation !

Vous pouvez probablement imaginer qu'il y a de nombreuses propriétés à modifier. Pour vous donner une idée, ceux que j'utilise le plus sont :


Et cela va jusqu'à la vélocité, à la friction ou même à l'animation de vos propriétés personnalisées. Vous pouvez utiliser des rappels de délégation pour enchaîner les animations. Ajoutez la prise en charge des gestes des utilisateurs. Les possibilités sont infinies.

Vous trouverez d'autres supports de lecture et des didacticiels à ce sujet sur le page GitHub, avec celui-ci - 5 étapes pour utiliser Facebook Pop - être un bon point de départ.

Et voici comment fonctionne le code ci-dessus, répété pour trois éléments :

Dots Animation

Je vous encourage vivement à l'essayer et à l'utiliser encore et encore. Ajouter de jolies animations est bien plus facile qu'il n'y paraît.

D'excellents résultats et des utilisateurs satisfaits sont garantis !

Ready for a UX Audit? Book a free call

Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !

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

Un développeur iOS senior qui fait partie d'une équipe iOS agile et qui donne aux individus les moyens de réaliser leurs rêves et leurs objectifs.

Read more posts by this author

People who read this post, also found these interesting:

arrow left
arrow to the right
Dropdown caret icon