diff options
12 files changed, 3438 insertions, 1095 deletions
diff --git a/packages/SystemUI/Android.bp b/packages/SystemUI/Android.bp index c4a45d06243b..28635318236d 100644 --- a/packages/SystemUI/Android.bp +++ b/packages/SystemUI/Android.bp @@ -802,6 +802,7 @@ android_library { "SystemUICustomizationTestUtils", "androidx.compose.runtime_runtime", "kosmos", + "testables", "androidx.test.rules", ], libs: [ diff --git a/packages/SystemUI/animation/src/com/android/systemui/animation/ActivityTransitionAnimator.kt b/packages/SystemUI/animation/src/com/android/systemui/animation/ActivityTransitionAnimator.kt index d02527531a53..93a99bd948f1 100644 --- a/packages/SystemUI/animation/src/com/android/systemui/animation/ActivityTransitionAnimator.kt +++ b/packages/SystemUI/animation/src/com/android/systemui/animation/ActivityTransitionAnimator.kt @@ -136,6 +136,23 @@ constructor( ) /** + * The timings when animating a View into an app using a spring animator. + * + * Important: since springs don't have fixed durations, these timings represent fractions of + * the progress between the spring's initial value and its final value. + * + * TODO(b/372858592): make this a separate class explicitly using percentages. + */ + val SPRING_TIMINGS = + TransitionAnimator.Timings( + totalDuration = 1000L, + contentBeforeFadeOutDelay = 0L, + contentBeforeFadeOutDuration = 800L, + contentAfterFadeInDelay = 850L, + contentAfterFadeInDuration = 135L, + ) + + /** * The timings when animating a Dialog into an app. We need to wait at least 200ms before * showing the app (which is under the dialog window) so that the dialog window dim is fully * faded out, to avoid flicker. @@ -152,6 +169,13 @@ constructor( contentAfterFadeInInterpolator = PathInterpolator(0f, 0f, 0.6f, 1f), ) + /** The interpolators when animating a View into an app using a spring animator. */ + val SPRING_INTERPOLATORS = + INTERPOLATORS.copy( + contentBeforeFadeOutInterpolator = Interpolators.DECELERATE_1_5, + contentAfterFadeInInterpolator = Interpolators.SLOW_OUT_LINEAR_IN, + ) + // TODO(b/288507023): Remove this flag. @JvmField val DEBUG_TRANSITION_ANIMATION = Build.IS_DEBUGGABLE diff --git a/packages/SystemUI/animation/src/com/android/systemui/animation/TransitionAnimator.kt b/packages/SystemUI/animation/src/com/android/systemui/animation/TransitionAnimator.kt index 3dc0657f0d0d..1d8ff77ac719 100644 --- a/packages/SystemUI/animation/src/com/android/systemui/animation/TransitionAnimator.kt +++ b/packages/SystemUI/animation/src/com/android/systemui/animation/TransitionAnimator.kt @@ -23,6 +23,7 @@ import android.content.Context import android.graphics.PorterDuff import android.graphics.PorterDuffXfermode import android.graphics.drawable.GradientDrawable +import android.util.FloatProperty import android.util.Log import android.util.MathUtils import android.view.View @@ -31,10 +32,15 @@ import android.view.ViewGroupOverlay import android.view.ViewOverlay import android.view.animation.Interpolator import android.window.WindowAnimationState -import androidx.annotation.VisibleForTesting import com.android.app.animation.Interpolators.LINEAR +import com.android.app.animation.MathUtils.max +import com.android.internal.annotations.VisibleForTesting +import com.android.internal.dynamicanimation.animation.SpringAnimation +import com.android.internal.dynamicanimation.animation.SpringForce import com.android.systemui.shared.Flags.returnAnimationFrameworkLibrary import java.util.concurrent.Executor +import kotlin.math.abs +import kotlin.math.min import kotlin.math.roundToInt private const val TAG = "TransitionAnimator" @@ -44,11 +50,27 @@ class TransitionAnimator( private val mainExecutor: Executor, private val timings: Timings, private val interpolators: Interpolators, + + /** [springTimings] and [springInterpolators] must either both be null or both not null. */ + private val springTimings: Timings? = null, + private val springInterpolators: Interpolators? = null, + private val springParams: SpringParams = DEFAULT_SPRING_PARAMS, ) { companion object { internal const val DEBUG = false private val SRC_MODE = PorterDuffXfermode(PorterDuff.Mode.SRC) + /** Default parameters for the multi-spring animator. */ + private val DEFAULT_SPRING_PARAMS = + SpringParams( + centerXStiffness = 450f, + centerXDampingRatio = 0.965f, + centerYStiffness = 400f, + centerYDampingRatio = 0.95f, + scaleStiffness = 500f, + scaleDampingRatio = 0.99f, + ) + /** * Given the [linearProgress] of a transition animation, return the linear progress of the * sub-animation starting [delay] ms after the transition animation and that lasts @@ -86,11 +108,32 @@ class TransitionAnimator( it.bottomCornerRadius = (bottomLeftRadius + bottomRightRadius) / 2 it.topCornerRadius = (topLeftRadius + topRightRadius) / 2 } + + /** Builds a [FloatProperty] for updating the defined [property] using a spring. */ + private fun buildProperty( + property: SpringProperty, + updateProgress: (SpringState) -> Unit, + ): FloatProperty<SpringState> { + return object : FloatProperty<SpringState>(property.name) { + override fun get(state: SpringState): Float { + return property.get(state) + } + + override fun setValue(state: SpringState, value: Float) { + property.setValue(state, value) + updateProgress(state) + } + } + } } private val transitionContainerLocation = IntArray(2) private val cornerRadii = FloatArray(8) + init { + check((springTimings == null) == (springInterpolators == null)) + } + /** * A controller that takes care of applying the animation to an expanding view. * @@ -198,6 +241,65 @@ class TransitionAnimator( var visible: Boolean = true } + /** Encapsulated the state of a multi-spring animation. */ + internal class SpringState( + // Animated values. + var centerX: Float, + var centerY: Float, + var scale: Float = 0f, + + // Cached values. + var previousCenterX: Float = -1f, + var previousCenterY: Float = -1f, + var previousScale: Float = -1f, + + // Completion flags. + var isCenterXDone: Boolean = false, + var isCenterYDone: Boolean = false, + var isScaleDone: Boolean = false, + ) { + /** Whether all springs composing the animation have settled in the final position. */ + val isDone + get() = isCenterXDone && isCenterYDone && isScaleDone + } + + /** Supported [SpringState] properties with getters and setters to update them. */ + private enum class SpringProperty { + CENTER_X { + override fun get(state: SpringState): Float { + return state.centerX + } + + override fun setValue(state: SpringState, value: Float) { + state.centerX = value + } + }, + CENTER_Y { + override fun get(state: SpringState): Float { + return state.centerY + } + + override fun setValue(state: SpringState, value: Float) { + state.centerY = value + } + }, + SCALE { + override fun get(state: SpringState): Float { + return state.scale + } + + override fun setValue(state: SpringState, value: Float) { + state.scale = value + } + }; + + /** Extracts the current value of the underlying property from [state]. */ + abstract fun get(state: SpringState): Float + + /** Update's the [value] of the underlying property inside [state]. */ + abstract fun setValue(state: SpringState, value: Float) + } + interface Animation { /** Start the animation. */ fun start() @@ -217,6 +319,33 @@ class TransitionAnimator( } } + @VisibleForTesting + class MultiSpringAnimation + internal constructor( + @get:VisibleForTesting val springX: SpringAnimation, + @get:VisibleForTesting val springY: SpringAnimation, + @get:VisibleForTesting val springScale: SpringAnimation, + private val springState: SpringState, + private val onAnimationStart: Runnable, + ) : Animation { + @get:VisibleForTesting + val isDone + get() = springState.isDone + + override fun start() { + onAnimationStart.run() + springX.start() + springY.start() + springScale.start() + } + + override fun cancel() { + springX.cancel() + springY.cancel() + springScale.cancel() + } + } + /** The timings (durations and delays) used by this animator. */ data class Timings( /** The total duration of the animation. */ @@ -256,6 +385,21 @@ class TransitionAnimator( val contentAfterFadeInInterpolator: Interpolator, ) + /** The parameters (stiffnesses and damping ratios) used by the multi-spring animator. */ + data class SpringParams( + // Parameters for the X position spring. + val centerXStiffness: Float, + val centerXDampingRatio: Float, + + // Parameters for the Y position spring. + val centerYStiffness: Float, + val centerYDampingRatio: Float, + + // Parameters for the scale spring. + val scaleStiffness: Float, + val scaleDampingRatio: Float, + ) + /** * Start a transition animation controlled by [controller] towards [endState]. An intermediary * layer with [windowBackgroundColor] will fade in then (optionally) fade out above the @@ -266,6 +410,9 @@ class TransitionAnimator( * the animation (if ![Controller.isLaunching]), and will have SRC blending mode (ultimately * punching a hole in the [transition container][Controller.transitionContainer]) iff [drawHole] * is true. + * + * If [useSpring] is true, a multi-spring animation will be used instead of the default + * interpolators. */ fun startAnimation( controller: Controller, @@ -273,8 +420,9 @@ class TransitionAnimator( windowBackgroundColor: Int, fadeWindowBackgroundLayer: Boolean = true, drawHole: Boolean = false, + useSpring: Boolean = false, ): Animation { - if (!controller.isLaunching) checkReturnAnimationFrameworkFlag() + if (!controller.isLaunching || useSpring) checkReturnAnimationFrameworkFlag() // We add an extra layer with the same color as the dialog/app splash screen background // color, which is usually the same color of the app background. We first fade in this layer @@ -293,6 +441,7 @@ class TransitionAnimator( windowBackgroundLayer, fadeWindowBackgroundLayer, drawHole, + useSpring, ) .apply { start() } } @@ -304,6 +453,7 @@ class TransitionAnimator( endState: State, windowBackgroundLayer: GradientDrawable, fadeWindowBackgroundLayer: Boolean = true, + useSpring: Boolean = false, drawHole: Boolean = false, ): Animation { val transitionContainer = controller.transitionContainer @@ -321,19 +471,35 @@ class TransitionAnimator( openingWindowSyncView != null && openingWindowSyncView.viewRootImpl != controller.transitionContainer.viewRootImpl - return createInterpolatedAnimation( - controller, - startState, - endState, - windowBackgroundLayer, - transitionContainer, - transitionContainerOverlay, - openingWindowSyncView, - openingWindowSyncViewOverlay, - fadeWindowBackgroundLayer, - drawHole, - moveBackgroundLayerWhenAppVisibilityChanges, - ) + return if (useSpring && springTimings != null && springInterpolators != null) { + createSpringAnimation( + controller, + startState, + endState, + windowBackgroundLayer, + transitionContainer, + transitionContainerOverlay, + openingWindowSyncView, + openingWindowSyncViewOverlay, + fadeWindowBackgroundLayer, + drawHole, + moveBackgroundLayerWhenAppVisibilityChanges, + ) + } else { + createInterpolatedAnimation( + controller, + startState, + endState, + windowBackgroundLayer, + transitionContainer, + transitionContainerOverlay, + openingWindowSyncView, + openingWindowSyncViewOverlay, + fadeWindowBackgroundLayer, + drawHole, + moveBackgroundLayerWhenAppVisibilityChanges, + ) + } } /** @@ -478,6 +644,7 @@ class TransitionAnimator( fadeWindowBackgroundLayer, drawHole, controller.isLaunching, + useSpring = false, ) controller.onTransitionAnimationProgress(state, progress, linearProgress) @@ -486,6 +653,215 @@ class TransitionAnimator( return InterpolatedAnimation(animator) } + /** + * Creates a compound animator made up of three springs: one for the center x position, one for + * the center-y position, and one for the overall scale. + * + * This animator uses [springTimings] and [springInterpolators] for opacity, based on the scale + * progress. + */ + private fun createSpringAnimation( + controller: Controller, + startState: State, + endState: State, + windowBackgroundLayer: GradientDrawable, + transitionContainer: View, + transitionContainerOverlay: ViewGroupOverlay, + openingWindowSyncView: View?, + openingWindowSyncViewOverlay: ViewOverlay?, + fadeWindowBackgroundLayer: Boolean = true, + drawHole: Boolean = false, + moveBackgroundLayerWhenAppVisibilityChanges: Boolean = false, + ): Animation { + var springX: SpringAnimation? = null + var springY: SpringAnimation? = null + var targetX = endState.centerX + var targetY = endState.centerY + + var movedBackgroundLayer = false + + fun maybeUpdateEndState() { + if (endState.centerX != targetX && endState.centerY != targetY) { + targetX = endState.centerX + targetY = endState.centerY + + springX?.animateToFinalPosition(targetX) + springY?.animateToFinalPosition(targetY) + } + } + + fun updateProgress(state: SpringState) { + if ( + (!state.isCenterXDone && state.centerX == state.previousCenterX) || + (!state.isCenterYDone && state.centerY == state.previousCenterY) || + (!state.isScaleDone && state.scale == state.previousScale) + ) { + // Because all three springs use the same update method, we only actually update + // when all values have changed, avoiding two redundant calls per frame. + return + } + + // Update the latest values for the check above. + state.previousCenterX = state.centerX + state.previousCenterY = state.centerY + state.previousScale = state.scale + + // Current scale-based values, that will be used to find the new animation bounds. + val width = + MathUtils.lerp(startState.width.toFloat(), endState.width.toFloat(), state.scale) + val height = + MathUtils.lerp(startState.height.toFloat(), endState.height.toFloat(), state.scale) + + val newState = + State( + left = (state.centerX - width / 2).toInt(), + top = (state.centerY - height / 2).toInt(), + right = (state.centerX + width / 2).toInt(), + bottom = (state.centerY + height / 2).toInt(), + topCornerRadius = + MathUtils.lerp( + startState.topCornerRadius, + endState.topCornerRadius, + state.scale, + ), + bottomCornerRadius = + MathUtils.lerp( + startState.bottomCornerRadius, + endState.bottomCornerRadius, + state.scale, + ), + ) + .apply { + visible = checkVisibility(timings, state.scale, controller.isLaunching) + } + + if (!movedBackgroundLayer) { + movedBackgroundLayer = + maybeMoveBackgroundLayer( + controller, + newState, + windowBackgroundLayer, + transitionContainer, + transitionContainerOverlay, + openingWindowSyncView, + openingWindowSyncViewOverlay, + moveBackgroundLayerWhenAppVisibilityChanges, + ) + } + + val container = + if (movedBackgroundLayer) { + openingWindowSyncView!! + } else { + controller.transitionContainer + } + applyStateToWindowBackgroundLayer( + windowBackgroundLayer, + newState, + state.scale, + container, + fadeWindowBackgroundLayer, + drawHole, + isLaunching = false, + useSpring = true, + ) + + controller.onTransitionAnimationProgress(newState, state.scale, state.scale) + + maybeUpdateEndState() + } + + val springState = SpringState(centerX = startState.centerX, centerY = startState.centerY) + val isExpandingFullyAbove = isExpandingFullyAbove(transitionContainer, endState) + + /** End listener for each spring, which only does the end work if all springs are done. */ + fun onAnimationEnd() { + if (!springState.isDone) return + onAnimationEnd( + controller, + isExpandingFullyAbove, + windowBackgroundLayer, + transitionContainerOverlay, + openingWindowSyncViewOverlay, + moveBackgroundLayerWhenAppVisibilityChanges, + ) + } + + springX = + SpringAnimation( + springState, + buildProperty(SpringProperty.CENTER_X) { state -> updateProgress(state) }, + ) + .apply { + spring = + SpringForce(endState.centerX).apply { + stiffness = springParams.centerXStiffness + dampingRatio = springParams.centerXDampingRatio + } + + setStartValue(startState.centerX) + setMinValue(min(startState.centerX, endState.centerX)) + setMaxValue(max(startState.centerX, endState.centerX)) + + addEndListener { _, _, _, _ -> + springState.isCenterXDone = true + onAnimationEnd() + } + } + springY = + SpringAnimation( + springState, + buildProperty(SpringProperty.CENTER_Y) { state -> updateProgress(state) }, + ) + .apply { + spring = + SpringForce(endState.centerY).apply { + stiffness = springParams.centerYStiffness + dampingRatio = springParams.centerYDampingRatio + } + + setStartValue(startState.centerY) + setMinValue(min(startState.centerY, endState.centerY)) + setMaxValue(max(startState.centerY, endState.centerY)) + + addEndListener { _, _, _, _ -> + springState.isCenterYDone = true + onAnimationEnd() + } + } + val springScale = + SpringAnimation( + springState, + buildProperty(SpringProperty.SCALE) { state -> updateProgress(state) }, + ) + .apply { + spring = + SpringForce(1f).apply { + stiffness = springParams.scaleStiffness + dampingRatio = springParams.scaleDampingRatio + } + + setStartValue(0f) + setMaxValue(1f) + setMinimumVisibleChange(abs(1f / startState.height)) + + addEndListener { _, _, _, _ -> + springState.isScaleDone = true + onAnimationEnd() + } + } + + return MultiSpringAnimation(springX, springY, springScale, springState) { + onAnimationStart( + controller, + isExpandingFullyAbove, + windowBackgroundLayer, + transitionContainerOverlay, + openingWindowSyncViewOverlay, + ) + } + } + private fun onAnimationStart( controller: Controller, isExpandingFullyAbove: Boolean, @@ -623,6 +999,7 @@ class TransitionAnimator( fadeWindowBackgroundLayer: Boolean, drawHole: Boolean, isLaunching: Boolean, + useSpring: Boolean, ) { // Update position. transitionContainer.getLocationOnScreen(transitionContainerLocation) @@ -644,8 +1021,19 @@ class TransitionAnimator( cornerRadii[7] = state.bottomCornerRadius drawable.cornerRadii = cornerRadii - // We first fade in the background layer to hide the expanding view, then fade it out - // with SRC mode to draw a hole punch in the status bar and reveal the opening window. + val timings: Timings + val interpolators: Interpolators + if (useSpring) { + timings = springTimings!! + interpolators = springInterpolators!! + } else { + timings = this.timings + interpolators = this.interpolators + } + + // We first fade in the background layer to hide the expanding view, then fade it out with + // SRC mode to draw a hole punch in the status bar and reveal the opening window (if + // needed). If !isLaunching, the reverse happens. val fadeInProgress = getProgress( timings, @@ -653,6 +1041,13 @@ class TransitionAnimator( timings.contentBeforeFadeOutDelay, timings.contentBeforeFadeOutDuration, ) + val fadeOutProgress = + getProgress( + timings, + linearProgress, + timings.contentAfterFadeInDelay, + timings.contentAfterFadeInDuration, + ) if (isLaunching) { if (fadeInProgress < 1) { @@ -660,13 +1055,6 @@ class TransitionAnimator( interpolators.contentBeforeFadeOutInterpolator.getInterpolation(fadeInProgress) drawable.alpha = (alpha * 0xFF).roundToInt() } else if (fadeWindowBackgroundLayer) { - val fadeOutProgress = - getProgress( - timings, - linearProgress, - timings.contentAfterFadeInDelay, - timings.contentAfterFadeInDuration, - ) val alpha = 1 - interpolators.contentAfterFadeInInterpolator.getInterpolation( @@ -690,13 +1078,6 @@ class TransitionAnimator( drawable.setXfermode(SRC_MODE) } } else { - val fadeOutProgress = - getProgress( - timings, - linearProgress, - timings.contentAfterFadeInDelay, - timings.contentAfterFadeInDuration, - ) val alpha = 1 - interpolators.contentAfterFadeInInterpolator.getInterpolation( diff --git a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching.json b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching.json index 60bff17c8541..7f623575fef4 100644 --- a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching.json +++ b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching.json @@ -1,25 +1,30 @@ { "frame_ids": [ - "before", 0, - 26, - 52, - 78, - 105, - 131, - 157, - 184, - 210, - 236, - 263, - 289, - 315, - 342, - 368, - 394, - 421, - 447, - 473, + 20, + 40, + 60, + 80, + 100, + 120, + 140, + 160, + 180, + 200, + 220, + 240, + 260, + 280, + 300, + 320, + 340, + 360, + 380, + 400, + 420, + 440, + 460, + 480, 500 ], "features": [ @@ -28,70 +33,82 @@ "type": "rect", "data_points": [ { - "left": 0, - "top": 0, - "right": 0, - "bottom": 0 - }, - { "left": 100, "top": 300, "right": 200, "bottom": 400 }, { - "left": 98, - "top": 293, - "right": 203, - "bottom": 407 + "left": 99, + "top": 296, + "right": 202, + "bottom": 404 }, { - "left": 91, - "top": 269, - "right": 213, - "bottom": 430 + "left": 95, + "top": 283, + "right": 207, + "bottom": 417 }, { - "left": 71, - "top": 206, - "right": 240, - "bottom": 491 + "left": 86, + "top": 256, + "right": 219, + "bottom": 443 }, { - "left": 34, - "top": 98, - "right": 283, - "bottom": 595 + "left": 68, + "top": 198, + "right": 243, + "bottom": 499 }, { - "left": 22, - "top": 63, - "right": 296, - "bottom": 629 + "left": 39, + "top": 110, + "right": 278, + "bottom": 584 + }, + { + "left": 26, + "top": 74, + "right": 292, + "bottom": 618 + }, + { + "left": 19, + "top": 55, + "right": 299, + "bottom": 637 }, { "left": 15, - "top": 44, - "right": 303, - "bottom": 648 + "top": 42, + "right": 304, + "bottom": 649 }, { - "left": 11, - "top": 32, - "right": 308, - "bottom": 659 + "left": 12, + "top": 33, + "right": 307, + "bottom": 658 }, { - "left": 8, - "top": 23, - "right": 311, - "bottom": 667 + "left": 9, + "top": 27, + "right": 310, + "bottom": 664 + }, + { + "left": 7, + "top": 21, + "right": 312, + "bottom": 669 }, { "left": 6, - "top": 18, - "right": 313, - "bottom": 673 + "top": 17, + "right": 314, + "bottom": 674 }, { "left": 5, @@ -100,16 +117,22 @@ "bottom": 677 }, { - "left": 3, - "top": 9, + "left": 4, + "top": 10, "right": 316, - "bottom": 681 + "bottom": 680 }, { - "left": 2, - "top": 7, + "left": 3, + "top": 8, "right": 317, - "bottom": 683 + "bottom": 682 + }, + { + "left": 2, + "top": 6, + "right": 318, + "bottom": 684 }, { "left": 2, @@ -119,7 +142,7 @@ }, { "left": 1, - "top": 3, + "top": 4, "right": 319, "bottom": 687 }, @@ -130,6 +153,18 @@ "bottom": 688 }, { + "left": 1, + "top": 2, + "right": 319, + "bottom": 688 + }, + { + "left": 0, + "top": 1, + "right": 320, + "bottom": 689 + }, + { "left": 0, "top": 1, "right": 320, @@ -159,7 +194,6 @@ "name": "corner_radii", "type": "cornerRadii", "data_points": [ - null, { "top_left_x": 10, "top_left_y": 10, @@ -171,184 +205,244 @@ "bottom_left_y": 20 }, { - "top_left_x": 9.762664, - "top_left_y": 9.762664, - "top_right_x": 9.762664, - "top_right_y": 9.762664, - "bottom_right_x": 19.525328, - "bottom_right_y": 19.525328, - "bottom_left_x": 19.525328, - "bottom_left_y": 19.525328 - }, - { - "top_left_x": 8.969244, - "top_left_y": 8.969244, - "top_right_x": 8.969244, - "top_right_y": 8.969244, - "bottom_right_x": 17.938488, - "bottom_right_y": 17.938488, - "bottom_left_x": 17.938488, - "bottom_left_y": 17.938488 - }, - { - "top_left_x": 6.8709626, - "top_left_y": 6.8709626, - "top_right_x": 6.8709626, - "top_right_y": 6.8709626, - "bottom_right_x": 13.741925, - "bottom_right_y": 13.741925, - "bottom_left_x": 13.741925, - "bottom_left_y": 13.741925 - }, - { - "top_left_x": 3.260561, - "top_left_y": 3.260561, - "top_right_x": 3.260561, - "top_right_y": 3.260561, - "bottom_right_x": 6.521122, - "bottom_right_y": 6.521122, - "bottom_left_x": 6.521122, - "bottom_left_y": 6.521122 - }, - { - "top_left_x": 2.0915751, - "top_left_y": 2.0915751, - "top_right_x": 2.0915751, - "top_right_y": 2.0915751, - "bottom_right_x": 4.1831503, - "bottom_right_y": 4.1831503, - "bottom_left_x": 4.1831503, - "bottom_left_y": 4.1831503 - }, - { - "top_left_x": 1.4640827, - "top_left_y": 1.4640827, - "top_right_x": 1.4640827, - "top_right_y": 1.4640827, - "bottom_right_x": 2.9281654, - "bottom_right_y": 2.9281654, - "bottom_left_x": 2.9281654, - "bottom_left_y": 2.9281654 - }, - { - "top_left_x": 1.057313, - "top_left_y": 1.057313, - "top_right_x": 1.057313, - "top_right_y": 1.057313, - "bottom_right_x": 2.114626, - "bottom_right_y": 2.114626, - "bottom_left_x": 2.114626, - "bottom_left_y": 2.114626 - }, - { - "top_left_x": 0.7824335, - "top_left_y": 0.7824335, - "top_right_x": 0.7824335, - "top_right_y": 0.7824335, - "bottom_right_x": 1.564867, - "bottom_right_y": 1.564867, - "bottom_left_x": 1.564867, - "bottom_left_y": 1.564867 - }, - { - "top_left_x": 0.5863056, - "top_left_y": 0.5863056, - "top_right_x": 0.5863056, - "top_right_y": 0.5863056, - "bottom_right_x": 1.1726112, - "bottom_right_y": 1.1726112, - "bottom_left_x": 1.1726112, - "bottom_left_y": 1.1726112 - }, - { - "top_left_x": 0.4332962, - "top_left_y": 0.4332962, - "top_right_x": 0.4332962, - "top_right_y": 0.4332962, - "bottom_right_x": 0.8665924, - "bottom_right_y": 0.8665924, - "bottom_left_x": 0.8665924, - "bottom_left_y": 0.8665924 - }, - { - "top_left_x": 0.3145876, - "top_left_y": 0.3145876, - "top_right_x": 0.3145876, - "top_right_y": 0.3145876, - "bottom_right_x": 0.6291752, - "bottom_right_y": 0.6291752, - "bottom_left_x": 0.6291752, - "bottom_left_y": 0.6291752 - }, - { - "top_left_x": 0.22506618, - "top_left_y": 0.22506618, - "top_right_x": 0.22506618, - "top_right_y": 0.22506618, - "bottom_right_x": 0.45013237, - "bottom_right_y": 0.45013237, - "bottom_left_x": 0.45013237, - "bottom_left_y": 0.45013237 - }, - { - "top_left_x": 0.15591621, - "top_left_y": 0.15591621, - "top_right_x": 0.15591621, - "top_right_y": 0.15591621, - "bottom_right_x": 0.31183243, - "bottom_right_y": 0.31183243, - "bottom_left_x": 0.31183243, - "bottom_left_y": 0.31183243 - }, - { - "top_left_x": 0.100948334, - "top_left_y": 0.100948334, - "top_right_x": 0.100948334, - "top_right_y": 0.100948334, - "bottom_right_x": 0.20189667, - "bottom_right_y": 0.20189667, - "bottom_left_x": 0.20189667, - "bottom_left_y": 0.20189667 - }, - { - "top_left_x": 0.06496239, - "top_left_y": 0.06496239, - "top_right_x": 0.06496239, - "top_right_y": 0.06496239, - "bottom_right_x": 0.12992477, - "bottom_right_y": 0.12992477, - "bottom_left_x": 0.12992477, - "bottom_left_y": 0.12992477 - }, - { - "top_left_x": 0.03526497, - "top_left_y": 0.03526497, - "top_right_x": 0.03526497, - "top_right_y": 0.03526497, - "bottom_right_x": 0.07052994, - "bottom_right_y": 0.07052994, - "bottom_left_x": 0.07052994, - "bottom_left_y": 0.07052994 - }, - { - "top_left_x": 0.014661789, - "top_left_y": 0.014661789, - "top_right_x": 0.014661789, - "top_right_y": 0.014661789, - "bottom_right_x": 0.029323578, - "bottom_right_y": 0.029323578, - "bottom_left_x": 0.029323578, - "bottom_left_y": 0.029323578 - }, - { - "top_left_x": 0.0041856766, - "top_left_y": 0.0041856766, - "top_right_x": 0.0041856766, - "top_right_y": 0.0041856766, - "bottom_right_x": 0.008371353, - "bottom_right_y": 0.008371353, - "bottom_left_x": 0.008371353, - "bottom_left_y": 0.008371353 + "top_left_x": 9.865689, + "top_left_y": 9.865689, + "top_right_x": 9.865689, + "top_right_y": 9.865689, + "bottom_right_x": 19.731379, + "bottom_right_y": 19.731379, + "bottom_left_x": 19.731379, + "bottom_left_y": 19.731379 + }, + { + "top_left_x": 9.419104, + "top_left_y": 9.419104, + "top_right_x": 9.419104, + "top_right_y": 9.419104, + "bottom_right_x": 18.838207, + "bottom_right_y": 18.838207, + "bottom_left_x": 18.838207, + "bottom_left_y": 18.838207 + }, + { + "top_left_x": 8.533693, + "top_left_y": 8.533693, + "top_right_x": 8.533693, + "top_right_y": 8.533693, + "bottom_right_x": 17.067387, + "bottom_right_y": 17.067387, + "bottom_left_x": 17.067387, + "bottom_left_y": 17.067387 + }, + { + "top_left_x": 6.5919456, + "top_left_y": 6.5919456, + "top_right_x": 6.5919456, + "top_right_y": 6.5919456, + "bottom_right_x": 13.183891, + "bottom_right_y": 13.183891, + "bottom_left_x": 13.183891, + "bottom_left_y": 13.183891 + }, + { + "top_left_x": 3.6674318, + "top_left_y": 3.6674318, + "top_right_x": 3.6674318, + "top_right_y": 3.6674318, + "bottom_right_x": 7.3348637, + "bottom_right_y": 7.3348637, + "bottom_left_x": 7.3348637, + "bottom_left_y": 7.3348637 + }, + { + "top_left_x": 2.4832253, + "top_left_y": 2.4832253, + "top_right_x": 2.4832253, + "top_right_y": 2.4832253, + "bottom_right_x": 4.9664507, + "bottom_right_y": 4.9664507, + "bottom_left_x": 4.9664507, + "bottom_left_y": 4.9664507 + }, + { + "top_left_x": 1.8252907, + "top_left_y": 1.8252907, + "top_right_x": 1.8252907, + "top_right_y": 1.8252907, + "bottom_right_x": 3.6505814, + "bottom_right_y": 3.6505814, + "bottom_left_x": 3.6505814, + "bottom_left_y": 3.6505814 + }, + { + "top_left_x": 1.4077549, + "top_left_y": 1.4077549, + "top_right_x": 1.4077549, + "top_right_y": 1.4077549, + "bottom_right_x": 2.8155098, + "bottom_right_y": 2.8155098, + "bottom_left_x": 2.8155098, + "bottom_left_y": 2.8155098 + }, + { + "top_left_x": 1.1067667, + "top_left_y": 1.1067667, + "top_right_x": 1.1067667, + "top_right_y": 1.1067667, + "bottom_right_x": 2.2135334, + "bottom_right_y": 2.2135334, + "bottom_left_x": 2.2135334, + "bottom_left_y": 2.2135334 + }, + { + "top_left_x": 0.88593864, + "top_left_y": 0.88593864, + "top_right_x": 0.88593864, + "top_right_y": 0.88593864, + "bottom_right_x": 1.7718773, + "bottom_right_y": 1.7718773, + "bottom_left_x": 1.7718773, + "bottom_left_y": 1.7718773 + }, + { + "top_left_x": 0.7069988, + "top_left_y": 0.7069988, + "top_right_x": 0.7069988, + "top_right_y": 0.7069988, + "bottom_right_x": 1.4139977, + "bottom_right_y": 1.4139977, + "bottom_left_x": 1.4139977, + "bottom_left_y": 1.4139977 + }, + { + "top_left_x": 0.55613136, + "top_left_y": 0.55613136, + "top_right_x": 0.55613136, + "top_right_y": 0.55613136, + "bottom_right_x": 1.1122627, + "bottom_right_y": 1.1122627, + "bottom_left_x": 1.1122627, + "bottom_left_y": 1.1122627 + }, + { + "top_left_x": 0.44889355, + "top_left_y": 0.44889355, + "top_right_x": 0.44889355, + "top_right_y": 0.44889355, + "bottom_right_x": 0.8977871, + "bottom_right_y": 0.8977871, + "bottom_left_x": 0.8977871, + "bottom_left_y": 0.8977871 + }, + { + "top_left_x": 0.34557533, + "top_left_y": 0.34557533, + "top_right_x": 0.34557533, + "top_right_y": 0.34557533, + "bottom_right_x": 0.69115067, + "bottom_right_y": 0.69115067, + "bottom_left_x": 0.69115067, + "bottom_left_y": 0.69115067 + }, + { + "top_left_x": 0.27671337, + "top_left_y": 0.27671337, + "top_right_x": 0.27671337, + "top_right_y": 0.27671337, + "bottom_right_x": 0.55342674, + "bottom_right_y": 0.55342674, + "bottom_left_x": 0.55342674, + "bottom_left_y": 0.55342674 + }, + { + "top_left_x": 0.20785141, + "top_left_y": 0.20785141, + "top_right_x": 0.20785141, + "top_right_y": 0.20785141, + "bottom_right_x": 0.41570282, + "bottom_right_y": 0.41570282, + "bottom_left_x": 0.41570282, + "bottom_left_y": 0.41570282 + }, + { + "top_left_x": 0.1601448, + "top_left_y": 0.1601448, + "top_right_x": 0.1601448, + "top_right_y": 0.1601448, + "bottom_right_x": 0.3202896, + "bottom_right_y": 0.3202896, + "bottom_left_x": 0.3202896, + "bottom_left_y": 0.3202896 + }, + { + "top_left_x": 0.117860794, + "top_left_y": 0.117860794, + "top_right_x": 0.117860794, + "top_right_y": 0.117860794, + "bottom_right_x": 0.23572159, + "bottom_right_y": 0.23572159, + "bottom_left_x": 0.23572159, + "bottom_left_y": 0.23572159 + }, + { + "top_left_x": 0.08036041, + "top_left_y": 0.08036041, + "top_right_x": 0.08036041, + "top_right_y": 0.08036041, + "bottom_right_x": 0.16072083, + "bottom_right_y": 0.16072083, + "bottom_left_x": 0.16072083, + "bottom_left_y": 0.16072083 + }, + { + "top_left_x": 0.05836296, + "top_left_y": 0.05836296, + "top_right_x": 0.05836296, + "top_right_y": 0.05836296, + "bottom_right_x": 0.11672592, + "bottom_right_y": 0.11672592, + "bottom_left_x": 0.11672592, + "bottom_left_y": 0.11672592 + }, + { + "top_left_x": 0.03636551, + "top_left_y": 0.03636551, + "top_right_x": 0.03636551, + "top_right_y": 0.03636551, + "bottom_right_x": 0.07273102, + "bottom_right_y": 0.07273102, + "bottom_left_x": 0.07273102, + "bottom_left_y": 0.07273102 + }, + { + "top_left_x": 0.018137932, + "top_left_y": 0.018137932, + "top_right_x": 0.018137932, + "top_right_y": 0.018137932, + "bottom_right_x": 0.036275864, + "bottom_right_y": 0.036275864, + "bottom_left_x": 0.036275864, + "bottom_left_y": 0.036275864 + }, + { + "top_left_x": 0.0082063675, + "top_left_y": 0.0082063675, + "top_right_x": 0.0082063675, + "top_right_y": 0.0082063675, + "bottom_right_x": 0.016412735, + "bottom_right_y": 0.016412735, + "bottom_left_x": 0.016412735, + "bottom_left_y": 0.016412735 + }, + { + "top_left_x": 0.0031013489, + "top_left_y": 0.0031013489, + "top_right_x": 0.0031013489, + "top_right_y": 0.0031013489, + "bottom_right_x": 0.0062026978, + "bottom_right_y": 0.0062026978, + "bottom_left_x": 0.0062026978, + "bottom_left_y": 0.0062026978 }, { "top_left_x": 0, @@ -367,12 +461,17 @@ "type": "int", "data_points": [ 0, - 0, - 115, - 178, - 217, - 241, - 253, + 96, + 153, + 192, + 220, + 238, + 249, + 254, + 255, + 255, + 255, + 255, 255, 255, 255, diff --git a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching_withSpring.json b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching_withSpring.json new file mode 100644 index 000000000000..18eedd450751 --- /dev/null +++ b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenLaunching_withSpring.json @@ -0,0 +1,375 @@ +{ + "frame_ids": [ + 0, + 16, + 32, + 48, + 64, + 80, + 96, + 112, + 128, + 144, + 160, + 176, + 192, + 208, + 224, + 240, + 256, + 272, + 288, + 304 + ], + "features": [ + { + "name": "bounds", + "type": "rect", + "data_points": [ + { + "left": 0, + "top": 0, + "right": 0, + "bottom": 0 + }, + { + "left": 94, + "top": 284, + "right": 206, + "bottom": 414 + }, + { + "left": 83, + "top": 251, + "right": 219, + "bottom": 447 + }, + { + "left": 70, + "top": 212, + "right": 234, + "bottom": 485 + }, + { + "left": 57, + "top": 173, + "right": 250, + "bottom": 522 + }, + { + "left": 46, + "top": 139, + "right": 264, + "bottom": 555 + }, + { + "left": 36, + "top": 109, + "right": 276, + "bottom": 584 + }, + { + "left": 28, + "top": 84, + "right": 285, + "bottom": 608 + }, + { + "left": 21, + "top": 65, + "right": 293, + "bottom": 627 + }, + { + "left": 16, + "top": 49, + "right": 300, + "bottom": 642 + }, + { + "left": 12, + "top": 36, + "right": 305, + "bottom": 653 + }, + { + "left": 9, + "top": 27, + "right": 308, + "bottom": 662 + }, + { + "left": 7, + "top": 20, + "right": 312, + "bottom": 669 + }, + { + "left": 5, + "top": 14, + "right": 314, + "bottom": 675 + }, + { + "left": 4, + "top": 11, + "right": 315, + "bottom": 678 + }, + { + "left": 3, + "top": 8, + "right": 316, + "bottom": 681 + }, + { + "left": 2, + "top": 5, + "right": 317, + "bottom": 684 + }, + { + "left": 1, + "top": 4, + "right": 318, + "bottom": 685 + }, + { + "left": 1, + "top": 3, + "right": 318, + "bottom": 686 + }, + { + "left": 0, + "top": 2, + "right": 319, + "bottom": 687 + } + ] + }, + { + "name": "corner_radii", + "type": "cornerRadii", + "data_points": [ + null, + { + "top_left_x": 9.492916, + "top_left_y": 9.492916, + "top_right_x": 9.492916, + "top_right_y": 9.492916, + "bottom_right_x": 18.985832, + "bottom_right_y": 18.985832, + "bottom_left_x": 18.985832, + "bottom_left_y": 18.985832 + }, + { + "top_left_x": 8.381761, + "top_left_y": 8.381761, + "top_right_x": 8.381761, + "top_right_y": 8.381761, + "bottom_right_x": 16.763521, + "bottom_right_y": 16.763521, + "bottom_left_x": 16.763521, + "bottom_left_y": 16.763521 + }, + { + "top_left_x": 7.07397, + "top_left_y": 7.07397, + "top_right_x": 7.07397, + "top_right_y": 7.07397, + "bottom_right_x": 14.14794, + "bottom_right_y": 14.14794, + "bottom_left_x": 14.14794, + "bottom_left_y": 14.14794 + }, + { + "top_left_x": 5.7880254, + "top_left_y": 5.7880254, + "top_right_x": 5.7880254, + "top_right_y": 5.7880254, + "bottom_right_x": 11.576051, + "bottom_right_y": 11.576051, + "bottom_left_x": 11.576051, + "bottom_left_y": 11.576051 + }, + { + "top_left_x": 4.6295347, + "top_left_y": 4.6295347, + "top_right_x": 4.6295347, + "top_right_y": 4.6295347, + "bottom_right_x": 9.259069, + "bottom_right_y": 9.259069, + "bottom_left_x": 9.259069, + "bottom_left_y": 9.259069 + }, + { + "top_left_x": 3.638935, + "top_left_y": 3.638935, + "top_right_x": 3.638935, + "top_right_y": 3.638935, + "bottom_right_x": 7.27787, + "bottom_right_y": 7.27787, + "bottom_left_x": 7.27787, + "bottom_left_y": 7.27787 + }, + { + "top_left_x": 2.8209057, + "top_left_y": 2.8209057, + "top_right_x": 2.8209057, + "top_right_y": 2.8209057, + "bottom_right_x": 5.6418114, + "bottom_right_y": 5.6418114, + "bottom_left_x": 5.6418114, + "bottom_left_y": 5.6418114 + }, + { + "top_left_x": 2.1620893, + "top_left_y": 2.1620893, + "top_right_x": 2.1620893, + "top_right_y": 2.1620893, + "bottom_right_x": 4.3241787, + "bottom_right_y": 4.3241787, + "bottom_left_x": 4.3241787, + "bottom_left_y": 4.3241787 + }, + { + "top_left_x": 1.6414614, + "top_left_y": 1.6414614, + "top_right_x": 1.6414614, + "top_right_y": 1.6414614, + "bottom_right_x": 3.2829227, + "bottom_right_y": 3.2829227, + "bottom_left_x": 3.2829227, + "bottom_left_y": 3.2829227 + }, + { + "top_left_x": 1.2361269, + "top_left_y": 1.2361269, + "top_right_x": 1.2361269, + "top_right_y": 1.2361269, + "bottom_right_x": 2.4722538, + "bottom_right_y": 2.4722538, + "bottom_left_x": 2.4722538, + "bottom_left_y": 2.4722538 + }, + { + "top_left_x": 0.92435074, + "top_left_y": 0.92435074, + "top_right_x": 0.92435074, + "top_right_y": 0.92435074, + "bottom_right_x": 1.8487015, + "bottom_right_y": 1.8487015, + "bottom_left_x": 1.8487015, + "bottom_left_y": 1.8487015 + }, + { + "top_left_x": 0.68693924, + "top_left_y": 0.68693924, + "top_right_x": 0.68693924, + "top_right_y": 0.68693924, + "bottom_right_x": 1.3738785, + "bottom_right_y": 1.3738785, + "bottom_left_x": 1.3738785, + "bottom_left_y": 1.3738785 + }, + { + "top_left_x": 0.5076904, + "top_left_y": 0.5076904, + "top_right_x": 0.5076904, + "top_right_y": 0.5076904, + "bottom_right_x": 1.0153809, + "bottom_right_y": 1.0153809, + "bottom_left_x": 1.0153809, + "bottom_left_y": 1.0153809 + }, + { + "top_left_x": 0.3733511, + "top_left_y": 0.3733511, + "top_right_x": 0.3733511, + "top_right_y": 0.3733511, + "bottom_right_x": 0.7467022, + "bottom_right_y": 0.7467022, + "bottom_left_x": 0.7467022, + "bottom_left_y": 0.7467022 + }, + { + "top_left_x": 0.27331638, + "top_left_y": 0.27331638, + "top_right_x": 0.27331638, + "top_right_y": 0.27331638, + "bottom_right_x": 0.54663277, + "bottom_right_y": 0.54663277, + "bottom_left_x": 0.54663277, + "bottom_left_y": 0.54663277 + }, + { + "top_left_x": 0.19925308, + "top_left_y": 0.19925308, + "top_right_x": 0.19925308, + "top_right_y": 0.19925308, + "bottom_right_x": 0.39850616, + "bottom_right_y": 0.39850616, + "bottom_left_x": 0.39850616, + "bottom_left_y": 0.39850616 + }, + { + "top_left_x": 0.14470005, + "top_left_y": 0.14470005, + "top_right_x": 0.14470005, + "top_right_y": 0.14470005, + "bottom_right_x": 0.2894001, + "bottom_right_y": 0.2894001, + "bottom_left_x": 0.2894001, + "bottom_left_y": 0.2894001 + }, + { + "top_left_x": 0.10470486, + "top_left_y": 0.10470486, + "top_right_x": 0.10470486, + "top_right_y": 0.10470486, + "bottom_right_x": 0.20940971, + "bottom_right_y": 0.20940971, + "bottom_left_x": 0.20940971, + "bottom_left_y": 0.20940971 + }, + { + "top_left_x": 0.07550812, + "top_left_y": 0.07550812, + "top_right_x": 0.07550812, + "top_right_y": 0.07550812, + "bottom_right_x": 0.15101624, + "bottom_right_y": 0.15101624, + "bottom_left_x": 0.15101624, + "bottom_left_y": 0.15101624 + } + ] + }, + { + "name": "alpha", + "type": "int", + "data_points": [ + 0, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 249, + 226, + 192, + 153, + 112, + 72, + 34, + 0, + 0, + 0 + ] + } + ] +}
\ No newline at end of file diff --git a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning.json b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning.json index ea768c0a04bd..98005c53f6e0 100644 --- a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning.json +++ b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning.json @@ -1,25 +1,30 @@ { "frame_ids": [ - "before", 0, - 26, - 52, - 78, - 105, - 131, - 157, - 184, - 210, - 236, - 263, - 289, - 315, - 342, - 368, - 394, - 421, - 447, - 473, + 20, + 40, + 60, + 80, + 100, + 120, + 140, + 160, + 180, + 200, + 220, + 240, + 260, + 280, + 300, + 320, + 340, + 360, + 380, + 400, + 420, + 440, + 460, + 480, 500 ], "features": [ @@ -28,70 +33,82 @@ "type": "rect", "data_points": [ { - "left": 0, - "top": 0, - "right": 0, - "bottom": 0 - }, - { "left": 100, "top": 300, "right": 200, "bottom": 400 }, { - "left": 98, - "top": 293, - "right": 203, - "bottom": 407 + "left": 99, + "top": 296, + "right": 202, + "bottom": 404 }, { - "left": 91, - "top": 269, - "right": 213, - "bottom": 430 + "left": 95, + "top": 283, + "right": 207, + "bottom": 417 }, { - "left": 71, - "top": 206, - "right": 240, - "bottom": 491 + "left": 86, + "top": 256, + "right": 219, + "bottom": 443 }, { - "left": 34, - "top": 98, - "right": 283, - "bottom": 595 + "left": 68, + "top": 198, + "right": 243, + "bottom": 499 }, { - "left": 22, - "top": 63, - "right": 296, - "bottom": 629 + "left": 39, + "top": 110, + "right": 278, + "bottom": 584 + }, + { + "left": 26, + "top": 74, + "right": 292, + "bottom": 618 + }, + { + "left": 19, + "top": 55, + "right": 299, + "bottom": 637 }, { "left": 15, - "top": 44, - "right": 303, - "bottom": 648 + "top": 42, + "right": 304, + "bottom": 649 }, { - "left": 11, - "top": 32, - "right": 308, - "bottom": 659 + "left": 12, + "top": 33, + "right": 307, + "bottom": 658 }, { - "left": 8, - "top": 23, - "right": 311, - "bottom": 667 + "left": 9, + "top": 27, + "right": 310, + "bottom": 664 + }, + { + "left": 7, + "top": 21, + "right": 312, + "bottom": 669 }, { "left": 6, - "top": 18, - "right": 313, - "bottom": 673 + "top": 17, + "right": 314, + "bottom": 674 }, { "left": 5, @@ -100,16 +117,22 @@ "bottom": 677 }, { - "left": 3, - "top": 9, + "left": 4, + "top": 10, "right": 316, - "bottom": 681 + "bottom": 680 }, { - "left": 2, - "top": 7, + "left": 3, + "top": 8, "right": 317, - "bottom": 683 + "bottom": 682 + }, + { + "left": 2, + "top": 6, + "right": 318, + "bottom": 684 }, { "left": 2, @@ -119,7 +142,7 @@ }, { "left": 1, - "top": 3, + "top": 4, "right": 319, "bottom": 687 }, @@ -130,6 +153,18 @@ "bottom": 688 }, { + "left": 1, + "top": 2, + "right": 319, + "bottom": 688 + }, + { + "left": 0, + "top": 1, + "right": 320, + "bottom": 689 + }, + { "left": 0, "top": 1, "right": 320, @@ -159,7 +194,6 @@ "name": "corner_radii", "type": "cornerRadii", "data_points": [ - null, { "top_left_x": 10, "top_left_y": 10, @@ -171,184 +205,244 @@ "bottom_left_y": 20 }, { - "top_left_x": 9.762664, - "top_left_y": 9.762664, - "top_right_x": 9.762664, - "top_right_y": 9.762664, - "bottom_right_x": 19.525328, - "bottom_right_y": 19.525328, - "bottom_left_x": 19.525328, - "bottom_left_y": 19.525328 - }, - { - "top_left_x": 8.969244, - "top_left_y": 8.969244, - "top_right_x": 8.969244, - "top_right_y": 8.969244, - "bottom_right_x": 17.938488, - "bottom_right_y": 17.938488, - "bottom_left_x": 17.938488, - "bottom_left_y": 17.938488 - }, - { - "top_left_x": 6.8709626, - "top_left_y": 6.8709626, - "top_right_x": 6.8709626, - "top_right_y": 6.8709626, - "bottom_right_x": 13.741925, - "bottom_right_y": 13.741925, - "bottom_left_x": 13.741925, - "bottom_left_y": 13.741925 - }, - { - "top_left_x": 3.260561, - "top_left_y": 3.260561, - "top_right_x": 3.260561, - "top_right_y": 3.260561, - "bottom_right_x": 6.521122, - "bottom_right_y": 6.521122, - "bottom_left_x": 6.521122, - "bottom_left_y": 6.521122 - }, - { - "top_left_x": 2.0915751, - "top_left_y": 2.0915751, - "top_right_x": 2.0915751, - "top_right_y": 2.0915751, - "bottom_right_x": 4.1831503, - "bottom_right_y": 4.1831503, - "bottom_left_x": 4.1831503, - "bottom_left_y": 4.1831503 - }, - { - "top_left_x": 1.4640827, - "top_left_y": 1.4640827, - "top_right_x": 1.4640827, - "top_right_y": 1.4640827, - "bottom_right_x": 2.9281654, - "bottom_right_y": 2.9281654, - "bottom_left_x": 2.9281654, - "bottom_left_y": 2.9281654 - }, - { - "top_left_x": 1.057313, - "top_left_y": 1.057313, - "top_right_x": 1.057313, - "top_right_y": 1.057313, - "bottom_right_x": 2.114626, - "bottom_right_y": 2.114626, - "bottom_left_x": 2.114626, - "bottom_left_y": 2.114626 - }, - { - "top_left_x": 0.7824335, - "top_left_y": 0.7824335, - "top_right_x": 0.7824335, - "top_right_y": 0.7824335, - "bottom_right_x": 1.564867, - "bottom_right_y": 1.564867, - "bottom_left_x": 1.564867, - "bottom_left_y": 1.564867 - }, - { - "top_left_x": 0.5863056, - "top_left_y": 0.5863056, - "top_right_x": 0.5863056, - "top_right_y": 0.5863056, - "bottom_right_x": 1.1726112, - "bottom_right_y": 1.1726112, - "bottom_left_x": 1.1726112, - "bottom_left_y": 1.1726112 - }, - { - "top_left_x": 0.4332962, - "top_left_y": 0.4332962, - "top_right_x": 0.4332962, - "top_right_y": 0.4332962, - "bottom_right_x": 0.8665924, - "bottom_right_y": 0.8665924, - "bottom_left_x": 0.8665924, - "bottom_left_y": 0.8665924 - }, - { - "top_left_x": 0.3145876, - "top_left_y": 0.3145876, - "top_right_x": 0.3145876, - "top_right_y": 0.3145876, - "bottom_right_x": 0.6291752, - "bottom_right_y": 0.6291752, - "bottom_left_x": 0.6291752, - "bottom_left_y": 0.6291752 - }, - { - "top_left_x": 0.22506618, - "top_left_y": 0.22506618, - "top_right_x": 0.22506618, - "top_right_y": 0.22506618, - "bottom_right_x": 0.45013237, - "bottom_right_y": 0.45013237, - "bottom_left_x": 0.45013237, - "bottom_left_y": 0.45013237 - }, - { - "top_left_x": 0.15591621, - "top_left_y": 0.15591621, - "top_right_x": 0.15591621, - "top_right_y": 0.15591621, - "bottom_right_x": 0.31183243, - "bottom_right_y": 0.31183243, - "bottom_left_x": 0.31183243, - "bottom_left_y": 0.31183243 - }, - { - "top_left_x": 0.100948334, - "top_left_y": 0.100948334, - "top_right_x": 0.100948334, - "top_right_y": 0.100948334, - "bottom_right_x": 0.20189667, - "bottom_right_y": 0.20189667, - "bottom_left_x": 0.20189667, - "bottom_left_y": 0.20189667 - }, - { - "top_left_x": 0.06496239, - "top_left_y": 0.06496239, - "top_right_x": 0.06496239, - "top_right_y": 0.06496239, - "bottom_right_x": 0.12992477, - "bottom_right_y": 0.12992477, - "bottom_left_x": 0.12992477, - "bottom_left_y": 0.12992477 - }, - { - "top_left_x": 0.03526497, - "top_left_y": 0.03526497, - "top_right_x": 0.03526497, - "top_right_y": 0.03526497, - "bottom_right_x": 0.07052994, - "bottom_right_y": 0.07052994, - "bottom_left_x": 0.07052994, - "bottom_left_y": 0.07052994 - }, - { - "top_left_x": 0.014661789, - "top_left_y": 0.014661789, - "top_right_x": 0.014661789, - "top_right_y": 0.014661789, - "bottom_right_x": 0.029323578, - "bottom_right_y": 0.029323578, - "bottom_left_x": 0.029323578, - "bottom_left_y": 0.029323578 - }, - { - "top_left_x": 0.0041856766, - "top_left_y": 0.0041856766, - "top_right_x": 0.0041856766, - "top_right_y": 0.0041856766, - "bottom_right_x": 0.008371353, - "bottom_right_y": 0.008371353, - "bottom_left_x": 0.008371353, - "bottom_left_y": 0.008371353 + "top_left_x": 9.865689, + "top_left_y": 9.865689, + "top_right_x": 9.865689, + "top_right_y": 9.865689, + "bottom_right_x": 19.731379, + "bottom_right_y": 19.731379, + "bottom_left_x": 19.731379, + "bottom_left_y": 19.731379 + }, + { + "top_left_x": 9.419104, + "top_left_y": 9.419104, + "top_right_x": 9.419104, + "top_right_y": 9.419104, + "bottom_right_x": 18.838207, + "bottom_right_y": 18.838207, + "bottom_left_x": 18.838207, + "bottom_left_y": 18.838207 + }, + { + "top_left_x": 8.533693, + "top_left_y": 8.533693, + "top_right_x": 8.533693, + "top_right_y": 8.533693, + "bottom_right_x": 17.067387, + "bottom_right_y": 17.067387, + "bottom_left_x": 17.067387, + "bottom_left_y": 17.067387 + }, + { + "top_left_x": 6.5919456, + "top_left_y": 6.5919456, + "top_right_x": 6.5919456, + "top_right_y": 6.5919456, + "bottom_right_x": 13.183891, + "bottom_right_y": 13.183891, + "bottom_left_x": 13.183891, + "bottom_left_y": 13.183891 + }, + { + "top_left_x": 3.6674318, + "top_left_y": 3.6674318, + "top_right_x": 3.6674318, + "top_right_y": 3.6674318, + "bottom_right_x": 7.3348637, + "bottom_right_y": 7.3348637, + "bottom_left_x": 7.3348637, + "bottom_left_y": 7.3348637 + }, + { + "top_left_x": 2.4832253, + "top_left_y": 2.4832253, + "top_right_x": 2.4832253, + "top_right_y": 2.4832253, + "bottom_right_x": 4.9664507, + "bottom_right_y": 4.9664507, + "bottom_left_x": 4.9664507, + "bottom_left_y": 4.9664507 + }, + { + "top_left_x": 1.8252907, + "top_left_y": 1.8252907, + "top_right_x": 1.8252907, + "top_right_y": 1.8252907, + "bottom_right_x": 3.6505814, + "bottom_right_y": 3.6505814, + "bottom_left_x": 3.6505814, + "bottom_left_y": 3.6505814 + }, + { + "top_left_x": 1.4077549, + "top_left_y": 1.4077549, + "top_right_x": 1.4077549, + "top_right_y": 1.4077549, + "bottom_right_x": 2.8155098, + "bottom_right_y": 2.8155098, + "bottom_left_x": 2.8155098, + "bottom_left_y": 2.8155098 + }, + { + "top_left_x": 1.1067667, + "top_left_y": 1.1067667, + "top_right_x": 1.1067667, + "top_right_y": 1.1067667, + "bottom_right_x": 2.2135334, + "bottom_right_y": 2.2135334, + "bottom_left_x": 2.2135334, + "bottom_left_y": 2.2135334 + }, + { + "top_left_x": 0.88593864, + "top_left_y": 0.88593864, + "top_right_x": 0.88593864, + "top_right_y": 0.88593864, + "bottom_right_x": 1.7718773, + "bottom_right_y": 1.7718773, + "bottom_left_x": 1.7718773, + "bottom_left_y": 1.7718773 + }, + { + "top_left_x": 0.7069988, + "top_left_y": 0.7069988, + "top_right_x": 0.7069988, + "top_right_y": 0.7069988, + "bottom_right_x": 1.4139977, + "bottom_right_y": 1.4139977, + "bottom_left_x": 1.4139977, + "bottom_left_y": 1.4139977 + }, + { + "top_left_x": 0.55613136, + "top_left_y": 0.55613136, + "top_right_x": 0.55613136, + "top_right_y": 0.55613136, + "bottom_right_x": 1.1122627, + "bottom_right_y": 1.1122627, + "bottom_left_x": 1.1122627, + "bottom_left_y": 1.1122627 + }, + { + "top_left_x": 0.44889355, + "top_left_y": 0.44889355, + "top_right_x": 0.44889355, + "top_right_y": 0.44889355, + "bottom_right_x": 0.8977871, + "bottom_right_y": 0.8977871, + "bottom_left_x": 0.8977871, + "bottom_left_y": 0.8977871 + }, + { + "top_left_x": 0.34557533, + "top_left_y": 0.34557533, + "top_right_x": 0.34557533, + "top_right_y": 0.34557533, + "bottom_right_x": 0.69115067, + "bottom_right_y": 0.69115067, + "bottom_left_x": 0.69115067, + "bottom_left_y": 0.69115067 + }, + { + "top_left_x": 0.27671337, + "top_left_y": 0.27671337, + "top_right_x": 0.27671337, + "top_right_y": 0.27671337, + "bottom_right_x": 0.55342674, + "bottom_right_y": 0.55342674, + "bottom_left_x": 0.55342674, + "bottom_left_y": 0.55342674 + }, + { + "top_left_x": 0.20785141, + "top_left_y": 0.20785141, + "top_right_x": 0.20785141, + "top_right_y": 0.20785141, + "bottom_right_x": 0.41570282, + "bottom_right_y": 0.41570282, + "bottom_left_x": 0.41570282, + "bottom_left_y": 0.41570282 + }, + { + "top_left_x": 0.1601448, + "top_left_y": 0.1601448, + "top_right_x": 0.1601448, + "top_right_y": 0.1601448, + "bottom_right_x": 0.3202896, + "bottom_right_y": 0.3202896, + "bottom_left_x": 0.3202896, + "bottom_left_y": 0.3202896 + }, + { + "top_left_x": 0.117860794, + "top_left_y": 0.117860794, + "top_right_x": 0.117860794, + "top_right_y": 0.117860794, + "bottom_right_x": 0.23572159, + "bottom_right_y": 0.23572159, + "bottom_left_x": 0.23572159, + "bottom_left_y": 0.23572159 + }, + { + "top_left_x": 0.08036041, + "top_left_y": 0.08036041, + "top_right_x": 0.08036041, + "top_right_y": 0.08036041, + "bottom_right_x": 0.16072083, + "bottom_right_y": 0.16072083, + "bottom_left_x": 0.16072083, + "bottom_left_y": 0.16072083 + }, + { + "top_left_x": 0.05836296, + "top_left_y": 0.05836296, + "top_right_x": 0.05836296, + "top_right_y": 0.05836296, + "bottom_right_x": 0.11672592, + "bottom_right_y": 0.11672592, + "bottom_left_x": 0.11672592, + "bottom_left_y": 0.11672592 + }, + { + "top_left_x": 0.03636551, + "top_left_y": 0.03636551, + "top_right_x": 0.03636551, + "top_right_y": 0.03636551, + "bottom_right_x": 0.07273102, + "bottom_right_y": 0.07273102, + "bottom_left_x": 0.07273102, + "bottom_left_y": 0.07273102 + }, + { + "top_left_x": 0.018137932, + "top_left_y": 0.018137932, + "top_right_x": 0.018137932, + "top_right_y": 0.018137932, + "bottom_right_x": 0.036275864, + "bottom_right_y": 0.036275864, + "bottom_left_x": 0.036275864, + "bottom_left_y": 0.036275864 + }, + { + "top_left_x": 0.0082063675, + "top_left_y": 0.0082063675, + "top_right_x": 0.0082063675, + "top_right_y": 0.0082063675, + "bottom_right_x": 0.016412735, + "bottom_right_y": 0.016412735, + "bottom_left_x": 0.016412735, + "bottom_left_y": 0.016412735 + }, + { + "top_left_x": 0.0031013489, + "top_left_y": 0.0031013489, + "top_right_x": 0.0031013489, + "top_right_y": 0.0031013489, + "bottom_right_x": 0.0062026978, + "bottom_right_y": 0.0062026978, + "bottom_left_x": 0.0062026978, + "bottom_left_y": 0.0062026978 }, { "top_left_x": 0, @@ -366,20 +460,25 @@ "name": "alpha", "type": "int", "data_points": [ - 0, 255, 255, 255, 255, 255, 255, - 239, - 183, - 135, - 91, - 53, - 23, - 5, + 255, + 255, + 233, + 191, + 153, + 117, + 85, + 57, + 33, + 14, + 3, + 0, + 0, 0, 0, 0, diff --git a/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning_withSpring.json b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning_withSpring.json new file mode 100644 index 000000000000..18eedd450751 --- /dev/null +++ b/packages/SystemUI/tests/goldens/backgroundAnimationWithoutFade_whenReturning_withSpring.json @@ -0,0 +1,375 @@ +{ + "frame_ids": [ + 0, + 16, + 32, + 48, + 64, + 80, + 96, + 112, + 128, + 144, + 160, + 176, + 192, + 208, + 224, + 240, + 256, + 272, + 288, + 304 + ], + "features": [ + { + "name": "bounds", + "type": "rect", + "data_points": [ + { + "left": 0, + "top": 0, + "right": 0, + "bottom": 0 + }, + { + "left": 94, + "top": 284, + "right": 206, + "bottom": 414 + }, + { + "left": 83, + "top": 251, + "right": 219, + "bottom": 447 + }, + { + "left": 70, + "top": 212, + "right": 234, + "bottom": 485 + }, + { + "left": 57, + "top": 173, + "right": 250, + "bottom": 522 + }, + { + "left": 46, + "top": 139, + "right": 264, + "bottom": 555 + }, + { + "left": 36, + "top": 109, + "right": 276, + "bottom": 584 + }, + { + "left": 28, + "top": 84, + "right": 285, + "bottom": 608 + }, + { + "left": 21, + "top": 65, + "right": 293, + "bottom": 627 + }, + { + "left": 16, + "top": 49, + "right": 300, + "bottom": 642 + }, + { + "left": 12, + "top": 36, + "right": 305, + "bottom": 653 + }, + { + "left": 9, + "top": 27, + "right": 308, + "bottom": 662 + }, + { + "left": 7, + "top": 20, + "right": 312, + "bottom": 669 + }, + { + "left": 5, + "top": 14, + "right": 314, + "bottom": 675 + }, + { + "left": 4, + "top": 11, + "right": 315, + "bottom": 678 + }, + { + "left": 3, + "top": 8, + "right": 316, + "bottom": 681 + }, + { + "left": 2, + "top": 5, + "right": 317, + "bottom": 684 + }, + { + "left": 1, + "top": 4, + "right": 318, + "bottom": 685 + }, + { + "left": 1, + "top": 3, + "right": 318, + "bottom": 686 + }, + { + "left": 0, + "top": 2, + "right": 319, + "bottom": 687 + } + ] + }, + { + "name": "corner_radii", + "type": "cornerRadii", + "data_points": [ + null, + { + "top_left_x": 9.492916, + "top_left_y": 9.492916, + "top_right_x": 9.492916, + "top_right_y": 9.492916, + "bottom_right_x": 18.985832, + "bottom_right_y": 18.985832, + "bottom_left_x": 18.985832, + "bottom_left_y": 18.985832 + }, + { + "top_left_x": 8.381761, + "top_left_y": 8.381761, + "top_right_x": 8.381761, + "top_right_y": 8.381761, + "bottom_right_x": 16.763521, + "bottom_right_y": 16.763521, + "bottom_left_x": 16.763521, + "bottom_left_y": 16.763521 + }, + { + "top_left_x": 7.07397, + "top_left_y": 7.07397, + "top_right_x": 7.07397, + "top_right_y": 7.07397, + "bottom_right_x": 14.14794, + "bottom_right_y": 14.14794, + "bottom_left_x": 14.14794, + "bottom_left_y": 14.14794 + }, + { + "top_left_x": 5.7880254, + "top_left_y": 5.7880254, + "top_right_x": 5.7880254, + "top_right_y": 5.7880254, + "bottom_right_x": 11.576051, + "bottom_right_y": 11.576051, + "bottom_left_x": 11.576051, + "bottom_left_y": 11.576051 + }, + { + "top_left_x": 4.6295347, + "top_left_y": 4.6295347, + "top_right_x": 4.6295347, + "top_right_y": 4.6295347, + "bottom_right_x": 9.259069, + "bottom_right_y": 9.259069, + "bottom_left_x": 9.259069, + "bottom_left_y": 9.259069 + }, + { + "top_left_x": 3.638935, + "top_left_y": 3.638935, + "top_right_x": 3.638935, + "top_right_y": 3.638935, + "bottom_right_x": 7.27787, + "bottom_right_y": 7.27787, + "bottom_left_x": 7.27787, + "bottom_left_y": 7.27787 + }, + { + "top_left_x": 2.8209057, + "top_left_y": 2.8209057, + "top_right_x": 2.8209057, + "top_right_y": 2.8209057, + "bottom_right_x": 5.6418114, + "bottom_right_y": 5.6418114, + "bottom_left_x": 5.6418114, + "bottom_left_y": 5.6418114 + }, + { + "top_left_x": 2.1620893, + "top_left_y": 2.1620893, + "top_right_x": 2.1620893, + "top_right_y": 2.1620893, + "bottom_right_x": 4.3241787, + "bottom_right_y": 4.3241787, + "bottom_left_x": 4.3241787, + "bottom_left_y": 4.3241787 + }, + { + "top_left_x": 1.6414614, + "top_left_y": 1.6414614, + "top_right_x": 1.6414614, + "top_right_y": 1.6414614, + "bottom_right_x": 3.2829227, + "bottom_right_y": 3.2829227, + "bottom_left_x": 3.2829227, + "bottom_left_y": 3.2829227 + }, + { + "top_left_x": 1.2361269, + "top_left_y": 1.2361269, + "top_right_x": 1.2361269, + "top_right_y": 1.2361269, + "bottom_right_x": 2.4722538, + "bottom_right_y": 2.4722538, + "bottom_left_x": 2.4722538, + "bottom_left_y": 2.4722538 + }, + { + "top_left_x": 0.92435074, + "top_left_y": 0.92435074, + "top_right_x": 0.92435074, + "top_right_y": 0.92435074, + "bottom_right_x": 1.8487015, + "bottom_right_y": 1.8487015, + "bottom_left_x": 1.8487015, + "bottom_left_y": 1.8487015 + }, + { + "top_left_x": 0.68693924, + "top_left_y": 0.68693924, + "top_right_x": 0.68693924, + "top_right_y": 0.68693924, + "bottom_right_x": 1.3738785, + "bottom_right_y": 1.3738785, + "bottom_left_x": 1.3738785, + "bottom_left_y": 1.3738785 + }, + { + "top_left_x": 0.5076904, + "top_left_y": 0.5076904, + "top_right_x": 0.5076904, + "top_right_y": 0.5076904, + "bottom_right_x": 1.0153809, + "bottom_right_y": 1.0153809, + "bottom_left_x": 1.0153809, + "bottom_left_y": 1.0153809 + }, + { + "top_left_x": 0.3733511, + "top_left_y": 0.3733511, + "top_right_x": 0.3733511, + "top_right_y": 0.3733511, + "bottom_right_x": 0.7467022, + "bottom_right_y": 0.7467022, + "bottom_left_x": 0.7467022, + "bottom_left_y": 0.7467022 + }, + { + "top_left_x": 0.27331638, + "top_left_y": 0.27331638, + "top_right_x": 0.27331638, + "top_right_y": 0.27331638, + "bottom_right_x": 0.54663277, + "bottom_right_y": 0.54663277, + "bottom_left_x": 0.54663277, + "bottom_left_y": 0.54663277 + }, + { + "top_left_x": 0.19925308, + "top_left_y": 0.19925308, + "top_right_x": 0.19925308, + "top_right_y": 0.19925308, + "bottom_right_x": 0.39850616, + "bottom_right_y": 0.39850616, + "bottom_left_x": 0.39850616, + "bottom_left_y": 0.39850616 + }, + { + "top_left_x": 0.14470005, + "top_left_y": 0.14470005, + "top_right_x": 0.14470005, + "top_right_y": 0.14470005, + "bottom_right_x": 0.2894001, + "bottom_right_y": 0.2894001, + "bottom_left_x": 0.2894001, + "bottom_left_y": 0.2894001 + }, + { + "top_left_x": 0.10470486, + "top_left_y": 0.10470486, + "top_right_x": 0.10470486, + "top_right_y": 0.10470486, + "bottom_right_x": 0.20940971, + "bottom_right_y": 0.20940971, + "bottom_left_x": 0.20940971, + "bottom_left_y": 0.20940971 + }, + { + "top_left_x": 0.07550812, + "top_left_y": 0.07550812, + "top_right_x": 0.07550812, + "top_right_y": 0.07550812, + "bottom_right_x": 0.15101624, + "bottom_right_y": 0.15101624, + "bottom_left_x": 0.15101624, + "bottom_left_y": 0.15101624 + } + ] + }, + { + "name": "alpha", + "type": "int", + "data_points": [ + 0, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 255, + 249, + 226, + 192, + 153, + 112, + 72, + 34, + 0, + 0, + 0 + ] + } + ] +}
\ No newline at end of file diff --git a/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching.json b/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching.json index 608e633d060b..aa8044515ea2 100644 --- a/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching.json +++ b/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching.json @@ -1,25 +1,30 @@ { "frame_ids": [ - "before", 0, - 26, - 52, - 78, - 105, - 131, - 157, - 184, - 210, - 236, - 263, - 289, - 315, - 342, - 368, - 394, - 421, - 447, - 473, + 20, + 40, + 60, + 80, + 100, + 120, + 140, + 160, + 180, + 200, + 220, + 240, + 260, + 280, + 300, + 320, + 340, + 360, + 380, + 400, + 420, + 440, + 460, + 480, 500 ], "features": [ @@ -28,70 +33,82 @@ "type": "rect", "data_points": [ { - "left": 0, - "top": 0, - "right": 0, - "bottom": 0 - }, - { "left": 100, "top": 300, "right": 200, "bottom": 400 }, { - "left": 98, - "top": 293, - "right": 203, - "bottom": 407 + "left": 99, + "top": 296, + "right": 202, + "bottom": 404 + }, + { + "left": 95, + "top": 283, + "right": 207, + "bottom": 417 + }, + { + "left": 86, + "top": 256, + "right": 219, + "bottom": 443 }, { - "left": 91, - "top": 269, - "right": 213, - "bottom": 430 + "left": 68, + "top": 198, + "right": 243, + "bottom": 499 }, { - "left": 71, - "top": 206, - "right": 240, - "bottom": 491 + "left": 39, + "top": 110, + "right": 278, + "bottom": 584 }, { - "left": 34, - "top": 98, - "right": 283, - "bottom": 595 + "left": 26, + "top": 74, + "right": 292, + "bottom": 618 }, { - "left": 22, - "top": 63, - "right": 296, - "bottom": 629 + "left": 19, + "top": 55, + "right": 299, + "bottom": 637 }, { "left": 15, - "top": 44, - "right": 303, - "bottom": 648 + "top": 42, + "right": 304, + "bottom": 649 }, { - "left": 11, - "top": 32, - "right": 308, - "bottom": 659 + "left": 12, + "top": 33, + "right": 307, + "bottom": 658 }, { - "left": 8, - "top": 23, - "right": 311, - "bottom": 667 + "left": 9, + "top": 27, + "right": 310, + "bottom": 664 + }, + { + "left": 7, + "top": 21, + "right": 312, + "bottom": 669 }, { "left": 6, - "top": 18, - "right": 313, - "bottom": 673 + "top": 17, + "right": 314, + "bottom": 674 }, { "left": 5, @@ -100,16 +117,22 @@ "bottom": 677 }, { - "left": 3, - "top": 9, + "left": 4, + "top": 10, "right": 316, - "bottom": 681 + "bottom": 680 }, { - "left": 2, - "top": 7, + "left": 3, + "top": 8, "right": 317, - "bottom": 683 + "bottom": 682 + }, + { + "left": 2, + "top": 6, + "right": 318, + "bottom": 684 }, { "left": 2, @@ -119,7 +142,7 @@ }, { "left": 1, - "top": 3, + "top": 4, "right": 319, "bottom": 687 }, @@ -130,6 +153,18 @@ "bottom": 688 }, { + "left": 1, + "top": 2, + "right": 319, + "bottom": 688 + }, + { + "left": 0, + "top": 1, + "right": 320, + "bottom": 689 + }, + { "left": 0, "top": 1, "right": 320, @@ -159,7 +194,6 @@ "name": "corner_radii", "type": "cornerRadii", "data_points": [ - null, { "top_left_x": 10, "top_left_y": 10, @@ -171,184 +205,244 @@ "bottom_left_y": 20 }, { - "top_left_x": 9.762664, - "top_left_y": 9.762664, - "top_right_x": 9.762664, - "top_right_y": 9.762664, - "bottom_right_x": 19.525328, - "bottom_right_y": 19.525328, - "bottom_left_x": 19.525328, - "bottom_left_y": 19.525328 - }, - { - "top_left_x": 8.969244, - "top_left_y": 8.969244, - "top_right_x": 8.969244, - "top_right_y": 8.969244, - "bottom_right_x": 17.938488, - "bottom_right_y": 17.938488, - "bottom_left_x": 17.938488, - "bottom_left_y": 17.938488 - }, - { - "top_left_x": 6.8709626, - "top_left_y": 6.8709626, - "top_right_x": 6.8709626, - "top_right_y": 6.8709626, - "bottom_right_x": 13.741925, - "bottom_right_y": 13.741925, - "bottom_left_x": 13.741925, - "bottom_left_y": 13.741925 - }, - { - "top_left_x": 3.260561, - "top_left_y": 3.260561, - "top_right_x": 3.260561, - "top_right_y": 3.260561, - "bottom_right_x": 6.521122, - "bottom_right_y": 6.521122, - "bottom_left_x": 6.521122, - "bottom_left_y": 6.521122 - }, - { - "top_left_x": 2.0915751, - "top_left_y": 2.0915751, - "top_right_x": 2.0915751, - "top_right_y": 2.0915751, - "bottom_right_x": 4.1831503, - "bottom_right_y": 4.1831503, - "bottom_left_x": 4.1831503, - "bottom_left_y": 4.1831503 - }, - { - "top_left_x": 1.4640827, - "top_left_y": 1.4640827, - "top_right_x": 1.4640827, - "top_right_y": 1.4640827, - "bottom_right_x": 2.9281654, - "bottom_right_y": 2.9281654, - "bottom_left_x": 2.9281654, - "bottom_left_y": 2.9281654 - }, - { - "top_left_x": 1.057313, - "top_left_y": 1.057313, - "top_right_x": 1.057313, - "top_right_y": 1.057313, - "bottom_right_x": 2.114626, - "bottom_right_y": 2.114626, - "bottom_left_x": 2.114626, - "bottom_left_y": 2.114626 - }, - { - "top_left_x": 0.7824335, - "top_left_y": 0.7824335, - "top_right_x": 0.7824335, - "top_right_y": 0.7824335, - "bottom_right_x": 1.564867, - "bottom_right_y": 1.564867, - "bottom_left_x": 1.564867, - "bottom_left_y": 1.564867 - }, - { - "top_left_x": 0.5863056, - "top_left_y": 0.5863056, - "top_right_x": 0.5863056, - "top_right_y": 0.5863056, - "bottom_right_x": 1.1726112, - "bottom_right_y": 1.1726112, - "bottom_left_x": 1.1726112, - "bottom_left_y": 1.1726112 - }, - { - "top_left_x": 0.4332962, - "top_left_y": 0.4332962, - "top_right_x": 0.4332962, - "top_right_y": 0.4332962, - "bottom_right_x": 0.8665924, - "bottom_right_y": 0.8665924, - "bottom_left_x": 0.8665924, - "bottom_left_y": 0.8665924 - }, - { - "top_left_x": 0.3145876, - "top_left_y": 0.3145876, - "top_right_x": 0.3145876, - "top_right_y": 0.3145876, - "bottom_right_x": 0.6291752, - "bottom_right_y": 0.6291752, - "bottom_left_x": 0.6291752, - "bottom_left_y": 0.6291752 - }, - { - "top_left_x": 0.22506618, - "top_left_y": 0.22506618, - "top_right_x": 0.22506618, - "top_right_y": 0.22506618, - "bottom_right_x": 0.45013237, - "bottom_right_y": 0.45013237, - "bottom_left_x": 0.45013237, - "bottom_left_y": 0.45013237 - }, - { - "top_left_x": 0.15591621, - "top_left_y": 0.15591621, - "top_right_x": 0.15591621, - "top_right_y": 0.15591621, - "bottom_right_x": 0.31183243, - "bottom_right_y": 0.31183243, - "bottom_left_x": 0.31183243, - "bottom_left_y": 0.31183243 - }, - { - "top_left_x": 0.100948334, - "top_left_y": 0.100948334, - "top_right_x": 0.100948334, - "top_right_y": 0.100948334, - "bottom_right_x": 0.20189667, - "bottom_right_y": 0.20189667, - "bottom_left_x": 0.20189667, - "bottom_left_y": 0.20189667 - }, - { - "top_left_x": 0.06496239, - "top_left_y": 0.06496239, - "top_right_x": 0.06496239, - "top_right_y": 0.06496239, - "bottom_right_x": 0.12992477, - "bottom_right_y": 0.12992477, - "bottom_left_x": 0.12992477, - "bottom_left_y": 0.12992477 - }, - { - "top_left_x": 0.03526497, - "top_left_y": 0.03526497, - "top_right_x": 0.03526497, - "top_right_y": 0.03526497, - "bottom_right_x": 0.07052994, - "bottom_right_y": 0.07052994, - "bottom_left_x": 0.07052994, - "bottom_left_y": 0.07052994 - }, - { - "top_left_x": 0.014661789, - "top_left_y": 0.014661789, - "top_right_x": 0.014661789, - "top_right_y": 0.014661789, - "bottom_right_x": 0.029323578, - "bottom_right_y": 0.029323578, - "bottom_left_x": 0.029323578, - "bottom_left_y": 0.029323578 - }, - { - "top_left_x": 0.0041856766, - "top_left_y": 0.0041856766, - "top_right_x": 0.0041856766, - "top_right_y": 0.0041856766, - "bottom_right_x": 0.008371353, - "bottom_right_y": 0.008371353, - "bottom_left_x": 0.008371353, - "bottom_left_y": 0.008371353 + "top_left_x": 9.865689, + "top_left_y": 9.865689, + "top_right_x": 9.865689, + "top_right_y": 9.865689, + "bottom_right_x": 19.731379, + "bottom_right_y": 19.731379, + "bottom_left_x": 19.731379, + "bottom_left_y": 19.731379 + }, + { + "top_left_x": 9.419104, + "top_left_y": 9.419104, + "top_right_x": 9.419104, + "top_right_y": 9.419104, + "bottom_right_x": 18.838207, + "bottom_right_y": 18.838207, + "bottom_left_x": 18.838207, + "bottom_left_y": 18.838207 + }, + { + "top_left_x": 8.533693, + "top_left_y": 8.533693, + "top_right_x": 8.533693, + "top_right_y": 8.533693, + "bottom_right_x": 17.067387, + "bottom_right_y": 17.067387, + "bottom_left_x": 17.067387, + "bottom_left_y": 17.067387 + }, + { + "top_left_x": 6.5919456, + "top_left_y": 6.5919456, + "top_right_x": 6.5919456, + "top_right_y": 6.5919456, + "bottom_right_x": 13.183891, + "bottom_right_y": 13.183891, + "bottom_left_x": 13.183891, + "bottom_left_y": 13.183891 + }, + { + "top_left_x": 3.6674318, + "top_left_y": 3.6674318, + "top_right_x": 3.6674318, + "top_right_y": 3.6674318, + "bottom_right_x": 7.3348637, + "bottom_right_y": 7.3348637, + "bottom_left_x": 7.3348637, + "bottom_left_y": 7.3348637 + }, + { + "top_left_x": 2.4832253, + "top_left_y": 2.4832253, + "top_right_x": 2.4832253, + "top_right_y": 2.4832253, + "bottom_right_x": 4.9664507, + "bottom_right_y": 4.9664507, + "bottom_left_x": 4.9664507, + "bottom_left_y": 4.9664507 + }, + { + "top_left_x": 1.8252907, + "top_left_y": 1.8252907, + "top_right_x": 1.8252907, + "top_right_y": 1.8252907, + "bottom_right_x": 3.6505814, + "bottom_right_y": 3.6505814, + "bottom_left_x": 3.6505814, + "bottom_left_y": 3.6505814 + }, + { + "top_left_x": 1.4077549, + "top_left_y": 1.4077549, + "top_right_x": 1.4077549, + "top_right_y": 1.4077549, + "bottom_right_x": 2.8155098, + "bottom_right_y": 2.8155098, + "bottom_left_x": 2.8155098, + "bottom_left_y": 2.8155098 + }, + { + "top_left_x": 1.1067667, + "top_left_y": 1.1067667, + "top_right_x": 1.1067667, + "top_right_y": 1.1067667, + "bottom_right_x": 2.2135334, + "bottom_right_y": 2.2135334, + "bottom_left_x": 2.2135334, + "bottom_left_y": 2.2135334 + }, + { + "top_left_x": 0.88593864, + "top_left_y": 0.88593864, + "top_right_x": 0.88593864, + "top_right_y": 0.88593864, + "bottom_right_x": 1.7718773, + "bottom_right_y": 1.7718773, + "bottom_left_x": 1.7718773, + "bottom_left_y": 1.7718773 + }, + { + "top_left_x": 0.7069988, + "top_left_y": 0.7069988, + "top_right_x": 0.7069988, + "top_right_y": 0.7069988, + "bottom_right_x": 1.4139977, + "bottom_right_y": 1.4139977, + "bottom_left_x": 1.4139977, + "bottom_left_y": 1.4139977 + }, + { + "top_left_x": 0.55613136, + "top_left_y": 0.55613136, + "top_right_x": 0.55613136, + "top_right_y": 0.55613136, + "bottom_right_x": 1.1122627, + "bottom_right_y": 1.1122627, + "bottom_left_x": 1.1122627, + "bottom_left_y": 1.1122627 + }, + { + "top_left_x": 0.44889355, + "top_left_y": 0.44889355, + "top_right_x": 0.44889355, + "top_right_y": 0.44889355, + "bottom_right_x": 0.8977871, + "bottom_right_y": 0.8977871, + "bottom_left_x": 0.8977871, + "bottom_left_y": 0.8977871 + }, + { + "top_left_x": 0.34557533, + "top_left_y": 0.34557533, + "top_right_x": 0.34557533, + "top_right_y": 0.34557533, + "bottom_right_x": 0.69115067, + "bottom_right_y": 0.69115067, + "bottom_left_x": 0.69115067, + "bottom_left_y": 0.69115067 + }, + { + "top_left_x": 0.27671337, + "top_left_y": 0.27671337, + "top_right_x": 0.27671337, + "top_right_y": 0.27671337, + "bottom_right_x": 0.55342674, + "bottom_right_y": 0.55342674, + "bottom_left_x": 0.55342674, + "bottom_left_y": 0.55342674 + }, + { + "top_left_x": 0.20785141, + "top_left_y": 0.20785141, + "top_right_x": 0.20785141, + "top_right_y": 0.20785141, + "bottom_right_x": 0.41570282, + "bottom_right_y": 0.41570282, + "bottom_left_x": 0.41570282, + "bottom_left_y": 0.41570282 + }, + { + "top_left_x": 0.1601448, + "top_left_y": 0.1601448, + "top_right_x": 0.1601448, + "top_right_y": 0.1601448, + "bottom_right_x": 0.3202896, + "bottom_right_y": 0.3202896, + "bottom_left_x": 0.3202896, + "bottom_left_y": 0.3202896 + }, + { + "top_left_x": 0.117860794, + "top_left_y": 0.117860794, + "top_right_x": 0.117860794, + "top_right_y": 0.117860794, + "bottom_right_x": 0.23572159, + "bottom_right_y": 0.23572159, + "bottom_left_x": 0.23572159, + "bottom_left_y": 0.23572159 + }, + { + "top_left_x": 0.08036041, + "top_left_y": 0.08036041, + "top_right_x": 0.08036041, + "top_right_y": 0.08036041, + "bottom_right_x": 0.16072083, + "bottom_right_y": 0.16072083, + "bottom_left_x": 0.16072083, + "bottom_left_y": 0.16072083 + }, + { + "top_left_x": 0.05836296, + "top_left_y": 0.05836296, + "top_right_x": 0.05836296, + "top_right_y": 0.05836296, + "bottom_right_x": 0.11672592, + "bottom_right_y": 0.11672592, + "bottom_left_x": 0.11672592, + "bottom_left_y": 0.11672592 + }, + { + "top_left_x": 0.03636551, + "top_left_y": 0.03636551, + "top_right_x": 0.03636551, + "top_right_y": 0.03636551, + "bottom_right_x": 0.07273102, + "bottom_right_y": 0.07273102, + "bottom_left_x": 0.07273102, + "bottom_left_y": 0.07273102 + }, + { + "top_left_x": 0.018137932, + "top_left_y": 0.018137932, + "top_right_x": 0.018137932, + "top_right_y": 0.018137932, + "bottom_right_x": 0.036275864, + "bottom_right_y": 0.036275864, + "bottom_left_x": 0.036275864, + "bottom_left_y": 0.036275864 + }, + { + "top_left_x": 0.0082063675, + "top_left_y": 0.0082063675, + "top_right_x": 0.0082063675, + "top_right_y": 0.0082063675, + "bottom_right_x": 0.016412735, + "bottom_right_y": 0.016412735, + "bottom_left_x": 0.016412735, + "bottom_left_y": 0.016412735 + }, + { + "top_left_x": 0.0031013489, + "top_left_y": 0.0031013489, + "top_right_x": 0.0031013489, + "top_right_y": 0.0031013489, + "bottom_right_x": 0.0062026978, + "bottom_right_y": 0.0062026978, + "bottom_left_x": 0.0062026978, + "bottom_left_y": 0.0062026978 }, { "top_left_x": 0, @@ -367,19 +461,24 @@ "type": "int", "data_points": [ 0, + 96, + 153, + 192, + 220, + 238, + 249, + 254, + 233, + 191, + 153, + 117, + 85, + 57, + 33, + 14, + 3, + 0, 0, - 115, - 178, - 217, - 241, - 253, - 239, - 183, - 135, - 91, - 53, - 23, - 5, 0, 0, 0, diff --git a/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching_withSpring.json b/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching_withSpring.json new file mode 100644 index 000000000000..a840d3cb1225 --- /dev/null +++ b/packages/SystemUI/tests/goldens/backgroundAnimation_whenLaunching_withSpring.json @@ -0,0 +1,375 @@ +{ + "frame_ids": [ + 0, + 16, + 32, + 48, + 64, + 80, + 96, + 112, + 128, + 144, + 160, + 176, + 192, + 208, + 224, + 240, + 256, + 272, + 288, + 304 + ], + "features": [ + { + "name": "bounds", + "type": "rect", + "data_points": [ + { + "left": 0, + "top": 0, + "right": 0, + "bottom": 0 + }, + { + "left": 94, + "top": 284, + "right": 206, + "bottom": 414 + }, + { + "left": 83, + "top": 251, + "right": 219, + "bottom": 447 + }, + { + "left": 70, + "top": 212, + "right": 234, + "bottom": 485 + }, + { + "left": 57, + "top": 173, + "right": 250, + "bottom": 522 + }, + { + "left": 46, + "top": 139, + "right": 264, + "bottom": 555 + }, + { + "left": 36, + "top": 109, + "right": 276, + "bottom": 584 + }, + { + "left": 28, + "top": 84, + "right": 285, + "bottom": 608 + }, + { + "left": 21, + "top": 65, + "right": 293, + "bottom": 627 + }, + { + "left": 16, + "top": 49, + "right": 300, + "bottom": 642 + }, + { + "left": 12, + "top": 36, + "right": 305, + "bottom": 653 + }, + { + "left": 9, + "top": 27, + "right": 308, + "bottom": 662 + }, + { + "left": 7, + "top": 20, + "right": 312, + "bottom": 669 + }, + { + "left": 5, + "top": 14, + "right": 314, + "bottom": 675 + }, + { + "left": 4, + "top": 11, + "right": 315, + "bottom": 678 + }, + { + "left": 3, + "top": 8, + "right": 316, + "bottom": 681 + }, + { + "left": 2, + "top": 5, + "right": 317, + "bottom": 684 + }, + { + "left": 1, + "top": 4, + "right": 318, + "bottom": 685 + }, + { + "left": 1, + "top": 3, + "right": 318, + "bottom": 686 + }, + { + "left": 0, + "top": 2, + "right": 319, + "bottom": 687 + } + ] + }, + { + "name": "corner_radii", + "type": "cornerRadii", + "data_points": [ + null, + { + "top_left_x": 9.492916, + "top_left_y": 9.492916, + "top_right_x": 9.492916, + "top_right_y": 9.492916, + "bottom_right_x": 18.985832, + "bottom_right_y": 18.985832, + "bottom_left_x": 18.985832, + "bottom_left_y": 18.985832 + }, + { + "top_left_x": 8.381761, + "top_left_y": 8.381761, + "top_right_x": 8.381761, + "top_right_y": 8.381761, + "bottom_right_x": 16.763521, + "bottom_right_y": 16.763521, + "bottom_left_x": 16.763521, + "bottom_left_y": 16.763521 + }, + { + "top_left_x": 7.07397, + "top_left_y": 7.07397, + "top_right_x": 7.07397, + "top_right_y": 7.07397, + "bottom_right_x": 14.14794, + "bottom_right_y": 14.14794, + "bottom_left_x": 14.14794, + "bottom_left_y": 14.14794 + }, + { + "top_left_x": 5.7880254, + "top_left_y": 5.7880254, + "top_right_x": 5.7880254, + "top_right_y": 5.7880254, + "bottom_right_x": 11.576051, + "bottom_right_y": 11.576051, + "bottom_left_x": 11.576051, + "bottom_left_y": 11.576051 + }, + { + "top_left_x": 4.6295347, + "top_left_y": 4.6295347, + "top_right_x": 4.6295347, + "top_right_y": 4.6295347, + "bottom_right_x": 9.259069, + "bottom_right_y": 9.259069, + "bottom_left_x": 9.259069, + "bottom_left_y": 9.259069 + }, + { + "top_left_x": 3.638935, + "top_left_y": 3.638935, + "top_right_x": 3.638935, + "top_right_y": 3.638935, + "bottom_right_x": 7.27787, + "bottom_right_y": 7.27787, + "bottom_left_x": 7.27787, + "bottom_left_y": 7.27787 + }, + { + "top_left_x": 2.8209057, + "top_left_y": 2.8209057, + "top_right_x": 2.8209057, + "top_right_y": 2.8209057, + "bottom_right_x": 5.6418114, + "bottom_right_y": 5.6418114, + "bottom_left_x": 5.6418114, + "bottom_left_y": 5.6418114 + }, + { + "top_left_x": 2.1620893, + "top_left_y": 2.1620893, + "top_right_x": 2.1620893, + "top_right_y": 2.1620893, + "bottom_right_x": 4.3241787, + "bottom_right_y": 4.3241787, + "bottom_left_x": 4.3241787, + "bottom_left_y": 4.3241787 + }, + { + "top_left_x": 1.6414614, + "top_left_y": 1.6414614, + "top_right_x": 1.6414614, + "top_right_y": 1.6414614, + "bottom_right_x": 3.2829227, + "bottom_right_y": 3.2829227, + "bottom_left_x": 3.2829227, + "bottom_left_y": 3.2829227 + }, + { + "top_left_x": 1.2361269, + "top_left_y": 1.2361269, + "top_right_x": 1.2361269, + "top_right_y": 1.2361269, + "bottom_right_x": 2.4722538, + "bottom_right_y": 2.4722538, + "bottom_left_x": 2.4722538, + "bottom_left_y": 2.4722538 + }, + { + "top_left_x": 0.92435074, + "top_left_y": 0.92435074, + "top_right_x": 0.92435074, + "top_right_y": 0.92435074, + "bottom_right_x": 1.8487015, + "bottom_right_y": 1.8487015, + "bottom_left_x": 1.8487015, + "bottom_left_y": 1.8487015 + }, + { + "top_left_x": 0.68693924, + "top_left_y": 0.68693924, + "top_right_x": 0.68693924, + "top_right_y": 0.68693924, + "bottom_right_x": 1.3738785, + "bottom_right_y": 1.3738785, + "bottom_left_x": 1.3738785, + "bottom_left_y": 1.3738785 + }, + { + "top_left_x": 0.5076904, + "top_left_y": 0.5076904, + "top_right_x": 0.5076904, + "top_right_y": 0.5076904, + "bottom_right_x": 1.0153809, + "bottom_right_y": 1.0153809, + "bottom_left_x": 1.0153809, + "bottom_left_y": 1.0153809 + }, + { + "top_left_x": 0.3733511, + "top_left_y": 0.3733511, + "top_right_x": 0.3733511, + "top_right_y": 0.3733511, + "bottom_right_x": 0.7467022, + "bottom_right_y": 0.7467022, + "bottom_left_x": 0.7467022, + "bottom_left_y": 0.7467022 + }, + { + "top_left_x": 0.27331638, + "top_left_y": 0.27331638, + "top_right_x": 0.27331638, + "top_right_y": 0.27331638, + "bottom_right_x": 0.54663277, + "bottom_right_y": 0.54663277, + "bottom_left_x": 0.54663277, + "bottom_left_y": 0.54663277 + }, + { + "top_left_x": 0.19925308, + "top_left_y": 0.19925308, + "top_right_x": 0.19925308, + "top_right_y": 0.19925308, + "bottom_right_x": 0.39850616, + "bottom_right_y": 0.39850616, + "bottom_left_x": 0.39850616, + "bottom_left_y": 0.39850616 + }, + { + "top_left_x": 0.14470005, + "top_left_y": 0.14470005, + "top_right_x": 0.14470005, + "top_right_y": 0.14470005, + "bottom_right_x": 0.2894001, + "bottom_right_y": 0.2894001, + "bottom_left_x": 0.2894001, + "bottom_left_y": 0.2894001 + }, + { + "top_left_x": 0.10470486, + "top_left_y": 0.10470486, + "top_right_x": 0.10470486, + "top_right_y": 0.10470486, + "bottom_right_x": 0.20940971, + "bottom_right_y": 0.20940971, + "bottom_left_x": 0.20940971, + "bottom_left_y": 0.20940971 + }, + { + "top_left_x": 0.07550812, + "top_left_y": 0.07550812, + "top_right_x": 0.07550812, + "top_right_y": 0.07550812, + "bottom_right_x": 0.15101624, + "bottom_right_y": 0.15101624, + "bottom_left_x": 0.15101624, + "bottom_left_y": 0.15101624 + } + ] + }, + { + "name": "alpha", + "type": "int", + "data_points": [ + 0, + 45, + 126, + 190, + 228, + 246, + 253, + 255, + 255, + 255, + 249, + 226, + 192, + 153, + 112, + 72, + 34, + 0, + 0, + 0 + ] + } + ] +}
\ No newline at end of file diff --git a/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning.json b/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning.json index 608e633d060b..aa8044515ea2 100644 --- a/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning.json +++ b/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning.json @@ -1,25 +1,30 @@ { "frame_ids": [ - "before", 0, - 26, - 52, - 78, - 105, - 131, - 157, - 184, - 210, - 236, - 263, - 289, - 315, - 342, - 368, - 394, - 421, - 447, - 473, + 20, + 40, + 60, + 80, + 100, + 120, + 140, + 160, + 180, + 200, + 220, + 240, + 260, + 280, + 300, + 320, + 340, + 360, + 380, + 400, + 420, + 440, + 460, + 480, 500 ], "features": [ @@ -28,70 +33,82 @@ "type": "rect", "data_points": [ { - "left": 0, - "top": 0, - "right": 0, - "bottom": 0 - }, - { "left": 100, "top": 300, "right": 200, "bottom": 400 }, { - "left": 98, - "top": 293, - "right": 203, - "bottom": 407 + "left": 99, + "top": 296, + "right": 202, + "bottom": 404 + }, + { + "left": 95, + "top": 283, + "right": 207, + "bottom": 417 + }, + { + "left": 86, + "top": 256, + "right": 219, + "bottom": 443 }, { - "left": 91, - "top": 269, - "right": 213, - "bottom": 430 + "left": 68, + "top": 198, + "right": 243, + "bottom": 499 }, { - "left": 71, - "top": 206, - "right": 240, - "bottom": 491 + "left": 39, + "top": 110, + "right": 278, + "bottom": 584 }, { - "left": 34, - "top": 98, - "right": 283, - "bottom": 595 + "left": 26, + "top": 74, + "right": 292, + "bottom": 618 }, { - "left": 22, - "top": 63, - "right": 296, - "bottom": 629 + "left": 19, + "top": 55, + "right": 299, + "bottom": 637 }, { "left": 15, - "top": 44, - "right": 303, - "bottom": 648 + "top": 42, + "right": 304, + "bottom": 649 }, { - "left": 11, - "top": 32, - "right": 308, - "bottom": 659 + "left": 12, + "top": 33, + "right": 307, + "bottom": 658 }, { - "left": 8, - "top": 23, - "right": 311, - "bottom": 667 + "left": 9, + "top": 27, + "right": 310, + "bottom": 664 + }, + { + "left": 7, + "top": 21, + "right": 312, + "bottom": 669 }, { "left": 6, - "top": 18, - "right": 313, - "bottom": 673 + "top": 17, + "right": 314, + "bottom": 674 }, { "left": 5, @@ -100,16 +117,22 @@ "bottom": 677 }, { - "left": 3, - "top": 9, + "left": 4, + "top": 10, "right": 316, - "bottom": 681 + "bottom": 680 }, { - "left": 2, - "top": 7, + "left": 3, + "top": 8, "right": 317, - "bottom": 683 + "bottom": 682 + }, + { + "left": 2, + "top": 6, + "right": 318, + "bottom": 684 }, { "left": 2, @@ -119,7 +142,7 @@ }, { "left": 1, - "top": 3, + "top": 4, "right": 319, "bottom": 687 }, @@ -130,6 +153,18 @@ "bottom": 688 }, { + "left": 1, + "top": 2, + "right": 319, + "bottom": 688 + }, + { + "left": 0, + "top": 1, + "right": 320, + "bottom": 689 + }, + { "left": 0, "top": 1, "right": 320, @@ -159,7 +194,6 @@ "name": "corner_radii", "type": "cornerRadii", "data_points": [ - null, { "top_left_x": 10, "top_left_y": 10, @@ -171,184 +205,244 @@ "bottom_left_y": 20 }, { - "top_left_x": 9.762664, - "top_left_y": 9.762664, - "top_right_x": 9.762664, - "top_right_y": 9.762664, - "bottom_right_x": 19.525328, - "bottom_right_y": 19.525328, - "bottom_left_x": 19.525328, - "bottom_left_y": 19.525328 - }, - { - "top_left_x": 8.969244, - "top_left_y": 8.969244, - "top_right_x": 8.969244, - "top_right_y": 8.969244, - "bottom_right_x": 17.938488, - "bottom_right_y": 17.938488, - "bottom_left_x": 17.938488, - "bottom_left_y": 17.938488 - }, - { - "top_left_x": 6.8709626, - "top_left_y": 6.8709626, - "top_right_x": 6.8709626, - "top_right_y": 6.8709626, - "bottom_right_x": 13.741925, - "bottom_right_y": 13.741925, - "bottom_left_x": 13.741925, - "bottom_left_y": 13.741925 - }, - { - "top_left_x": 3.260561, - "top_left_y": 3.260561, - "top_right_x": 3.260561, - "top_right_y": 3.260561, - "bottom_right_x": 6.521122, - "bottom_right_y": 6.521122, - "bottom_left_x": 6.521122, - "bottom_left_y": 6.521122 - }, - { - "top_left_x": 2.0915751, - "top_left_y": 2.0915751, - "top_right_x": 2.0915751, - "top_right_y": 2.0915751, - "bottom_right_x": 4.1831503, - "bottom_right_y": 4.1831503, - "bottom_left_x": 4.1831503, - "bottom_left_y": 4.1831503 - }, - { - "top_left_x": 1.4640827, - "top_left_y": 1.4640827, - "top_right_x": 1.4640827, - "top_right_y": 1.4640827, - "bottom_right_x": 2.9281654, - "bottom_right_y": 2.9281654, - "bottom_left_x": 2.9281654, - "bottom_left_y": 2.9281654 - }, - { - "top_left_x": 1.057313, - "top_left_y": 1.057313, - "top_right_x": 1.057313, - "top_right_y": 1.057313, - "bottom_right_x": 2.114626, - "bottom_right_y": 2.114626, - "bottom_left_x": 2.114626, - "bottom_left_y": 2.114626 - }, - { - "top_left_x": 0.7824335, - "top_left_y": 0.7824335, - "top_right_x": 0.7824335, - "top_right_y": 0.7824335, - "bottom_right_x": 1.564867, - "bottom_right_y": 1.564867, - "bottom_left_x": 1.564867, - "bottom_left_y": 1.564867 - }, - { - "top_left_x": 0.5863056, - "top_left_y": 0.5863056, - "top_right_x": 0.5863056, - "top_right_y": 0.5863056, - "bottom_right_x": 1.1726112, - "bottom_right_y": 1.1726112, - "bottom_left_x": 1.1726112, - "bottom_left_y": 1.1726112 - }, - { - "top_left_x": 0.4332962, - "top_left_y": 0.4332962, - "top_right_x": 0.4332962, - "top_right_y": 0.4332962, - "bottom_right_x": 0.8665924, - "bottom_right_y": 0.8665924, - "bottom_left_x": 0.8665924, - "bottom_left_y": 0.8665924 - }, - { - "top_left_x": 0.3145876, - "top_left_y": 0.3145876, - "top_right_x": 0.3145876, - "top_right_y": 0.3145876, - "bottom_right_x": 0.6291752, - "bottom_right_y": 0.6291752, - "bottom_left_x": 0.6291752, - "bottom_left_y": 0.6291752 - }, - { - "top_left_x": 0.22506618, - "top_left_y": 0.22506618, - "top_right_x": 0.22506618, - "top_right_y": 0.22506618, - "bottom_right_x": 0.45013237, - "bottom_right_y": 0.45013237, - "bottom_left_x": 0.45013237, - "bottom_left_y": 0.45013237 - }, - { - "top_left_x": 0.15591621, - "top_left_y": 0.15591621, - "top_right_x": 0.15591621, - "top_right_y": 0.15591621, - "bottom_right_x": 0.31183243, - "bottom_right_y": 0.31183243, - "bottom_left_x": 0.31183243, - "bottom_left_y": 0.31183243 - }, - { - "top_left_x": 0.100948334, - "top_left_y": 0.100948334, - "top_right_x": 0.100948334, - "top_right_y": 0.100948334, - "bottom_right_x": 0.20189667, - "bottom_right_y": 0.20189667, - "bottom_left_x": 0.20189667, - "bottom_left_y": 0.20189667 - }, - { - "top_left_x": 0.06496239, - "top_left_y": 0.06496239, - "top_right_x": 0.06496239, - "top_right_y": 0.06496239, - "bottom_right_x": 0.12992477, - "bottom_right_y": 0.12992477, - "bottom_left_x": 0.12992477, - "bottom_left_y": 0.12992477 - }, - { - "top_left_x": 0.03526497, - "top_left_y": 0.03526497, - "top_right_x": 0.03526497, - "top_right_y": 0.03526497, - "bottom_right_x": 0.07052994, - "bottom_right_y": 0.07052994, - "bottom_left_x": 0.07052994, - "bottom_left_y": 0.07052994 - }, - { - "top_left_x": 0.014661789, - "top_left_y": 0.014661789, - "top_right_x": 0.014661789, - "top_right_y": 0.014661789, - "bottom_right_x": 0.029323578, - "bottom_right_y": 0.029323578, - "bottom_left_x": 0.029323578, - "bottom_left_y": 0.029323578 - }, - { - "top_left_x": 0.0041856766, - "top_left_y": 0.0041856766, - "top_right_x": 0.0041856766, - "top_right_y": 0.0041856766, - "bottom_right_x": 0.008371353, - "bottom_right_y": 0.008371353, - "bottom_left_x": 0.008371353, - "bottom_left_y": 0.008371353 + "top_left_x": 9.865689, + "top_left_y": 9.865689, + "top_right_x": 9.865689, + "top_right_y": 9.865689, + "bottom_right_x": 19.731379, + "bottom_right_y": 19.731379, + "bottom_left_x": 19.731379, + "bottom_left_y": 19.731379 + }, + { + "top_left_x": 9.419104, + "top_left_y": 9.419104, + "top_right_x": 9.419104, + "top_right_y": 9.419104, + "bottom_right_x": 18.838207, + "bottom_right_y": 18.838207, + "bottom_left_x": 18.838207, + "bottom_left_y": 18.838207 + }, + { + "top_left_x": 8.533693, + "top_left_y": 8.533693, + "top_right_x": 8.533693, + "top_right_y": 8.533693, + "bottom_right_x": 17.067387, + "bottom_right_y": 17.067387, + "bottom_left_x": 17.067387, + "bottom_left_y": 17.067387 + }, + { + "top_left_x": 6.5919456, + "top_left_y": 6.5919456, + "top_right_x": 6.5919456, + "top_right_y": 6.5919456, + "bottom_right_x": 13.183891, + "bottom_right_y": 13.183891, + "bottom_left_x": 13.183891, + "bottom_left_y": 13.183891 + }, + { + "top_left_x": 3.6674318, + "top_left_y": 3.6674318, + "top_right_x": 3.6674318, + "top_right_y": 3.6674318, + "bottom_right_x": 7.3348637, + "bottom_right_y": 7.3348637, + "bottom_left_x": 7.3348637, + "bottom_left_y": 7.3348637 + }, + { + "top_left_x": 2.4832253, + "top_left_y": 2.4832253, + "top_right_x": 2.4832253, + "top_right_y": 2.4832253, + "bottom_right_x": 4.9664507, + "bottom_right_y": 4.9664507, + "bottom_left_x": 4.9664507, + "bottom_left_y": 4.9664507 + }, + { + "top_left_x": 1.8252907, + "top_left_y": 1.8252907, + "top_right_x": 1.8252907, + "top_right_y": 1.8252907, + "bottom_right_x": 3.6505814, + "bottom_right_y": 3.6505814, + "bottom_left_x": 3.6505814, + "bottom_left_y": 3.6505814 + }, + { + "top_left_x": 1.4077549, + "top_left_y": 1.4077549, + "top_right_x": 1.4077549, + "top_right_y": 1.4077549, + "bottom_right_x": 2.8155098, + "bottom_right_y": 2.8155098, + "bottom_left_x": 2.8155098, + "bottom_left_y": 2.8155098 + }, + { + "top_left_x": 1.1067667, + "top_left_y": 1.1067667, + "top_right_x": 1.1067667, + "top_right_y": 1.1067667, + "bottom_right_x": 2.2135334, + "bottom_right_y": 2.2135334, + "bottom_left_x": 2.2135334, + "bottom_left_y": 2.2135334 + }, + { + "top_left_x": 0.88593864, + "top_left_y": 0.88593864, + "top_right_x": 0.88593864, + "top_right_y": 0.88593864, + "bottom_right_x": 1.7718773, + "bottom_right_y": 1.7718773, + "bottom_left_x": 1.7718773, + "bottom_left_y": 1.7718773 + }, + { + "top_left_x": 0.7069988, + "top_left_y": 0.7069988, + "top_right_x": 0.7069988, + "top_right_y": 0.7069988, + "bottom_right_x": 1.4139977, + "bottom_right_y": 1.4139977, + "bottom_left_x": 1.4139977, + "bottom_left_y": 1.4139977 + }, + { + "top_left_x": 0.55613136, + "top_left_y": 0.55613136, + "top_right_x": 0.55613136, + "top_right_y": 0.55613136, + "bottom_right_x": 1.1122627, + "bottom_right_y": 1.1122627, + "bottom_left_x": 1.1122627, + "bottom_left_y": 1.1122627 + }, + { + "top_left_x": 0.44889355, + "top_left_y": 0.44889355, + "top_right_x": 0.44889355, + "top_right_y": 0.44889355, + "bottom_right_x": 0.8977871, + "bottom_right_y": 0.8977871, + "bottom_left_x": 0.8977871, + "bottom_left_y": 0.8977871 + }, + { + "top_left_x": 0.34557533, + "top_left_y": 0.34557533, + "top_right_x": 0.34557533, + "top_right_y": 0.34557533, + "bottom_right_x": 0.69115067, + "bottom_right_y": 0.69115067, + "bottom_left_x": 0.69115067, + "bottom_left_y": 0.69115067 + }, + { + "top_left_x": 0.27671337, + "top_left_y": 0.27671337, + "top_right_x": 0.27671337, + "top_right_y": 0.27671337, + "bottom_right_x": 0.55342674, + "bottom_right_y": 0.55342674, + "bottom_left_x": 0.55342674, + "bottom_left_y": 0.55342674 + }, + { + "top_left_x": 0.20785141, + "top_left_y": 0.20785141, + "top_right_x": 0.20785141, + "top_right_y": 0.20785141, + "bottom_right_x": 0.41570282, + "bottom_right_y": 0.41570282, + "bottom_left_x": 0.41570282, + "bottom_left_y": 0.41570282 + }, + { + "top_left_x": 0.1601448, + "top_left_y": 0.1601448, + "top_right_x": 0.1601448, + "top_right_y": 0.1601448, + "bottom_right_x": 0.3202896, + "bottom_right_y": 0.3202896, + "bottom_left_x": 0.3202896, + "bottom_left_y": 0.3202896 + }, + { + "top_left_x": 0.117860794, + "top_left_y": 0.117860794, + "top_right_x": 0.117860794, + "top_right_y": 0.117860794, + "bottom_right_x": 0.23572159, + "bottom_right_y": 0.23572159, + "bottom_left_x": 0.23572159, + "bottom_left_y": 0.23572159 + }, + { + "top_left_x": 0.08036041, + "top_left_y": 0.08036041, + "top_right_x": 0.08036041, + "top_right_y": 0.08036041, + "bottom_right_x": 0.16072083, + "bottom_right_y": 0.16072083, + "bottom_left_x": 0.16072083, + "bottom_left_y": 0.16072083 + }, + { + "top_left_x": 0.05836296, + "top_left_y": 0.05836296, + "top_right_x": 0.05836296, + "top_right_y": 0.05836296, + "bottom_right_x": 0.11672592, + "bottom_right_y": 0.11672592, + "bottom_left_x": 0.11672592, + "bottom_left_y": 0.11672592 + }, + { + "top_left_x": 0.03636551, + "top_left_y": 0.03636551, + "top_right_x": 0.03636551, + "top_right_y": 0.03636551, + "bottom_right_x": 0.07273102, + "bottom_right_y": 0.07273102, + "bottom_left_x": 0.07273102, + "bottom_left_y": 0.07273102 + }, + { + "top_left_x": 0.018137932, + "top_left_y": 0.018137932, + "top_right_x": 0.018137932, + "top_right_y": 0.018137932, + "bottom_right_x": 0.036275864, + "bottom_right_y": 0.036275864, + "bottom_left_x": 0.036275864, + "bottom_left_y": 0.036275864 + }, + { + "top_left_x": 0.0082063675, + "top_left_y": 0.0082063675, + "top_right_x": 0.0082063675, + "top_right_y": 0.0082063675, + "bottom_right_x": 0.016412735, + "bottom_right_y": 0.016412735, + "bottom_left_x": 0.016412735, + "bottom_left_y": 0.016412735 + }, + { + "top_left_x": 0.0031013489, + "top_left_y": 0.0031013489, + "top_right_x": 0.0031013489, + "top_right_y": 0.0031013489, + "bottom_right_x": 0.0062026978, + "bottom_right_y": 0.0062026978, + "bottom_left_x": 0.0062026978, + "bottom_left_y": 0.0062026978 }, { "top_left_x": 0, @@ -367,19 +461,24 @@ "type": "int", "data_points": [ 0, + 96, + 153, + 192, + 220, + 238, + 249, + 254, + 233, + 191, + 153, + 117, + 85, + 57, + 33, + 14, + 3, + 0, 0, - 115, - 178, - 217, - 241, - 253, - 239, - 183, - 135, - 91, - 53, - 23, - 5, 0, 0, 0, diff --git a/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning_withSpring.json b/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning_withSpring.json new file mode 100644 index 000000000000..a840d3cb1225 --- /dev/null +++ b/packages/SystemUI/tests/goldens/backgroundAnimation_whenReturning_withSpring.json @@ -0,0 +1,375 @@ +{ + "frame_ids": [ + 0, + 16, + 32, + 48, + 64, + 80, + 96, + 112, + 128, + 144, + 160, + 176, + 192, + 208, + 224, + 240, + 256, + 272, + 288, + 304 + ], + "features": [ + { + "name": "bounds", + "type": "rect", + "data_points": [ + { + "left": 0, + "top": 0, + "right": 0, + "bottom": 0 + }, + { + "left": 94, + "top": 284, + "right": 206, + "bottom": 414 + }, + { + "left": 83, + "top": 251, + "right": 219, + "bottom": 447 + }, + { + "left": 70, + "top": 212, + "right": 234, + "bottom": 485 + }, + { + "left": 57, + "top": 173, + "right": 250, + "bottom": 522 + }, + { + "left": 46, + "top": 139, + "right": 264, + "bottom": 555 + }, + { + "left": 36, + "top": 109, + "right": 276, + "bottom": 584 + }, + { + "left": 28, + "top": 84, + "right": 285, + "bottom": 608 + }, + { + "left": 21, + "top": 65, + "right": 293, + "bottom": 627 + }, + { + "left": 16, + "top": 49, + "right": 300, + "bottom": 642 + }, + { + "left": 12, + "top": 36, + "right": 305, + "bottom": 653 + }, + { + "left": 9, + "top": 27, + "right": 308, + "bottom": 662 + }, + { + "left": 7, + "top": 20, + "right": 312, + "bottom": 669 + }, + { + "left": 5, + "top": 14, + "right": 314, + "bottom": 675 + }, + { + "left": 4, + "top": 11, + "right": 315, + "bottom": 678 + }, + { + "left": 3, + "top": 8, + "right": 316, + "bottom": 681 + }, + { + "left": 2, + "top": 5, + "right": 317, + "bottom": 684 + }, + { + "left": 1, + "top": 4, + "right": 318, + "bottom": 685 + }, + { + "left": 1, + "top": 3, + "right": 318, + "bottom": 686 + }, + { + "left": 0, + "top": 2, + "right": 319, + "bottom": 687 + } + ] + }, + { + "name": "corner_radii", + "type": "cornerRadii", + "data_points": [ + null, + { + "top_left_x": 9.492916, + "top_left_y": 9.492916, + "top_right_x": 9.492916, + "top_right_y": 9.492916, + "bottom_right_x": 18.985832, + "bottom_right_y": 18.985832, + "bottom_left_x": 18.985832, + "bottom_left_y": 18.985832 + }, + { + "top_left_x": 8.381761, + "top_left_y": 8.381761, + "top_right_x": 8.381761, + "top_right_y": 8.381761, + "bottom_right_x": 16.763521, + "bottom_right_y": 16.763521, + "bottom_left_x": 16.763521, + "bottom_left_y": 16.763521 + }, + { + "top_left_x": 7.07397, + "top_left_y": 7.07397, + "top_right_x": 7.07397, + "top_right_y": 7.07397, + "bottom_right_x": 14.14794, + "bottom_right_y": 14.14794, + "bottom_left_x": 14.14794, + "bottom_left_y": 14.14794 + }, + { + "top_left_x": 5.7880254, + "top_left_y": 5.7880254, + "top_right_x": 5.7880254, + "top_right_y": 5.7880254, + "bottom_right_x": 11.576051, + "bottom_right_y": 11.576051, + "bottom_left_x": 11.576051, + "bottom_left_y": 11.576051 + }, + { + "top_left_x": 4.6295347, + "top_left_y": 4.6295347, + "top_right_x": 4.6295347, + "top_right_y": 4.6295347, + "bottom_right_x": 9.259069, + "bottom_right_y": 9.259069, + "bottom_left_x": 9.259069, + "bottom_left_y": 9.259069 + }, + { + "top_left_x": 3.638935, + "top_left_y": 3.638935, + "top_right_x": 3.638935, + "top_right_y": 3.638935, + "bottom_right_x": 7.27787, + "bottom_right_y": 7.27787, + "bottom_left_x": 7.27787, + "bottom_left_y": 7.27787 + }, + { + "top_left_x": 2.8209057, + "top_left_y": 2.8209057, + "top_right_x": 2.8209057, + "top_right_y": 2.8209057, + "bottom_right_x": 5.6418114, + "bottom_right_y": 5.6418114, + "bottom_left_x": 5.6418114, + "bottom_left_y": 5.6418114 + }, + { + "top_left_x": 2.1620893, + "top_left_y": 2.1620893, + "top_right_x": 2.1620893, + "top_right_y": 2.1620893, + "bottom_right_x": 4.3241787, + "bottom_right_y": 4.3241787, + "bottom_left_x": 4.3241787, + "bottom_left_y": 4.3241787 + }, + { + "top_left_x": 1.6414614, + "top_left_y": 1.6414614, + "top_right_x": 1.6414614, + "top_right_y": 1.6414614, + "bottom_right_x": 3.2829227, + "bottom_right_y": 3.2829227, + "bottom_left_x": 3.2829227, + "bottom_left_y": 3.2829227 + }, + { + "top_left_x": 1.2361269, + "top_left_y": 1.2361269, + "top_right_x": 1.2361269, + "top_right_y": 1.2361269, + "bottom_right_x": 2.4722538, + "bottom_right_y": 2.4722538, + "bottom_left_x": 2.4722538, + "bottom_left_y": 2.4722538 + }, + { + "top_left_x": 0.92435074, + "top_left_y": 0.92435074, + "top_right_x": 0.92435074, + "top_right_y": 0.92435074, + "bottom_right_x": 1.8487015, + "bottom_right_y": 1.8487015, + "bottom_left_x": 1.8487015, + "bottom_left_y": 1.8487015 + }, + { + "top_left_x": 0.68693924, + "top_left_y": 0.68693924, + "top_right_x": 0.68693924, + "top_right_y": 0.68693924, + "bottom_right_x": 1.3738785, + "bottom_right_y": 1.3738785, + "bottom_left_x": 1.3738785, + "bottom_left_y": 1.3738785 + }, + { + "top_left_x": 0.5076904, + "top_left_y": 0.5076904, + "top_right_x": 0.5076904, + "top_right_y": 0.5076904, + "bottom_right_x": 1.0153809, + "bottom_right_y": 1.0153809, + "bottom_left_x": 1.0153809, + "bottom_left_y": 1.0153809 + }, + { + "top_left_x": 0.3733511, + "top_left_y": 0.3733511, + "top_right_x": 0.3733511, + "top_right_y": 0.3733511, + "bottom_right_x": 0.7467022, + "bottom_right_y": 0.7467022, + "bottom_left_x": 0.7467022, + "bottom_left_y": 0.7467022 + }, + { + "top_left_x": 0.27331638, + "top_left_y": 0.27331638, + "top_right_x": 0.27331638, + "top_right_y": 0.27331638, + "bottom_right_x": 0.54663277, + "bottom_right_y": 0.54663277, + "bottom_left_x": 0.54663277, + "bottom_left_y": 0.54663277 + }, + { + "top_left_x": 0.19925308, + "top_left_y": 0.19925308, + "top_right_x": 0.19925308, + "top_right_y": 0.19925308, + "bottom_right_x": 0.39850616, + "bottom_right_y": 0.39850616, + "bottom_left_x": 0.39850616, + "bottom_left_y": 0.39850616 + }, + { + "top_left_x": 0.14470005, + "top_left_y": 0.14470005, + "top_right_x": 0.14470005, + "top_right_y": 0.14470005, + "bottom_right_x": 0.2894001, + "bottom_right_y": 0.2894001, + "bottom_left_x": 0.2894001, + "bottom_left_y": 0.2894001 + }, + { + "top_left_x": 0.10470486, + "top_left_y": 0.10470486, + "top_right_x": 0.10470486, + "top_right_y": 0.10470486, + "bottom_right_x": 0.20940971, + "bottom_right_y": 0.20940971, + "bottom_left_x": 0.20940971, + "bottom_left_y": 0.20940971 + }, + { + "top_left_x": 0.07550812, + "top_left_y": 0.07550812, + "top_right_x": 0.07550812, + "top_right_y": 0.07550812, + "bottom_right_x": 0.15101624, + "bottom_right_y": 0.15101624, + "bottom_left_x": 0.15101624, + "bottom_left_y": 0.15101624 + } + ] + }, + { + "name": "alpha", + "type": "int", + "data_points": [ + 0, + 45, + 126, + 190, + 228, + 246, + 253, + 255, + 255, + 255, + 249, + 226, + 192, + 153, + 112, + 72, + 34, + 0, + 0, + 0 + ] + } + ] +}
\ No newline at end of file diff --git a/packages/SystemUI/tests/src/com/android/systemui/animation/TransitionAnimatorTest.kt b/packages/SystemUI/tests/src/com/android/systemui/animation/TransitionAnimatorTest.kt index 762cfa03c310..8b427fbc5fb8 100644 --- a/packages/SystemUI/tests/src/com/android/systemui/animation/TransitionAnimatorTest.kt +++ b/packages/SystemUI/tests/src/com/android/systemui/animation/TransitionAnimatorTest.kt @@ -16,43 +16,44 @@ package com.android.systemui.animation -import android.animation.AnimatorSet +import android.animation.AnimatorRuleRecordingSpec +import android.animation.AnimatorTestRuleToolkit +import android.animation.MotionControl +import android.animation.recordMotion import android.graphics.drawable.GradientDrawable import android.platform.test.annotations.MotionTest import android.view.ViewGroup import android.widget.FrameLayout import androidx.test.ext.junit.rules.ActivityScenarioRule -import androidx.test.ext.junit.runners.AndroidJUnit4 import androidx.test.filters.SmallTest +import androidx.test.platform.app.InstrumentationRegistry.getInstrumentation import com.android.systemui.SysuiTestCase import com.android.systemui.activity.EmptyTestActivity import com.android.systemui.concurrency.fakeExecutor import com.android.systemui.kosmos.Kosmos +import com.android.systemui.kosmos.testScope +import kotlin.test.assertTrue import org.junit.Rule import org.junit.Test import org.junit.runner.RunWith import platform.test.motion.MotionTestRule import platform.test.motion.RecordedMotion -import platform.test.motion.view.AnimationSampling.Companion.evenlySampled import platform.test.motion.view.DrawableFeatureCaptures -import platform.test.motion.view.ViewRecordingSpec.Companion.captureWithoutScreenshot -import platform.test.motion.view.ViewToolkit -import platform.test.motion.view.record -import platform.test.screenshot.DeviceEmulationRule -import platform.test.screenshot.DeviceEmulationSpec -import platform.test.screenshot.DisplaySpec +import platform.test.runner.parameterized.ParameterizedAndroidJunit4 +import platform.test.runner.parameterized.Parameters import platform.test.screenshot.GoldenPathManager import platform.test.screenshot.PathConfig @SmallTest @MotionTest -@RunWith(AndroidJUnit4::class) -class TransitionAnimatorTest : SysuiTestCase() { +@RunWith(ParameterizedAndroidJunit4::class) +class TransitionAnimatorTest(val useSpring: Boolean) : SysuiTestCase() { companion object { private const val GOLDENS_PATH = "frameworks/base/packages/SystemUI/tests/goldens" - private val emulationSpec = - DeviceEmulationSpec(DisplaySpec("phone", width = 320, height = 690, densityDpi = 160)) + @get:Parameters(name = "{0}") + @JvmStatic + val useSpringValues = booleanArrayOf(false, true).toList() } private val kosmos = Kosmos() @@ -62,31 +63,50 @@ class TransitionAnimatorTest : SysuiTestCase() { kosmos.fakeExecutor, ActivityTransitionAnimator.TIMINGS, ActivityTransitionAnimator.INTERPOLATORS, + ActivityTransitionAnimator.SPRING_TIMINGS, + ActivityTransitionAnimator.SPRING_INTERPOLATORS, ) + private val withSpring = + if (useSpring) { + "_withSpring" + } else { + "" + } - @get:Rule(order = 0) val deviceEmulationRule = DeviceEmulationRule(emulationSpec) @get:Rule(order = 1) val activityRule = ActivityScenarioRule(EmptyTestActivity::class.java) - @get:Rule(order = 2) - val motionRule = MotionTestRule(ViewToolkit { activityRule.scenario }, pathManager) + @get:Rule(order = 2) val animatorTestRule = android.animation.AnimatorTestRule(this) + @get:Rule(order = 3) + val motionRule = + MotionTestRule(AnimatorTestRuleToolkit(animatorTestRule, kosmos.testScope), pathManager) @Test fun backgroundAnimation_whenLaunching() { val backgroundLayer = GradientDrawable().apply { alpha = 0 } - val animator = setUpTest(backgroundLayer, isLaunching = true) + val animator = + setUpTest(backgroundLayer, isLaunching = true).apply { + getInstrumentation().runOnMainSync { start() } + } val recordedMotion = recordMotion(backgroundLayer, animator) - motionRule.assertThat(recordedMotion).timeSeriesMatchesGolden() + motionRule + .assertThat(recordedMotion) + .timeSeriesMatchesGolden("backgroundAnimation_whenLaunching$withSpring") } @Test fun backgroundAnimation_whenReturning() { val backgroundLayer = GradientDrawable().apply { alpha = 0 } - val animator = setUpTest(backgroundLayer, isLaunching = false) + val animator = + setUpTest(backgroundLayer, isLaunching = false).apply { + getInstrumentation().runOnMainSync { start() } + } val recordedMotion = recordMotion(backgroundLayer, animator) - motionRule.assertThat(recordedMotion).timeSeriesMatchesGolden() + motionRule + .assertThat(recordedMotion) + .timeSeriesMatchesGolden("backgroundAnimation_whenReturning$withSpring") } @Test @@ -94,10 +114,13 @@ class TransitionAnimatorTest : SysuiTestCase() { val backgroundLayer = GradientDrawable().apply { alpha = 0 } val animator = setUpTest(backgroundLayer, isLaunching = true, fadeWindowBackgroundLayer = false) + .apply { getInstrumentation().runOnMainSync { start() } } val recordedMotion = recordMotion(backgroundLayer, animator) - motionRule.assertThat(recordedMotion).timeSeriesMatchesGolden() + motionRule + .assertThat(recordedMotion) + .timeSeriesMatchesGolden("backgroundAnimationWithoutFade_whenLaunching$withSpring") } @Test @@ -105,17 +128,20 @@ class TransitionAnimatorTest : SysuiTestCase() { val backgroundLayer = GradientDrawable().apply { alpha = 0 } val animator = setUpTest(backgroundLayer, isLaunching = false, fadeWindowBackgroundLayer = false) + .apply { getInstrumentation().runOnMainSync { start() } } val recordedMotion = recordMotion(backgroundLayer, animator) - motionRule.assertThat(recordedMotion).timeSeriesMatchesGolden() + motionRule + .assertThat(recordedMotion) + .timeSeriesMatchesGolden("backgroundAnimationWithoutFade_whenReturning$withSpring") } private fun setUpTest( backgroundLayer: GradientDrawable, isLaunching: Boolean, fadeWindowBackgroundLayer: Boolean = true, - ): AnimatorSet { + ): TransitionAnimator.Animation { lateinit var transitionContainer: ViewGroup activityRule.scenario.onActivity { activity -> transitionContainer = FrameLayout(activity).apply { setBackgroundColor(0x00FF00) } @@ -124,18 +150,14 @@ class TransitionAnimatorTest : SysuiTestCase() { waitForIdleSync() val controller = TestController(transitionContainer, isLaunching) - val animation = - transitionAnimator.createAnimation( - controller, - controller.createAnimatorState(), - createEndState(transitionContainer), - backgroundLayer, - fadeWindowBackgroundLayer, - ) as TransitionAnimator.InterpolatedAnimation - return AnimatorSet().apply { - duration = animation.animator.duration - play(animation.animator) - } + return transitionAnimator.createAnimation( + controller, + controller.createAnimatorState(), + createEndState(transitionContainer), + backgroundLayer, + fadeWindowBackgroundLayer, + useSpring, + ) } private fun createEndState(container: ViewGroup): TransitionAnimator.State { @@ -144,8 +166,8 @@ class TransitionAnimatorTest : SysuiTestCase() { return TransitionAnimator.State( left = containerLocation[0], top = containerLocation[1], - right = containerLocation[0] + emulationSpec.display.width, - bottom = containerLocation[1] + emulationSpec.display.height, + right = containerLocation[0] + 320, + bottom = containerLocation[1] + 690, topCornerRadius = 0f, bottomCornerRadius = 0f, ) @@ -153,16 +175,35 @@ class TransitionAnimatorTest : SysuiTestCase() { private fun recordMotion( backgroundLayer: GradientDrawable, - animator: AnimatorSet, + animation: TransitionAnimator.Animation, ): RecordedMotion { - return motionRule.record( - animator, - backgroundLayer.captureWithoutScreenshot(evenlySampled(20)) { - feature(DrawableFeatureCaptures.bounds, "bounds") - feature(DrawableFeatureCaptures.cornerRadii, "corner_radii") - feature(DrawableFeatureCaptures.alpha, "alpha") - }, - ) + fun record(motionControl: MotionControl, sampleIntervalMs: Long): RecordedMotion { + return motionRule.recordMotion( + AnimatorRuleRecordingSpec(backgroundLayer, motionControl, sampleIntervalMs) { + feature(DrawableFeatureCaptures.bounds, "bounds") + feature(DrawableFeatureCaptures.cornerRadii, "corner_radii") + feature(DrawableFeatureCaptures.alpha, "alpha") + } + ) + } + + val motionControl: MotionControl + val sampleIntervalMs: Long + if (useSpring) { + assertTrue { animation is TransitionAnimator.MultiSpringAnimation } + motionControl = MotionControl { + awaitCondition { (animation as TransitionAnimator.MultiSpringAnimation).isDone } + } + sampleIntervalMs = 16L + } else { + assertTrue { animation is TransitionAnimator.InterpolatedAnimation } + motionControl = MotionControl { awaitFrames(count = 26) } + sampleIntervalMs = 20L + } + + var recording: RecordedMotion? = null + getInstrumentation().runOnMainSync { recording = record(motionControl, sampleIntervalMs) } + return recording!! } } |