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

Commit 6e33dcd5 authored by Tianfan Zhang's avatar Tianfan Zhang
Browse files

Add inner glow on resting moment. 

Stop animated border from fading away and let blur fade away after 1500
ms.

Bug: 440180014
Test: local
Flag: EXEMPT bugfix
Change-Id: I184c58943fe84e76da9fc0e70b3fdcacad72ae00
parent b126a541

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/NavBarPill.kt

+21 −7
Original line number Original line Diff line number Diff line
@@ -16,6 +16,7 @@ 




package com.android.systemui.ambientcue.ui.compose

package com.android.systemui.ambientcue.ui.compose





import androidx.compose.animation.core.Animatable

import androidx.compose.animation.core.MutableTransitionState

import androidx.compose.animation.core.MutableTransitionState

import androidx.compose.animation.core.animateFloat

import androidx.compose.animation.core.animateFloat

import androidx.compose.animation.core.animateFloatAsState

import androidx.compose.animation.core.animateFloatAsState
@@ -84,6 +85,7 @@ import com.android.systemui.ambientcue.ui.utils.FilterUtils 
import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.res.R

import com.android.systemui.res.R

import kotlinx.coroutines.delay





@Composable

@Composable

fun NavBarPill(

fun NavBarPill(
@@ -174,6 +176,15 @@ fun NavBarPill( 
        onAnimationStateChange = onAnimationStateChange,

        onAnimationStateChange = onAnimationStateChange,

    )

    )





    val blurRadius = remember { Animatable(4f) }

    LaunchedEffect(Unit) {

        delay(BLUR_DURATION_MILLIS)

        blurRadius.animateTo(

            targetValue = 0f,

            animationSpec = tween(durationMillis = BLUR_FADE_DURATION_MILLIS),

        )

    }



    val config = LocalConfiguration.current

    val config = LocalConfiguration.current

    val isBoldTextEnabled = config.fontWeightAdjustment > 0

    val isBoldTextEnabled = config.fontWeightAdjustment > 0

    val fontScale = config.fontScale

    val fontScale = config.fontScale
@@ -250,11 +261,6 @@ fun NavBarPill( 
                        Modifier.clip(RoundedCornerShape(16.dp))

                        Modifier.clip(RoundedCornerShape(16.dp))

                            .widthIn(min = navBarWidth, max = maxPillWidth)

                            .widthIn(min = navBarWidth, max = maxPillWidth)

                            .background(backgroundColor)

                            .background(backgroundColor)

                            .animatedActionBorder(

                                strokeWidth = 1.dp,

                                cornerRadius = 16.dp,

                                visible = visible,

                            )

                            .then(

                            .then(

                                if (expanded) Modifier

                                if (expanded) Modifier

                                else

                                else
@@ -386,8 +392,13 @@ fun NavBarPill( 
                // Inner glow

                // Inner glow

                Box(

                Box(

                    Modifier.matchParentSize()

                    Modifier.matchParentSize()

                        .padding(1.dp)

                        // Prevent the border from being invisible due to blur.

                        .blur(4.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)

                        .animatedActionBorder(

                            strokeWidth = 1.dp,

                            cornerRadius = 16.dp,

                            visible = visible,

                        )

                        .blur(blurRadius.value.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)

                        .animatedActionBorder(

                        .animatedActionBorder(

                            strokeWidth = 1.dp,

                            strokeWidth = 1.dp,

                            cornerRadius = 16.dp,

                            cornerRadius = 16.dp,
@@ -428,3 +439,6 @@ fun NavBarPill( 
        }

        }

    }

    }

}

}



private const val BLUR_DURATION_MILLIS = 1500L

private const val BLUR_FADE_DURATION_MILLIS = 500

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/ShortPill.kt

+54 −10
Original line number Original line Diff line number Diff line
@@ -17,6 +17,7 @@ 
package com.android.systemui.ambientcue.ui.compose

package com.android.systemui.ambientcue.ui.compose





import android.view.Surface.ROTATION_90

import android.view.Surface.ROTATION_90

import androidx.compose.animation.core.Animatable

import androidx.compose.animation.core.MutableTransitionState

import androidx.compose.animation.core.MutableTransitionState

import androidx.compose.animation.core.TweenSpec

import androidx.compose.animation.core.TweenSpec

import androidx.compose.animation.core.animateFloat

import androidx.compose.animation.core.animateFloat
@@ -48,6 +49,7 @@ import androidx.compose.material3.IconButtonDefaults 
import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.Text

import androidx.compose.material3.Text

import androidx.compose.runtime.Composable

import androidx.compose.runtime.Composable

import androidx.compose.runtime.LaunchedEffect

import androidx.compose.runtime.derivedStateOf

import androidx.compose.runtime.derivedStateOf

import androidx.compose.runtime.getValue

import androidx.compose.runtime.getValue

import androidx.compose.runtime.mutableStateOf

import androidx.compose.runtime.mutableStateOf
@@ -83,6 +85,7 @@ import com.android.systemui.ambientcue.ui.utils.FilterUtils 
import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionType

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.ambientcue.ui.viewmodel.ActionViewModel

import com.android.systemui.res.R

import com.android.systemui.res.R

import kotlinx.coroutines.delay





@Composable

@Composable

fun ShortPill(

fun ShortPill(
@@ -148,6 +151,15 @@ fun ShortPill( 
            if (it) 0.4f else 0f

            if (it) 0.4f else 0f

        }

        }





    val blurRadius = remember { Animatable(4f) }

    LaunchedEffect(Unit) {

        delay(BLUR_DURATION_MILLIS)

        blurRadius.animateTo(

            targetValue = 0f,

            animationSpec = tween(durationMillis = BLUR_FADE_DURATION_MILLIS),

        )

    }



    AmbientCueJankMonitorComposable(

    AmbientCueJankMonitorComposable(

        visibleTargetState = visibleState.targetState,

        visibleTargetState = visibleState.targetState,

        enterProgress = enterProgress,

        enterProgress = enterProgress,
@@ -223,7 +235,6 @@ fun ShortPill( 
        val pillModifier =

        val pillModifier =

            Modifier.clip(RoundedCornerShape(16.dp))

            Modifier.clip(RoundedCornerShape(16.dp))

                .background(backgroundColor)

                .background(backgroundColor)

                .animatedActionBorder(strokeWidth = 1.dp, cornerRadius = 16.dp, visible = visible)

                .widthIn(0.dp, minSize * 2)

                .widthIn(0.dp, minSize * 2)

                .padding(4.dp)

                .padding(4.dp)
@@ -310,10 +321,19 @@ fun ShortPill( 
                            }

                            }

                        }

                        }





                        // Inner glow

                        Box(

                        Box(

                            Modifier.matchParentSize()

                            Modifier.matchParentSize()

                                .padding(1.dp)

                                // Prevent the border from being invisible due to blur.

                                .blur(4.dp, edgeTreatment = BlurredEdgeTreatment.Unbounded)

                                .animatedActionBorder(

                                    strokeWidth = 1.dp,

                                    cornerRadius = 16.dp,

                                    visible = visible,

                                )

                                .blur(

                                    blurRadius.value.dp,

                                    edgeTreatment = BlurredEdgeTreatment.Unbounded,

                                )

                                .animatedActionBorder(

                                .animatedActionBorder(

                                    strokeWidth = 1.dp,

                                    strokeWidth = 1.dp,

                                    cornerRadius = 16.dp,

                                    cornerRadius = 16.dp,
@@ -344,6 +364,7 @@ fun ShortPill( 
                                pillContentPosition = coordinates.positionInParent()

                                pillContentPosition = coordinates.positionInParent()

                            },

                            },

                ) {

                ) {

                    Box {

                        Column(

                        Column(

                            verticalArrangement =

                            verticalArrangement =

                                Arrangement.spacedBy(-4.dp, Alignment.CenterVertically),

                                Arrangement.spacedBy(-4.dp, Alignment.CenterVertically),
@@ -353,6 +374,27 @@ fun ShortPill( 
                                Icon(action, backgroundColor)

                                Icon(action, backgroundColor)

                            }

                            }

                        }

                        }



                        // Inner glow

                        Box(

                            Modifier.matchParentSize()

                                // Prevent the border from being invisible due to blur.

                                .animatedActionBorder(

                                    strokeWidth = 1.dp,

                                    cornerRadius = 16.dp,

                                    visible = visible,

                                )

                                .blur(

                                    blurRadius.value.dp,

                                    edgeTreatment = BlurredEdgeTreatment.Unbounded,

                                )

                                .animatedActionBorder(

                                    strokeWidth = 1.dp,

                                    cornerRadius = 16.dp,

                                    visible = visible,

                                )

                        )

                    }

                }

                }





                CloseButton(onCloseClick = onCloseClick, modifier = Modifier.size(closeButtonSize))

                CloseButton(onCloseClick = onCloseClick, modifier = Modifier.size(closeButtonSize))
@@ -437,3 +479,5 @@ private fun Icon(action: ActionViewModel, backgroundColor: Color, modifier: Modi 
}

}





private val closeButtonTouchTargetSize = 36.dp

private val closeButtonTouchTargetSize = 36.dp

private const val BLUR_DURATION_MILLIS = 1500L

private const val BLUR_FADE_DURATION_MILLIS = 500

packages/SystemUI/compose/features/src/com/android/systemui/ambientcue/ui/compose/modifier/AnimatedActionBorder.kt

+19 −38
Original line number Original line Diff line number Diff line
@@ -18,6 +18,7 @@ package com.android.systemui.ambientcue.ui.compose.modifier 




import androidx.compose.animation.core.Animatable

import androidx.compose.animation.core.Animatable

import androidx.compose.animation.core.LinearEasing

import androidx.compose.animation.core.LinearEasing

import androidx.compose.animation.core.repeatable

import androidx.compose.animation.core.tween

import androidx.compose.animation.core.tween

import androidx.compose.material3.MaterialTheme

import androidx.compose.material3.MaterialTheme

import androidx.compose.runtime.Composable

import androidx.compose.runtime.Composable
@@ -48,7 +49,6 @@ fun Modifier.animatedActionBorder( 
    visible: Boolean = true,

    visible: Boolean = true,

): Modifier {

): Modifier {

    val rotationAngle = remember { Animatable(Constants.INITIAL_ROTATION_DEGREES) }

    val rotationAngle = remember { Animatable(Constants.INITIAL_ROTATION_DEGREES) }

    val fadeProgress = remember { Animatable(0f) } // 0f = full gradient, 1f = full solid





    val strokeWidthPx = with(LocalDensity.current) { strokeWidth.toPx() }

    val strokeWidthPx = with(LocalDensity.current) { strokeWidth.toPx() }

    val halfStroke = strokeWidthPx / 2f

    val halfStroke = strokeWidthPx / 2f
@@ -65,25 +65,14 @@ fun Modifier.animatedActionBorder( 
            launch {

            launch {

                rotationAngle.snapTo(Constants.INITIAL_ROTATION_DEGREES)

                rotationAngle.snapTo(Constants.INITIAL_ROTATION_DEGREES)

                rotationAngle.animateTo(

                rotationAngle.animateTo(

                    targetValue = Constants.INITIAL_ROTATION_DEGREES + 180f,

                    targetValue = rotationAngle.value + 360f,

                    animationSpec =

                    animationSpec =

                        repeatable(

                            iterations = 2,

                            tween(

                            tween(

                                durationMillis = Constants.ROTATION_DURATION_MILLIS,

                                durationMillis = Constants.ROTATION_DURATION_MILLIS,

                            delayMillis = Constants.FADE_DURATION_MILLIS,

                                easing = LinearEasing,

                                easing = LinearEasing,

                            ),

                            ),

                )

            }



            launch {

                fadeProgress.snapTo(0f)

                fadeProgress.animateTo(

                    targetValue = 1f,

                    animationSpec =

                        tween(

                            durationMillis = Constants.FADE_DURATION_MILLIS,

                            delayMillis = Constants.FADE_DELAY_MILLIS,

                            easing = LinearEasing,

                        ),

                        ),

                )

                )

            }

            }
@@ -92,9 +81,6 @@ fun Modifier.animatedActionBorder( 




    return drawWithContent {

    return drawWithContent {

        val currentRotationRad = Math.toRadians(rotationAngle.value.toDouble()).toFloat()

        val currentRotationRad = Math.toRadians(rotationAngle.value.toDouble()).toFloat()

        val solidOutlineFadeIn = fadeProgress.value



        val gradientOutlineFadeOut = (1f - solidOutlineFadeIn)

        val cornerRadiusPx = with(density) { cornerRadius.toPx() }

        val cornerRadiusPx = with(density) { cornerRadius.toPx() }

        val gradientWidth = size.width / 2f

        val gradientWidth = size.width / 2f
@@ -120,16 +106,13 @@ fun Modifier.animatedActionBorder( 
                tileMode = TileMode.Clamp,

                tileMode = TileMode.Clamp,

            )

            )





        if (gradientOutlineFadeOut > 0) {

        drawRoundRect(

        drawRoundRect(

            brush = gradientBrush,

            brush = gradientBrush,

            topLeft = topLeft,

            topLeft = topLeft,

            size = Size(size.width - strokeWidthPx, size.height - strokeWidthPx),

            size = Size(size.width - strokeWidthPx, size.height - strokeWidthPx),

            cornerRadius = CornerRadius(cornerRadiusPx),

            cornerRadius = CornerRadius(cornerRadiusPx),

                alpha = gradientOutlineFadeOut,

            style = strokeStyle,

            style = strokeStyle,

        )

        )

        }





        drawContent()

        drawContent()

    }

    }
@@ -137,10 +120,8 @@ fun Modifier.animatedActionBorder( 




private object Constants {

private object Constants {

    const val INITIAL_ROTATION_DEGREES: Float = 45f

    const val INITIAL_ROTATION_DEGREES: Float = 45f

    const val GRADIENT_START_FRACTION = 0.1f

    const val GRADIENT_START_FRACTION = 0.3f

    const val GRADIENT_MIDDLE_FRACTION = 0.4f

    const val GRADIENT_MIDDLE_FRACTION = 0.5f

    const val GRADIENT_END_FRACTION = 0.6f

    const val GRADIENT_END_FRACTION = 0.8f

    const val ROTATION_DURATION_MILLIS: Int = 1500

    const val ROTATION_DURATION_MILLIS: Int = 3000

    const val FADE_DURATION_MILLIS: Int = 500

    const val FADE_DELAY_MILLIS: Int = 1500

}
 
}