Animations avec Jetpack Compose
•Descargar como PPTX, PDF•
1 recomendación•51 vistas
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. 😉
Recomendados
Recomendados
Más contenido relacionado
Destacado
Destacado (20)
Animations avec Jetpack Compose
- 1. 💫 Animations avec Jetpack Compose Comment donner vie à vos apps ? Antoine ROBIEZ @enthuan Baptiste CARLIER @bapness
- 2. Animer : 1. Douer quelque chose de mouvement 2. Donner à quelque chose la vie ou l’apparence de la vie
- 3. Jetpack Compose • Framework UI déclaratif • Kotlin • Moins de code • Compatible
- 5. Vue = Etats
- 8. Visibilité Couleurs Rotation Live coding
- 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. 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. Interpolateurs Linéaire Ease-In Ease-Out Ease-InOut
- 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. • LazyItemScope : animateItemPlacement • LazyListState : animateScrollToItem animateScrollBy • Plus besoin de DiffUtils Animer des listes
- 15. Live coding Transitions entre écrans En ayant navigation basée sur le NavHost
- 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
- 19. 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
- 21. 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
- 22. C’est simple Mettre la bonne animation, au bon moment Faire attention à la physique
- 23. Animated Vector Drawable : utilisable ? utile ? rentable ? MotionLayout :
- 24. Animated Vector Drawable : utilisable ? utile ? rentable ? MotionLayout :
- 25. Un écran = plusieurs composants plusieurs vues plusieurs états Idéalement, demandez des maquettes animées
- 26. La communauté Android a besoin de vous Le client a besoin de vous L’utilisateur a besoin de vous ESSAYEZ !