In Jetpack Compose, there are different types of animations that can be combined with physics-based logic to create complex animations. Here's a breakdown of common types of animations you can use:
1. Animatable
Usage: For animating values over time, allowing dynamic control over the value during the animation.
Types: You can animate any type that supports interpolation like Float, Color, Dp, etc.
Example: Moving an object or changing its opacity dynamically.
val offsetX = remember { Animatable(0f) }
2. DecayAnimation
Usage: Simulates decay or friction-like effects, typically used for inertia or fling-type animations.
Types: Exponential or other custom decay animations.
Example: Continuing an animation based on a user's fling gesture.
val decay = exponentialDecay<Float>()
offsetX.animateDecay(velocity = initialVelocity, animationSpec = decay)
3. TweenAnimation
Usage: Provides a simple way to animate values between a start and end value over a fixed duration.
Types: Linear, ease-in, ease-out, etc.
Example: Smooth transition between two values over time.
val tweenSpec = tween<Float>(durationMillis = 1000)
offsetX.animateTo(targetValue = 100f, animationSpec = tweenSpec)
4. SpringAnimation
Usage: Mimics the behavior of a spring, creating bounce-back and elastic animations.
Types: Configurable for stiffness, damping, and more to control the spring behavior.
Example: An animation where an object overshoots and bounces back.
val springSpec = spring<Float>(dampingRatio = Spring.DampingRatioHighBouncy)
offsetX.animateTo(targetValue = 100f, animationSpec = springSpec)
5. KeyframeAnimation
Usage: Creates animations that can change values at multiple defined points in time.
Types: Specify keyframes at specific time intervals with different values.
Example: An animation that reaches intermediate values at specific times.
val keyframes = keyframes<Float> {
durationMillis = 1000
0f at 0
50f at 500
100f at 1000
}
offsetX.animateTo(targetValue = 100f, animationSpec = keyframes)
6. RepeatableAnimation
Usage: Repeats an animation multiple times or indefinitely.
Types: Can specify how many times to repeat or if it should reverse direction (loop, ping-pong, etc.).
Example: An infinite looping animation for loading indicators.
val repeatSpec = repeatable(
iterations = Infinite,
animation = tween(durationMillis = 1000)
)
offsetX.animateTo(targetValue = 100f, animationSpec = repeatSpec)
7. InfiniteTransition
Usage: Creates animations that continuously run and transition between values.
Types: For animations that need to run forever, like pulse or wave effects.
Example: A pulsing animation for a UI element.
val infiniteTransition = rememberInfiniteTransition()
val size by infiniteTransition.animateFloat(
initialValue = 50f,
targetValue = 100f,
animationSpec = infiniteRepeatable(animation = tween(1000), repeatMode = RepeatMode.Reverse)
)
8. TargetBasedAnimation
Usage: Similar to Animatable, but gives finer control over the time-based progression of an animation.
Types: Can be used for more advanced, time-based animations.
Example: Animating a property with a start time and a predictable outcome.
val animation = remember {
TargetBasedAnimation(tween<Float>(1000), 0f, 100f)
}
.png)