Quoi de plus vivant qu’une belle interface animée ? Les équipes design rivalisent d’ingéniosité pour permettre à l’utilisateur de mieux comprendre le fonctionnement d’une application, grâce, notamment, aux animations. Mais le terme "animation" fait souvent peur aux développeur·se·s. Les keyframes, les interpolateurs, les translations… un charabia qui peut encourager l’équipe de dev à freiner et à limiter les designers sur leurs idées. Et si on vous disait qu’implémenter des animations, c’est pas si difficile ? Avec Compose, le "nouveau" framework UI de Google, c’est même plutôt simple quand on a assimilé les termes techniques. Vous ne les connaissez pas ? Pas de problème, on est là ! En partant d’une application certes mignonne mais plutôt statique, nous allons voir ensemble et en direct sur quels éléments jouer pour donner vie à vos écrans. Notre objectif : que vous soyez à l’aise et que vous deveniez moteur dans la conception artistique du projet en proposant des animations simples et surtout peu coûteuses. Pas besoin d’être un·e grand·e créatif·ve pour réaliser des applications chatoyantes !

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

4. Component = States

5. View = States

6. Screen = States

7. The purr-fect
Application
Jari Hytönen

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

14. Visibility
Rotation

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

16. Visibility
Rotation
Colors

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()

19. Interpolators
Linear Slow-In
Fast-Out
Slow-Out Slow-In-
Slow-Out

20. Live coding
Lists
Animated
Vector Drawable

21. ShapeShifter
https://shapeshifter.design/

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

30. Live coding
SplashScreen
Loading

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

35. Live coding
At launch

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 !

45. https://github.com/enthuan/compose-animations
Antoine ROBIEZ
@enthuan
Baptiste CARLIER
@bapness