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

Commit c495745f authored by Andreas Miko's avatar Andreas Miko
Browse files

Improve preview icons animation 

The original spec used a spring for the icons. Unfortunately, that's not
easy to implement with STL as transition is driven by a 0 -> 1 progress.
Jordan suggested that we may write a CustomTransformation that triggers
a spring. We can attempt to do this in a future improvement of the
animation.

I tried using a curve that is translated from a spring "Expressive
default spatial" found here:
https://carbon.googleplex.com/google-material-3/pages/motion/specs
Unfortunately, there seems to be a bug in STL where the overshoot of the
curve is clamped to 1.0f, therefore it appears as if the icon stops
moving when it overshoots.

I talked to jdepriest@ to find a variation that uses our old curves.
It is a bit less bouncy as it doesn't overshoot but we agreed this
version looks great for now. We can iterate later on.

Bug: b/417651636
Test: Verified animation in GalleryApp and video signed off by
      Motion Designer jdepriest@google.com
Flag: com.android.systemui.notification_bundle_ui
Change-Id: Iea1d6e31e7aae6f5f3262323b858524ede261bc5
parent a74a1fb9

packages/SystemUI/compose/features/src/com/android/systemui/notifications/ui/composable/row/BundleHeader.kt

+31 −6
Original line number Diff line number Diff line
@@ -18,6 +18,8 @@ package com.android.systemui.notifications.ui.composable.row 


import android.content.Context

import android.graphics.drawable.Drawable

import androidx.compose.animation.core.FastOutSlowInEasing

import androidx.compose.animation.core.LinearEasing

import androidx.compose.animation.core.tween

import androidx.compose.foundation.Image

import androidx.compose.foundation.background
@@ -80,8 +82,11 @@ object BundleHeader { 
    }



    object Elements {

        // The right most PreviewIcon

        val PreviewIcon1 = ElementKey("PreviewIcon1")

        // The middle PreviewIcon

        val PreviewIcon2 = ElementKey("PreviewIcon2")

        // The left most PreviewIcon

        val PreviewIcon3 = ElementKey("PreviewIcon3")

        val TitleText = ElementKey("TitleText")

    }
@@ -111,13 +116,33 @@ fun BundleHeader(viewModel: BundleHeaderViewModel, modifier: Modifier = Modifier 
            transitions =

                transitions {

                    from(BundleHeader.Scenes.Collapsed, to = BundleHeader.Scenes.Expanded) {

                        spec = tween(500)

                        translate(BundleHeader.Elements.PreviewIcon3, x = 32.dp)

                        translate(BundleHeader.Elements.PreviewIcon2, x = 16.dp)

                        spec = tween(350, easing = LinearEasing)

                        val scale = 0.6f

                        timestampRange(endMillis = 250, easing = FastOutSlowInEasing) {

                            scaleDraw(BundleHeader.Elements.PreviewIcon1, scale, scale)

                        }

                        timestampRange(startMillis = 150, endMillis = 250, easing = LinearEasing) {

                            fade(BundleHeader.Elements.PreviewIcon1)

                        }

                        timestampRange(

                            startMillis = 50,

                            endMillis = 300,

                            easing = FastOutSlowInEasing,

                        ) {

                            translate(BundleHeader.Elements.PreviewIcon2, x = 16.dp)

                            scaleDraw(BundleHeader.Elements.PreviewIcon2, scale, scale)

                        }

                        timestampRange(startMillis = 150, endMillis = 300, easing = LinearEasing) {

                            fade(BundleHeader.Elements.PreviewIcon2)

                        }

                        timestampRange(startMillis = 100, easing = FastOutSlowInEasing) {

                            translate(BundleHeader.Elements.PreviewIcon3, x = 32.dp)

                            scaleDraw(BundleHeader.Elements.PreviewIcon3, scale, scale)

                        }

                        timestampRange(startMillis = 200, endMillis = 350, easing = LinearEasing) {

                            fade(BundleHeader.Elements.PreviewIcon3)

                        }

                    }

                },

        )