🎭 Phase 2.3: Implement Material3 Motion and Transitions

[arch10]

🎭 Implement Material3 Motion and Transitions

🎯 Objective

Implement Material3 motion system including transitions, animations, and predictive back gesture support to enhance user experience with smooth, purposeful animations.

📋 Tasks

Motion System Implementation

• Implement Material3 duration tokens (short, medium, long animations)
• Apply Material3 easing curves (standard, decelerate, accelerate)
• Update existing animations to follow Material3 motion principles
• Implement shared element transitions

Specific Animation Updates

• Activity Transitions - Smooth enter/exit animations
• Theme Change Animations - Seamless color transitions
• Button Press Animations - Enhanced feedback animations
• Dialog Animations - Material3 dialog motion
• Settings Navigation - Smooth navigation transitions

Predictive Back Gesture (Android 13+)

• Implement predictive back animation for main calculator
• Add predictive back support for settings activity
• Handle predictive back for dialogs and overlays
• Test predictive back on different screen orientations

Files to Create/Update

• New: res/anim/material3_* animation files
• Update: Activity transitions in manifests
• Update: MainActivity.kt - transition implementations
• Update: SettingsActivity.kt - navigation animations
• New: util/MotionHelper.kt - animation utilities

🔧 Implementation Details

Material3 Duration Tokens

object MotionTokens {
    const val DURATION_SHORT1 = 50L     // 50ms
    const val DURATION_SHORT2 = 100L    // 100ms  
    const val DURATION_SHORT3 = 150L    // 150ms
    const val DURATION_SHORT4 = 200L    // 200ms
    const val DURATION_MEDIUM1 = 250L   // 250ms
    const val DURATION_MEDIUM2 = 300L   // 300ms
    const val DURATION_MEDIUM3 = 350L   // 350ms
    const val DURATION_MEDIUM4 = 400L   // 400ms
    const val DURATION_LONG1 = 450L     // 450ms
    const val DURATION_LONG2 = 500L     // 500ms
}

Easing Curve Implementation

object EasingTokens {
    val STANDARD = PathInterpolator(0.2f, 0f, 0f, 1f)
    val STANDARD_ACCELERATE = PathInterpolator(0.3f, 0f, 1f, 1f)
    val STANDARD_DECELERATE = PathInterpolator(0f, 0f, 0f, 1f)
    val EMPHASIZED = PathInterpolator(0.2f, 0f, 0f, 1f)
}

Activity Transition Updates

// Replace current transitions
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.UPSIDE_DOWN_CAKE) {
    overrideActivityTransition(
        OVERRIDE_TRANSITION_OPEN,
        R.anim.material3_enter_anim,
        R.anim.material3_exit_anim
    )
}

🧪 Testing Requirements

• Test animations on different device performance levels
• Verify smooth 60fps animations on target devices
• Test predictive back gesture on Android 13+ devices
• Validate animation performance with dynamic colors
• Test animation interruption and cancellation
• Verify accessibility settings respect (reduced motion)

✅ Acceptance Criteria

• All animations follow Material3 motion principles
• Predictive back gesture implemented and working
• Smooth transitions between activities and screens
• No animation performance regressions
• Proper respect for accessibility motion preferences
• Consistent motion language throughout the app
• Enhanced user experience with purposeful animations

🔗 Related Issues

• Depends on: 🔘 Phase 2.1: Convert Calculator Buttons to Material3 Components #63 (Button Components)
• Related to: 💬 Phase 2.2: Update Dialogs and Alerts to Material3 #64 (Dialog Updates)
• Part of milestone: 🎯 Milestone: Material You Upgrade for v3.0.0 Release #59

📝 Notes

• Consider reduced motion accessibility settings
• Test on lower-end devices for performance
• Ensure animations enhance rather than distract from functionality
• Material3 motion should feel natural and purposeful