Animations avec Compose : rendez vos apps chat-oyantes
1 like101 views
The document discusses techniques for integrating animations into applications using Jetpack Compose, emphasizing the use of Kotlin for declarative UI design. It covers various animation types, such as visibility animations, property animations, and animated vector drawables, providing code examples for implementation. Additionally, it highlights how to manage animations based on application states and the importance of customizable animation specifications.
Animations avec Compose : rendez vos apps chat-oyantes
- 1. 😸 Animations with Jetpack Compose Antoine ROBIEZ @enthuan Baptiste CARLIER @bapness How to give life to your apps
- 2. Animate: 1. Give the appearance of movement using animation techniques 2. Bring something to life
- 3. Jetpack Compose • Declarative UI • Kotlin • Less code • Compatible
- 8. Visibility Colors Rotation Live coding
- 9. Visibility
- 10. AnimatedVisibility(fabExpand) { Text( modifier = Modifier.padding(horizontal = 8.dp), text = "Trier" ) } Live coding results
- 11. val scaleY by animateFloatAsState( targetValue = (if (sorted) { -1f } else { 1f }), animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing) ) Icon( modifier = Modifier.scale(1f, scaleY), imageVector = fabIcon, contentDescription = null ) Live coding results
- 12. AnimatedVisibility( visible = expandState, enter = slideInVertically( initialOffsetY = { fullHeight -> fullHeight * -1 }, animationSpec = tween(durationMillis = 150, easing = LinearOutSlowInEasing) ), exit = slideOutVertically( targetOffsetY = { fullHeight -> (fullHeight * -1) }, animationSpec = tween(durationMillis = 150, easing = FastOutLinearInEasing) ) ) { Text( modifier = Modifier.padding(16.dp), style = MaterialTheme.typography.bodyMedium, text = cat.temper ) } Live coding results
- 13. • Use AnimatedVisibility(visible) to show/hide a Composable • Ability to customize enter / exit transitions • Use AnimatedVisibilityScope with Modifier.animateEnterExit(), you specify the child element animation Visibility
- 15. val arrowRotation by animateFloatAsState( targetValue = (if (expandState) { -180f } else { 0f }), animationSpec = tween(durationMillis = 500, easing = FastOutSlowInEasing) ) Icon( modifier = Modifier .padding(16.dp) .rotate(arrowRotation) , imageVector = Icons.Filled.KeyboardArrowUp, contentDescription = "Back" ) Live coding results
- 17. val animationSpec = tween<Color>(400) val contentColor = animateColorAsState( targetValue = if (isFav) { MaterialTheme.colorScheme.onPrimary } else { MaterialTheme.colorScheme.onSurface }, animationSpec = animationSpec ) val containerColor = animateColorAsState( targetValue = if (isFav) { MaterialTheme.colorScheme.primary } else { MaterialTheme.colorScheme.surface }, animationSpec = animationSpec ) Live coding results
- 18. Animate property from a State • Use animate*AsState() APIs for value-based animation • The animation is customizable with AnimationSpec • Available animations: animateDpAsState() animateOffsetAsState() animateFloatAsState() animateColorAsState() animateSizeAsState() animateRectAsState() animateIntAsState()
- 22. var atEnd by remember { mutableStateOf(false) } val fabIcon = AnimatedImageVector.animatedVectorResource(R.drawable.avd_anim) Icon( painter = rememberAnimatedVectorPainter(fabIcon, atEnd), contentDescription = null ) Live coding results
- 23. Animated Vector Drawable • Bound to a state (boolean) • AnimatedImageVector: ✓ AnimatedImageVector.animatedVectorResource • Painter: ✓ rememberAnimatedVectorPainter(vector, state) • To trigger the animation, just reverse the state: ✓ state = !state
- 24. val onInverseSort = { sorted = !sorted coroutineScope.launch { delay(200) lazyListState.animateScrollToItem(0) } } LazyColumn( modifier = Modifier.fillMaxSize().padding(it), state = lazyListState ) { items(items = myItems, key = { it.id }) { cat -> CatView( modifier = Modifier .fillMaxWidth() .animateItemPlacement() .clickable { onGoDetail(cat.id.toString()) } .padding(horizontal = 24.dp, vertical = 16.dp), cat = cat ) } } Live coding results
- 25. • LazyItemScope: ✓ animateItemPlacement • LazyListState: ✓ animateScrollToItem ✓ animateScrollBy • Goodbye DiffUtils Animate lists
- 26. Live coding Transitions between screens With a NavHost based navigation
- 27. Transitions
- 28. • AnimatedNavHost replaces NavHost • Same mechanism than XML enter/exit/popEnter/popExit • Not yet into Compose AndroidX ✓ Use Accompanist library • Missing : SharedElement between screens Navigation transitions
- 29. val onInverseSort = { sorted = !sorted coroutineScope.launch { delay(200) lazyListState.animateScrollToItem(0) } } LazyColumn( modifier = Modifier.fillMaxSize().padding(it), state = lazyListState ) { items(items = myItems, key = { it.id }) { cat -> CatView( modifier = Modifier .fillMaxWidth() .animateItemPlacement() .clickable { onGoDetail(cat.id.toString()) } .padding(horizontal = 24.dp, vertical = 16.dp), cat = cat ) } } Live coding results
- 32. Specifications, loops, transitions AnimationSpecs allow to define how values should transform: • tween: animates over the specified duration using an easing curve • spring: a physics-based animation • keyframes: based on the snapshot values specified at different timestamps in the duration of the animation • repeatable: repeat until it reaches the specified iteration count + a animation (tween, spring, …) • infiniteRepeatable: as repeatable, but indefinitely • snap: immediately switches the value to the end value
- 33. Keyframes
- 34. val infiniteTransition = rememberInfiniteTransition() val assRotation by infiniteTransition.animateFloat( initialValue = -20f, targetValue = -20f, animationSpec = infiniteRepeatable( animation = keyframes { durationMillis = 1200 -20.0f at 0 with LinearOutSlowInEasing 20f at 600 with LinearOutSlowInEasing -20f at 1200 with LinearOutSlowInEasing }, repeatMode = RepeatMode.Restart ) ) Box(modifier = modifier) { Image( painter = painterResource(id = R.drawable.cat_layer_back), contentDescription = "Twerking cat", modifier = Modifier.fillMaxSize() .graphicsLayer { rotationZ = assRotation }, contentScale = ContentScale.Fit ) Image( painter = painterResource(id = R.drawable.cat_layer_front), contentDescription = "", modifier = Modifier.fillMaxSize(), contentScale = ContentScale.Fit ) } Live coding results
- 36. LaunchedEffect
- 37. val animatable = remember { Animatable(0f) } LaunchedEffect(Unit) { delay(800) animatable.animateTo(targetValue = value, animationSpec = tween(2000)) } Column(verticalArrangement = Arrangement.spacedBy(4.dp)) { Text( style = MaterialTheme.typography.bodyMedium, fontWeight = FontWeight.SemiBold, text = label ) LinearProgressIndicator( modifier = Modifier .fillMaxWidth() .height(8.dp) .clip(RoundedCornerShape(4.dp)), progress = animatable.value, color = color, trackColor = color.copy(alpha = 0.4f) ) } Live coding results
- 38. LaunchedEffect • LaunchedEffect is triggered during the composition • The animation runs even if the Composable isn’t displayed on screen • Be careful with LazyLayout items ➢ LaunchedEffect is called each time the view is displayed
- 39. It's easy Set the right animation, at the right time Pay attention to physics
- 40. Animated Vector Drawable : usable ? useful ? is it worth it ? MotionLayout :
- 41. MotionLayout : Animated Vector Drawable : is it worth it ? usable ? useful ?
- 42. Animated Vector Drawable : MotionLayout : usable ? useful ? is it worth it ?
- 43. One screen = Several components Several views Several states Ask for animated mockups or wireframes
- 44. Android community needs you your client needs you your final user needs you Just try it !
Editor's Notes
- #24: ARO Concernant les animated vector drawable, c’est un peu étrange mais ça reste dans la logique compose. On doit avoir un état (eh oui encore) lié à l’animated Vector Drawable, récupérer la resource. Préparer un painter qui va bien sur etre remembered entre les compositions et le passer en attribut d’une image. Pour déclencher l’animation, on inversera simplement le booléen (au clic ou autre)