From 160d90703643d21c5c82293fc91835dc92abca27 Mon Sep 17 00:00:00 2001 From: Yein Jo Date: Wed, 15 Feb 2023 19:05:05 +0000 Subject: [PATCH] Expose blur, Draw a ring outside of the given size in RippleShader. Design doc can be found in the bug attached. This is part of polishing the tablet docking animation. Note that the below CLs will be submitted together under the same topic: * [this CL] Expose blur, draw a ring outside (to match the logic with the other shapes) * Add TargetSize (name subject to change) * Update parameter values in WirelessChargingLayout Bug: 269124200 Test: RippleViewText, Manual Change-Id: Idf5c7838491149b8f240c91413db2dc7ce166479 --- .../surfaceeffects/ripple/RippleShader.kt | 15 +++++++++++++-- .../systemui/surfaceeffects/ripple/RippleView.kt | 10 ++++++++++ .../surfaceeffects/shaderutil/SdfShaderLibrary.kt | 15 +++++++++------ 3 files changed, 32 insertions(+), 8 deletions(-) diff --git a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleShader.kt b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleShader.kt index 61ca90a297fe8..3f19c0a341f53 100644 --- a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleShader.kt +++ b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleShader.kt @@ -99,7 +99,7 @@ class RippleShader(rippleShape: RippleShape = RippleShape.CIRCLE) : vec4 main(vec2 p) { float sparkleRing = soften(roundedBoxRing(p-in_center, in_size, in_cornerRadius, in_thickness), in_blur); - float inside = soften(sdRoundedBox(p-in_center, in_size * 1.2, in_cornerRadius), + float inside = soften(sdRoundedBox(p-in_center, in_size * 1.25, in_cornerRadius), in_blur); float sparkle = sparkles(p - mod(p, in_pixelDensity * 0.8), in_time * 0.00175) * (1.-sparkleRing) * in_fadeSparkle; @@ -191,6 +191,15 @@ class RippleShader(rippleShape: RippleShape = RippleShape.CIRCLE) : maxSize.y = height } + /** + * Blur multipliers for the ripple. + * + *

It interpolates from [blurStart] to [blurEnd] based on the [progress]. Increase number to + * add more blur. + */ + var blurStart: Float = 1.25f + var blurEnd: Float = 0.5f + /** * Linear progress of the ripple. Float value between [0, 1]. * @@ -209,6 +218,8 @@ class RippleShader(rippleShape: RippleShape = RippleShape.CIRCLE) : /** Progress with Standard easing curve applied. */ private var progress: Float = 0.0f set(value) { + field = value + currentWidth = maxSize.x * value currentHeight = maxSize.y * value setFloatUniform("in_size", currentWidth, currentHeight) @@ -217,7 +228,7 @@ class RippleShader(rippleShape: RippleShape = RippleShape.CIRCLE) : // radius should not exceed width and height values. setFloatUniform("in_cornerRadius", Math.min(maxSize.x, maxSize.y) * value) - setFloatUniform("in_blur", MathUtils.lerp(1.25f, 0.5f, value)) + setFloatUniform("in_blur", MathUtils.lerp(blurStart, blurEnd, value)) } /** Play time since the start of the effect. */ diff --git a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleView.kt b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleView.kt index 3c9328c82b832..401c24aab5bff 100644 --- a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleView.kt +++ b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/ripple/RippleView.kt @@ -84,6 +84,16 @@ open class RippleView(context: Context?, attrs: AttributeSet?) : View(context, a ripplePaint.shader = rippleShader } + /** + * Sets blur multiplier at start and end of the progress. + * + *

It interpolates between [start] and [end]. No need to set it if using default blur. + */ + fun setBlur(start: Float, end: Float) { + rippleShader.blurStart = start + rippleShader.blurEnd = end + } + @JvmOverloads fun startRipple(onAnimationEnd: Runnable? = null) { if (animator.isRunning) { diff --git a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/shaderutil/SdfShaderLibrary.kt b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/shaderutil/SdfShaderLibrary.kt index 8b2f46648fef1..78898932249bb 100644 --- a/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/shaderutil/SdfShaderLibrary.kt +++ b/packages/SystemUI/animation/src/com/android/systemui/surfaceeffects/shaderutil/SdfShaderLibrary.kt @@ -50,9 +50,9 @@ class SdfShaderLibrary { float roundedBoxRing(vec2 p, vec2 size, float cornerRadius, float borderThickness) { - float outerRoundBox = sdRoundedBox(p, size, cornerRadius); - float innerRoundBox = sdRoundedBox(p, size - vec2(borderThickness), - cornerRadius - borderThickness); + float outerRoundBox = sdRoundedBox(p, size + vec2(borderThickness), + cornerRadius + borderThickness); + float innerRoundBox = sdRoundedBox(p, size, cornerRadius); return subtract(outerRoundBox, innerRoundBox); } """ @@ -69,10 +69,13 @@ class SdfShaderLibrary { vec2 u = wh*p, v = wh*wh; - float U1 = u.y/2.0; float U5 = 4.0*U1; - float U2 = v.y-v.x; float U6 = 6.0*U1; - float U3 = u.x-U2; float U7 = 3.0*U3; + float U1 = u.y/2.0; + float U2 = v.y-v.x; + float U3 = u.x-U2; float U4 = u.x+U2; + float U5 = 4.0*U1; + float U6 = 6.0*U1; + float U7 = 3.0*U3; float t = 0.5; for (int i = 0; i < 3; i ++) {