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

Commit 1a434449 authored by Alejandro Nijamkin's avatar Alejandro Nijamkin
Browse files

[flexiglass] Pattern bouncer appear animation. 

Fix: 330475579
Test: manually. Please see video in comment on the bug.
Flag: ACONFIG com.android.systemui.scene_container DEVELOPMENT
Change-Id: I096eced5d6cf90f77fa20654d498d953e8fbde8f
parent 8ac32a1a

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

+37 −1
Original line number Original line Diff line number Diff line
@@ -21,6 +21,7 @@ package com.android.systemui.bouncer.ui.composable 
import android.app.AlertDialog

import android.app.AlertDialog

import android.content.DialogInterface

import android.content.DialogInterface

import androidx.compose.animation.Crossfade

import androidx.compose.animation.Crossfade

import androidx.compose.animation.core.Animatable

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.core.snap

import androidx.compose.animation.core.snap

import androidx.compose.animation.core.tween

import androidx.compose.animation.core.tween
@@ -54,6 +55,7 @@ import androidx.compose.material3.Text 
import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass

import androidx.compose.material3.windowsizeclass.WindowHeightSizeClass

import androidx.compose.runtime.Composable

import androidx.compose.runtime.Composable

import androidx.compose.runtime.DisposableEffect

import androidx.compose.runtime.DisposableEffect

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.collectAsState

import androidx.compose.runtime.collectAsState

import androidx.compose.runtime.getValue

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf

import androidx.compose.runtime.mutableStateOf
@@ -66,6 +68,7 @@ import androidx.compose.ui.graphics.asImageBitmap 
import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.graphics.graphicsLayer

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.input.pointer.pointerInput

import androidx.compose.ui.platform.LocalContext

import androidx.compose.ui.platform.LocalContext

import androidx.compose.ui.platform.LocalDensity

import androidx.compose.ui.platform.LocalLayoutDirection

import androidx.compose.ui.platform.LocalLayoutDirection

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.text.style.TextOverflow

import androidx.compose.ui.unit.Dp

import androidx.compose.ui.unit.Dp
@@ -75,6 +78,7 @@ import androidx.compose.ui.unit.dp 
import androidx.compose.ui.unit.sp

import androidx.compose.ui.unit.sp

import androidx.compose.ui.unit.times

import androidx.compose.ui.unit.times

import com.android.compose.PlatformButton

import com.android.compose.PlatformButton

import com.android.compose.animation.Easings

import com.android.compose.animation.scene.ElementKey

import com.android.compose.animation.scene.ElementKey

import com.android.compose.animation.scene.SceneKey

import com.android.compose.animation.scene.SceneKey

import com.android.compose.animation.scene.SceneScope

