1. Android Jetpack Compose Animation
Android

2. PLACE
PHOTO
HERE
And how it helps in Android app development
Set-up
Dependencies and additional steps 🚧
Implementation "androidx.compose.animation:animation:1.3.3"

3. PLACE
PHOTO
HERE
Animation Flowchart
And how it helps in Android app development

4. PLACE
PHOTO
HERE
High-Level APIs
And how it helps in Android app development
These APIs are designed to be suitable with several common animation patterns. And had been
aligned with the best practices of Material Design Motion.
High-Level APIs contains:
● AnimatedVisibility
● animateContentSize
● Crossfade

5. PLACE
PHOTO
HERE
And how it helps in Android app development
EnterTransition and ExitTransition
FadeIn
Side In
slideInHorizontally
slideInVertically
scaleIn
expandIn
expandHorizontally
expandVertically
fadeOut
slideOut
slideOutHorizontally
slideOutVertically
scaleOut
shrinkOut
shrinkHorizontally
shrinkVertically
In Jetpack composev
old method

6. PLACE
PHOTO
HERE
And how it helps in Android app development
@Composable
fun ColumnScope.AnimatedVisibility (
visible: Boolean,
modifier: Modifier = Modifier,
enter: EnterTransition = fadeIn() + expandVertically(),
exit: ExitTransition = fadeOut() + shrinkVertically(),
label: String = "AnimatedVisibility",
content: @Composable AnimatedVisibilityScope.() -> Unit
)
Output

7. PLACE
PHOTO
HERE
Animate Content Changes
@Composable
fun contentAnimation() {
val smallText = "Hello"
val largeText = "Hello Android"
var text by remember { mutableStateOf(smallText) }
clickable {
text = if (text == smallText) {
largeText
} else {
smallText
}
}
}

8. PLACE
PHOTO
HERE
Low level Api animation
● All the high-level animation APIs mentioned in
the previous section are built on top of the
foundation of the low-level animation APIs
● Animatable : Animatable is a value holder that can animate
the value as it is changed via animateTo
● Animate*AsState : It is backed by Animatable
Animation
Animation is the lowest-level Animation API available.
Many of the animations
There are two Animation subtypes:
1) TargetBasedAnimation
2) DecayAnimation

9. PLACE
PHOTO
HERE
Target Based Animation
DecayAnimation does not require a targetValue to be provided.
Instead, it calculates its targetValue based on the starting
conditions, set by initialVelocity and initialValue and the supplied
DecayAnimationSpec
Decay animations are often used after a fling
gesture to slow elements down to a stop
DecayAnimation
TargetBasedAnimation directly allows you to control the animation
play time yourself

10. PLACE
PHOTO
HERE
Animate*AsState
● Animate composable properties using
animate*AsState().
● Use updateTransition() to animate multiple properties of
your composables.
● Animate composable content.

11. PLACE
PHOTO
HERE
Animating multiple values
Tab Animation

12. PLACE
PHOTO
HERE
Animation Preview
"Start Animation Preview" icon at the top right corner of a
Composable in preview ( icon)

13. PLACE
PHOTO
HERE
AnimationSpec

14. PLACE
PHOTO
HERE
1. spring()
It creates a physics-based animation. It takes 2 parameters:
dampingRatio and stiffness
The damping ratio is responsible for bouncing of your
animation. Here we have some predefined ratios we
can use
• Spring.DampingRatioNoBouncy — default
• Spring.DampingRatioLowBouncy
• Spring.DampingRatioMediumBouncy
• Spring.DampingRationHighBouncy
stiffness – It decides how fast the spring
should move toward the end value.
Custom Animation using Animations Specs

15. PLACE
PHOTO
HERE
And how it helps in Android app development

16. PLACE
PHOTO
HERE
And how it helps in Android app development
2 tween() It accepts 3 parameters – durationMillis, delayMillis, and easing.
Tween() is a function that returns TweenSpec, which is
an implementation of DurationBasedAnimationSpec.
as you can see I just replace spring() with tween().
Here is our result
Google provides four pre-defined easing implementations:
1.FastOutSlowInEasing — default
2.LinearEasing
3.FastOutLinearInEasing
4.LinearOutSlowInEasing
easing – It allows us to change the
animation’s rate of change. We can
speed up and slow down the animation
value, rather than moving at a constant
rate.
https://material.io/design/motion/speed.html#easing

17. PLACE
PHOTO
HERE
And how it helps in Android app development
3 keyframes()
• keyframes() is a function that returns KeyFramesSpec, which is an implementation of
DurationBasedAnimationSpec.
• The same as for tween() — keyframes() gives you control over the animation duration. But the usage of it
is different. There is one parameter — the initialization block of KeyFrameSpecConfig. This config class
includes the following variables:
1. durationMillis
2. delayMillis
3. keyframes.

18. PLACE
PHOTO
HERE
And how it helps in Android app development
4 repeatable()
We can repeat the animation using repeatable(). It takes parameters like iterations, animation,
and repeatMode
iterations – How many times the animation should be repeated (it is an integer value).
animation – It is the animation that should be repeated. You can specify duration-based animations (such as tween or keyframes)
repeatMode – Whether the animation should repeat by starting from the beginning (RepeatMode.Restart) or from the end (RepeatMode.Reverse).

19. PLACE
PHOTO
HERE
5 snap()
snap will skip the animation to the end value. You can specify delayMilis in the parameter to
delay the start of your animation.

20. PLACE
PHOTO
HERE
And how it helps in Android app development
Placeholder
A library which provides a modifier for display 'placeholder' UI while content is loading
com.google.accompanist.placeholder.material
.placeholder(
visible = true,
highlight = PlaceholderHighlight.fade()
)

21. UPCOMING MEETUP
Check out our event page
Stay tuned for what’s coming next!