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

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.
+     *
+     * <p>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. */

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.
+     *
+     * <p>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) {

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 ++) {