Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit bf0bdc18 authored by Alejandro Nijamkin's avatar Alejandro Nijamkin
Browse files

[flexiglass] UX polish for pattern bouncer appear animation. 

Feedback from UX was:
1. Remove the diagonal staggering; dotss to fade in and appear row by row
2. Remove the scaling up of the dots.

Bug: 330475579
Test: manually verified that the animation looks right, also showed to a
UX motion designer in person.
Flag: ACONFIG com.android.systemui.scene_container DEVELOPMENT

Change-Id: I91bc2fb6c1c20901cf0fec7dd0e8700c230013e1
parent 0da90b84

packages/SystemUI/compose/features/src/com/android/systemui/bouncer/ui/composable/PatternBouncer.kt

+2 −35
Original line number Diff line number Diff line
@@ -52,7 +52,6 @@ import com.android.compose.modifiers.thenIf 
import com.android.internal.R

import com.android.systemui.bouncer.ui.viewmodel.PatternBouncerViewModel

import com.android.systemui.bouncer.ui.viewmodel.PatternDotViewModel

import kotlin.math.max

import kotlin.math.min

import kotlin.math.pow

import kotlin.math.sqrt
@@ -110,30 +109,14 @@ internal fun PatternBouncer( 
        remember(dots) {

            dots.associateWith { dot -> with(density) { (80 + (20 * dot.y)).dp.toPx() } }

        }

    val dotAppearScaleAnimatables = remember(dots) { dots.associateWith { Animatable(0f) } }

    LaunchedEffect(Unit) {

        dotAppearFadeInAnimatables.forEach { (dot, animatable) ->

            scope.launch {

                // Maps a dot at x and y to an ordinal number to denote the order in which all dots

                // are visited by the fade-in animation.

                //

                // The order is basically starting from the top-left most dot (at 0,0) and ending at

                // the bottom-right most dot (at 2,2). The visitation order happens

                // diagonal-by-diagonal. Here's a visual representation of the expected output:

                // [0][1][3]

                // [2][4][6]

                // [5][7][8]

                //

                // There's an assumption here that the grid is 3x3. If it's not, this formula needs

                // to be revisited.

                check(viewModel.columnCount == 3 && viewModel.rowCount == 3)

                val staggerOrder = max(0, min(8, 2 * (dot.x + dot.y) + (dot.y - 1)))



                animatable.animateTo(

                    targetValue = 1f,

                    animationSpec =

                        tween(

                            delayMillis = 33 * staggerOrder,

                            delayMillis = 33 * dot.y,

                            durationMillis = 450,

                            easing = Easings.LegacyDecelerate,

                        )
@@ -153,19 +136,6 @@ internal fun PatternBouncer( 
                )

            }

        }

        dotAppearScaleAnimatables.forEach { (dot, animatable) ->

            scope.launch {

                animatable.animateTo(

                    targetValue = 1f,

                    animationSpec =

                        tween(

                            delayMillis = 33 * dot.y,

                            durationMillis = 450,

                            easing = Easings.LegacyDecelerate,

                        )

                )

            }

        }

    }



    val view = LocalView.current
@@ -401,10 +371,7 @@ internal fun PatternBouncer( 
                        ),

                    color =

                        dotColor.copy(alpha = checkNotNull(dotAppearFadeInAnimatables[dot]).value),

                    radius =

                        dotRadius *

                            checkNotNull(dotScalingAnimatables[dot]).value *

                            checkNotNull(dotAppearScaleAnimatables[dot]).value,

                    radius = dotRadius * checkNotNull(dotScalingAnimatables[dot]).value

                )

            }

        }