Draw ripple effect in a circle to reduce overdraw

Bug: 183382912
Test: Visual inspection. See attached video.
Change-Id: Ie60e4903a418bc23aa0e9281fe2f442ac77528e8

packages/SystemUI/src/com/android/systemui/statusbar/charging/ChargingRippleView.kt

@@ -39,9 +39,15 @@ class ChargingRippleView(context: Context?, attrs: AttributeSet?) : View(context
 
     var rippleInProgress: Boolean = false
     var radius: Float = 0.0f
-        set(value) { rippleShader.radius = value }
+        set(value) {
+            rippleShader.radius = value
+            field = value
+        }
     var origin: PointF = PointF()
-        set(value) { rippleShader.origin = value }
+        set(value) {
+            rippleShader.origin = value
+            field = value
+        }
     var duration: Long = 1750
 
     init {
@@ -94,6 +100,11 @@ class ChargingRippleView(context: Context?, attrs: AttributeSet?) : View(context
     }
 
     override fun onDraw(canvas: Canvas?) {
-        canvas?.drawRect(0f, 0f, width.toFloat(), height.toFloat(), ripplePaint)
+        // To reduce overdraw, we mask the effect to a circle whose radius is big enough to cover
+        // the active effect area. Values here should be kept in sync with the
+        // animation implementation in the ripple shader.
+        val maskRadius = (1 - (1 - rippleShader.progress) * (1 - rippleShader.progress) *
+                (1 - rippleShader.progress)) * radius * 1.5f
+        canvas?.drawCircle(origin.x, origin.y, maskRadius, ripplePaint)
     }
 }