Best Tutorial for Android Jetpack Compose

Android App Development

Stay ahead with the latest tools, trends, and best practices in Android development

Physics Based Animation in Jetpack Compose

Physics Based Animation in Jetpack Compose - Coding Bihar
Physics Based Animation in Jetpack Compose
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. Decay Animation

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. Tween animation

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. Spring Animation

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. Keyframe Animation

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. Repeatable Animation

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. Infinite Transition

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. Target Based Animation

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

Special Message

Welcome to Coding