[3/3] Introduce a new spring-based animation.
This is meant to be used for animations that have a starting velocity
(e.g. gesture nav, predictive back), but it can in principle be used
interchangeably with the interpolator-based animation that we've been
using so far.
Bug: 323863002
Flag: com.android.systemui.shared.return_animation_framework_library
Test: atest TransitionAnimatorTest
Change-Id: I5b22b2b8ef52f248583d71c5ee4d113b6993baae
diff --git a/packages/SystemUI/Android.bp b/packages/SystemUI/Android.bp
index c4a45d0..2863531 100644
--- a/packages/SystemUI/Android.bp
+++ b/packages/SystemUI/Android.bp
@@ -802,6 +802,7 @@
"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 d025275..93a99bd 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 @@
)
/**
+ * 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 @@
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 3dc0657..1d8ff77 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.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.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 @@
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 @@
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 @@
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 @@
}
}
+ @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 @@
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 @@
* 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 @@
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 @@
windowBackgroundLayer,
fadeWindowBackgroundLayer,
drawHole,
+ useSpring,
)
.apply { start() }
}
@@ -304,6 +453,7 @@
endState: State,
windowBackgroundLayer: GradientDrawable,
fadeWindowBackgroundLayer: Boolean = true,
+ useSpring: Boolean = false,
drawHole: Boolean = false,
): Animation {
val transitionContainer = controller.transitionContainer
@@ -321,19 +471,35 @@
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 @@
fadeWindowBackgroundLayer,
drawHole,
controller.isLaunching,
+ useSpring = false,
)
controller.onTransitionAnimationProgress(state, progress, linearProgress)
@@ -486,6 +653,215 @@
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 @@
fadeWindowBackgroundLayer: Boolean,
drawHole: Boolean,
isLaunching: Boolean,
+ useSpring: Boolean,
) {
// Update position.
transitionContainer.getLocationOnScreen(transitionContainerLocation)
@@ -644,8 +1021,19 @@
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 @@
timings.contentBeforeFadeOutDelay,
timings.contentBeforeFadeOutDuration,
)
+ val fadeOutProgress =
+ getProgress(
+ timings,
+ linearProgress,
+ timings.contentAfterFadeInDelay,
+ timings.contentAfterFadeInDuration,
+ )
if (isLaunching) {
if (fadeInProgress < 1) {
@@ -660,13 +1055,6 @@
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 @@
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 60bff17..7f62357 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": 3,
+ "top": 8,
+ "right": 317,
+ "bottom": 682
},
{
"left": 2,
- "top": 7,
- "right": 317,
- "bottom": 683
+ "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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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.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": 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": 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": 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": 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": 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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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": 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 0000000..18eedd4
--- /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 ea768c0..98005c5 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": 3,
+ "top": 8,
+ "right": 317,
+ "bottom": 682
},
{
"left": 2,
- "top": 7,
- "right": 317,
- "bottom": 683
+ "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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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.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": 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": 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": 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": 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": 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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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": 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": [
+ 255,
+ 255,
+ 255,
+ 255,
+ 255,
+ 255,
+ 255,
+ 255,
+ 233,
+ 191,
+ 153,
+ 117,
+ 85,
+ 57,
+ 33,
+ 14,
+ 3,
0,
- 255,
- 255,
- 255,
- 255,
- 255,
- 255,
- 239,
- 183,
- 135,
- 91,
- 53,
- 23,
- 5,
+ 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 0000000..18eedd4
--- /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 608e633..aa80445 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": 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": 3,
+ "top": 8,
+ "right": 317,
+ "bottom": 682
},
{
"left": 2,
- "top": 7,
- "right": 317,
- "bottom": 683
+ "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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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.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": 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": 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": 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": 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": 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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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": 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,
- 115,
- 178,
- 217,
- 241,
- 253,
- 239,
- 183,
- 135,
- 91,
- 53,
- 23,
- 5,
+ 0,
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 0000000..a840d3c
--- /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 608e633..aa80445 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": 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": 3,
+ "top": 8,
+ "right": 317,
+ "bottom": 682
},
{
"left": 2,
- "top": 7,
- "right": 317,
- "bottom": 683
+ "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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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": 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.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": 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": 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": 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": 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": 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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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": 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,
- 115,
- 178,
- 217,
- 241,
- 253,
- 239,
- 183,
- 135,
- 91,
- 53,
- 23,
- 5,
+ 0,
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 0000000..a840d3c
--- /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 762cfa0..8b427fb 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 @@
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 @@
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 @@
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 @@
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 @@
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 @@
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!!
}
}