import com.android.compose.animation.scene.SceneScope
@@ -665,10 +669,42 @@ private fun ActionArea( 
    modifier: Modifier = Modifier,

    modifier: Modifier = Modifier,

) {

) {

    val actionButton: BouncerActionButtonModel? by viewModel.actionButton.collectAsState()

    val actionButton: BouncerActionButtonModel? by viewModel.actionButton.collectAsState()

    val appearFadeInAnimatable = remember { Animatable(0f) }

    val appearMoveAnimatable = remember { Animatable(0f) }

    val appearAnimationInitialOffset = with(LocalDensity.current) { 80.dp.toPx() }





    actionButton?.let { actionButtonViewModel ->

    actionButton?.let { actionButtonViewModel ->

        LaunchedEffect(Unit) {

            appearFadeInAnimatable.animateTo(

                targetValue = 1f,

                animationSpec =

                    tween(

                        durationMillis = 450,

                        delayMillis = 133,

                        easing = Easings.LegacyDecelerate,

                    )

            )

        }

        LaunchedEffect(Unit) {

            appearMoveAnimatable.animateTo(

                targetValue = 1f,

                animationSpec =

                    tween(

                        durationMillis = 450,

                        delayMillis = 133,

                        easing = Easings.StandardDecelerate,

                    )

            )

        }



        Box(

        Box(

            modifier = modifier,

            modifier =

                modifier.graphicsLayer {

                    // Translate the button up from an initially pushed-down position:

                    translationY = (1 - appearMoveAnimatable.value) * appearAnimationInitialOffset

                    // Fade the button in:

                    alpha = appearFadeInAnimatable.value

                },

        ) {

        ) {

            Button(

            Button(

                onClick = actionButtonViewModel.onClick,

                onClick = actionButtonViewModel.onClick,

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

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

import com.android.internal.R

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

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

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

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

import kotlin.math.max

import kotlin.math.min

import kotlin.math.min

import kotlin.math.pow

import kotlin.math.pow

import kotlin.math.sqrt

import kotlin.math.sqrt
@@ -72,15 +73,17 @@ internal fun PatternBouncer( 
    centerDotsVertically: Boolean,

    centerDotsVertically: Boolean,

    modifier: Modifier = Modifier,

    modifier: Modifier = Modifier,

) {

) {

    val scope = rememberCoroutineScope()

    val density = LocalDensity.current

    DisposableEffect(Unit) { onDispose { viewModel.onHidden() } }

    DisposableEffect(Unit) { onDispose { viewModel.onHidden() } }





    val colCount = viewModel.columnCount

    val colCount = viewModel.columnCount

    val rowCount = viewModel.rowCount

    val rowCount = viewModel.rowCount





    val dotColor = MaterialTheme.colorScheme.secondary

    val dotColor = MaterialTheme.colorScheme.secondary

    val dotRadius = with(LocalDensity.current) { (DOT_DIAMETER_DP / 2).dp.toPx() }

    val dotRadius = with(density) { (DOT_DIAMETER_DP / 2).dp.toPx() }

    val lineColor = MaterialTheme.colorScheme.primary

    val lineColor = MaterialTheme.colorScheme.primary

    val lineStrokeWidth = with(LocalDensity.current) { LINE_STROKE_WIDTH_DP.dp.toPx() }

    val lineStrokeWidth = with(density) { LINE_STROKE_WIDTH_DP.dp.toPx() }





    // All dots that should be rendered on the grid.

    // All dots that should be rendered on the grid.

    val dots: List<PatternDotViewModel> by viewModel.dots.collectAsState()

    val dots: List<PatternDotViewModel> by viewModel.dots.collectAsState()
@@ -101,7 +104,70 @@ internal fun PatternBouncer( 
        integerResource(R.integer.lock_pattern_line_fade_out_duration)

        integerResource(R.integer.lock_pattern_line_fade_out_duration)

    val lineFadeOutAnimationDelayMs = integerResource(R.integer.lock_pattern_line_fade_out_delay)

    val lineFadeOutAnimationDelayMs = integerResource(R.integer.lock_pattern_line_fade_out_delay)





    val scope = rememberCoroutineScope()

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

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

    val dotAppearMaxOffsetPixels =

        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,

                            durationMillis = 450,

                            easing = Easings.LegacyDecelerate,

                        )

                )

            }

        }

        dotAppearMoveUpAnimatables.forEach { (dot, animatable) ->

            scope.launch {

                animatable.animateTo(

                    targetValue = 1f,

                    animationSpec =

                        tween(

                            delayMillis = 0,

                            durationMillis = 450 + (33 * dot.y),

                            easing = Easings.StandardDecelerate,

                        )

                )

            }

        }

        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

    val view = LocalView.current





    // When the current dot is changed, we need to update our animations.

    // When the current dot is changed, we need to update our animations.
@@ -322,10 +388,23 @@ internal fun PatternBouncer( 




            // Draw each dot on the grid.

            // Draw each dot on the grid.

            dots.forEach { dot ->

            dots.forEach { dot ->

                val initialOffset = checkNotNull(dotAppearMaxOffsetPixels[dot])

                val appearOffset =

                    (1 - checkNotNull(dotAppearMoveUpAnimatables[dot]).value) * initialOffset

                drawCircle(

                drawCircle(

                    center = pixelOffset(dot, spacing, horizontalOffset, verticalOffset),

                    center =

                    color = dotColor,

                        pixelOffset(

                    radius = dotRadius * (dotScalingAnimatables[dot]?.value ?: 1f),

                            dot,

                            spacing,

                            horizontalOffset,

                            verticalOffset + appearOffset,

                        ),

                    color =

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

                    radius =

                        dotRadius *

                            checkNotNull(dotScalingAnimatables[dot]).value *

                            checkNotNull(dotAppearScaleAnimatables[dot]).value,

                )

                )

            }

            }

        }

        }