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

4.
Composant = Etats

5.
Vue = Etats

6.
Ecran = Etats

7.
Le
Chaptel
Jari Hytönen

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

12.
Live coding
Listes
Animated
Vector Drawable

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

17.
Live coding
SplashScreen
Loading

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.
Live coding
Au lancement

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.
C’est simple
Mettre la bonne animation,
au bon moment
Faire attention à la physique

22.
Animated Vector Drawable :
utilisable ?
utile ?
rentable ?
MotionLayout :

23.
Animated Vector Drawable :
utilisable ?
utile ?
rentable ?
MotionLayout :

24.
Un écran =
plusieurs composants
plusieurs vues
plusieurs états
Idéalement, demandez des maquettes animées

25.
La communauté Android a besoin de vous
Le client a besoin de vous
L’utilisateur a besoin de vous
ESSAYEZ !

26.
https://github.com/enthuan/compose-animations