Animation in jetpack compose آموزش برنامه نویسی اندروید | جت پک کامپوز

Summary (Technological concepts & tutorial flow)

This video tutorial teaches how to implement animations in Jetpack Compose for modern Android UI transitions, comparing it to classic Android, where similar effects required heavy XML + code wiring.

1) When/what to animate (concepts)

• Mentions guidance from Android Developers about choosing animations (what/how/where), then focuses on which animation types to use.
• Examples of animation effects:
  • Resize using scale
  • Move using slide/transition
  • Rotate using rotation
  • Change color/transparency using alpha / color
• Covers scenarios:
  • Entry/exit transitions not tied to gestures (e.g., page appear/disappear based on time/state)
  • Continuous or repeated animation (e.g., when a button is pressed or while a state is active)

2) Example 1: Simple visibility-based entrance/exit (AnimatedVisibility)

• Creates a boolean state (toggles on button click) and uses AnimatedVisibility:
  • visible toggling between true/false
  • Initial example shows a box appearing/disappearing with a built-in animation
• Customization via enter/exit:
  • Example: switching from default motion to horizontal sliding behavior (slideInHorizontally-style)
• Key feature: Compose automatically animates component appearance when the visibility state changes.

3) Example 2: Animating shape changes (Animate corner radius)

• Goes beyond show/hide by animating properties:
  • Animates corner radius so the box corners become rounded when toggled
• Uses a percentage/integer-driven state to animate a float/DP-like value (via a helper function).
• Adds animationSpec to control timing/behavior:
  • Example tuning such as ~2000 ms
  • Explains easing (“easing curves”), including:
    • Linear (constant speed)
    • Non-linear easing (faster at start/end, slower in the middle)
    • Bounce-like easing (overshoots and returns)

4) Example 3: Using spring animations (Spring instead of tween)

• Shows switching animation specs from tween to spring.
• Explains spring parameters:
  • dampingRatio
  • stiffness
• Notes constraints/range:
  • Passing invalid ranges can cause errors/crashes (values must be within acceptable bounds)
• Demonstrates the spring feel visually (described as wave/bouncy motion).

5) Example 4: Transition-based animation across states (updateTransition)

• Replaces direct animations with updateTransition to coordinate multiple animated properties from the same state.
• Animates:
  • corner radius (rounding vs non-rounding)
  • color (e.g., gray ↔ yellow)
  • with a shared transitionSpec for coordinated timing
• Demonstrates additional continuous animation:
  • Uses rememberInfiniteTransition to animate a color continuously
  • Mentions repeat modes like reverse (gray → yellow → gray repeatedly)

6) Example 5: Screen-to-screen navigation-style transitions (AnimatedContent)

• Demonstrates AnimatedContent for switching between multiple “screens” within the same composable.
• Uses state to toggle between two screens and animates the transition:
  • fadeIn / fadeOut
  • Slide transitions using horizontal slide logic
• Explains slide offsets:
  • Uses values like negative height/width ratios (e.g., negative-half concept) to start off-screen (or from the middle)
  • Notes direction changes when toggling state (reverse movement between screens)

7) Follow-up promise for next videos

• Next videos will cover:
  • More detailed transitions
  • Adjusting animation behavior based on scrolling (not time-based)

---

Main speakers/sources

• Speaker: Mohsen (Android Geek channel)
• Source referenced: Android Developers documentation (for animation guidance)

---