Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Animations avec Jetpack Compose

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité

Consultez-les par la suite

1 sur 27 Publicité

Animations avec Jetpack Compose

Télécharger pour lire hors ligne

Les animations permettent de rendre une interface utilisateur expressive et appréciable à utiliser. Si en ajouter lorsque l'on utilise le système historique de View XML n'était pas chose facile, c'est devenu beaucoup plus simple avec l'API d'animations de Jetpack Compose.

Les termes "animations", "transformations" et "transitions" ne vous feront plus si peur lorsque l'équipe de design vous proposera d'améliorer un peu votre application.

Nous allons voir ensemble les principes de base pour améliorer votre UI facilement et de façon subtile. 😉

Les animations permettent de rendre une interface utilisateur expressive et appréciable à utiliser. Si en ajouter lorsque l'on utilise le système historique de View XML n'était pas chose facile, c'est devenu beaucoup plus simple avec l'API d'animations de Jetpack Compose.

Les termes "animations", "transformations" et "transitions" ne vous feront plus si peur lorsque l'équipe de design vous proposera d'améliorer un peu votre application.

Nous allons voir ensemble les principes de base pour améliorer votre UI facilement et de façon subtile. 😉

Publicité
Publicité

Plus De Contenu Connexe

Plus récents (20)

Publicité

Animations avec Jetpack Compose

  1. 1. 💫 Animations avec Jetpack Compose Comment donner vie à vos apps ? Antoine ROBIEZ @enthuan Baptiste CARLIER @bapness
  2. 2. Animer : 1. Douer quelque chose de mouvement 2. Donner à quelque chose la vie ou l’apparence de la vie
  3. 3. Jetpack Compose • Framework UI déclaratif • Kotlin • Moins de code • Compatible
  4. 4. Composant = Etats
  5. 5. Vue = Etats
  6. 6. Ecran = Etats
  7. 7. Le Chaptel Jari Hytönen
  8. 8. Visibilité Couleurs Rotation Live coding
  9. 9. Visibilité • Utiliser AnimatedVisibility(visible) pour afficher/masquer un Composable • Possibilité d’ajouter une transition d’entrée + une transition de sortie • Le Modifier.animateEnterExit() permet de spécifier l’animation d’une élément sous-jacent, par l’utilisation du AnimatedVisibilityScope
  10. 10. Animer une propriété à partir d’un State • Utiliser les APIs animate*AsState() pour toutes les animations de propriétés basées sur un State • L’animation est personnalisable avec une AnimationSpec • Animations disponibles : animateDpAsState() animateOffsetAsState() animateFloatAsState() animateSizeAsState() animateRectAsState() animateIntAsState()
  11. 11. Interpolateurs Linéaire Ease-In Ease-Out Ease-InOut
  12. 12. Live coding Listes Animated Vector Drawable
  13. 13. Animated Vector Drawable • Lié à un état (boolean) • AnimatedImageVector :  AnimatedImageVector.animatedVectorResource • Painter :  rememberAnimatedVectorPainter(vector, state) • Pour déclencher l’animation, inversion de l’état  state = !state
  14. 14. • LazyItemScope :  animateItemPlacement • LazyListState :  animateScrollToItem  animateScrollBy • Plus besoin de DiffUtils Animer des listes
  15. 15. Live coding Transitions entre écrans En ayant navigation basée sur le NavHost
  16. 16. • AnimatedNavHost remplace NavHost • Même système de enter/exit/popEnter/popExit qu’en XML • Non intégré à Android X Compose  Utiliser une librairie Accompanist • Manquant : SharedElement entre les écrans Transitions de navigation
  17. 17. Live coding SplashScreen Loading
  18. 18. Spécifications, boucles, transitions Les AnimationSpecs permettent de définir comment les valeurs doivent se transformer : • tween : animation entre 2 valeurs avec un easing et une durée • spring : animation basée sur des notions physiques • keyframes : permet de détailler l’animation à des moments précis • repeatable : animation qui se répètera X fois • infiniteRepeatable : animation qui se répètera indéfiniment • snap : passer d’une valeur à l’autre instantanément
  19. 19. Live coding Au lancement
  20. 20. LaunchedEffect • Le LaunchedEffect est lancé lors de la composition • L’animation se joue même si le Composable n’est pas affiché • Attention avec les items des LazyLayout  le LaunchedEffect est appelé à chaque fois que la vue s’affiche
  21. 21. C’est simple Mettre la bonne animation, au bon moment Faire attention à la physique
  22. 22. Animated Vector Drawable : utilisable ? utile ? rentable ? MotionLayout :
  23. 23. Animated Vector Drawable : utilisable ? utile ? rentable ? MotionLayout :
  24. 24. Un écran = plusieurs composants plusieurs vues plusieurs états Idéalement, demandez des maquettes animées
  25. 25. La communauté Android a besoin de vous Le client a besoin de vous L’utilisateur a besoin de vous ESSAYEZ !
  26. 26. https://github.com/enthuan/compose-animations

×