Fix text brush animation (#1395)

- Adopt
androidx@1631196
change
- Use `paragraph.updateForegroundPaint` instead of full rebuild where
possible

Fixes JetBrains/compose-multiplatform#4903

## Testing

Added `Android TextBrushDemo` in mpp demo

<img width="1029" alt="Screenshot 2024-06-07 at 19 21 39"
src="https://github.com/JetBrains/compose-multiplatform-core/assets/1836384/97d17949-e743-4774-ae55-cab664412091">

This should be tested by QA

## Release Notes

### Fixes - Multiple Platforms

- Fix text `brush` animation and optimized updating some visual text
properties (applying time is reduced up to 40%)

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/MainScreen.kt

@@ -19,6 +19,7 @@ package androidx.compose.mpp.demo
 import androidx.compose.mpp.demo.bug.BugReproducers
 import androidx.compose.mpp.demo.components.Components
 import androidx.compose.mpp.demo.textfield.android.AndroidTextFieldSamples
+import androidx.compose.mpp.demo.textfield.android.TextBrushDemo
 
 val MainScreen = Screen.Selection(
     "Demo",
@@ -35,4 +36,5 @@ val MainScreen = Screen.Selection(
     Screen.Example("FontRasterization") { FontRasterization() },
     Screen.Example("InteropOrder") { InteropOrder() },
     AndroidTextFieldSamples,
+    Screen.Example("Android TextBrushDemo") { TextBrushDemo() },
 )

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/textfield/android/BrushDemo.kt

@@ -16,18 +16,236 @@
 
 package androidx.compose.mpp.demo.textfield.android
 
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.material.Text
 import androidx.compose.material.TextField
-import androidx.compose.runtime.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.geometry.Size
+import androidx.compose.ui.geometry.center
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RadialGradientShader
+import androidx.compose.ui.graphics.Shader
+import androidx.compose.ui.graphics.ShaderBrush
+import androidx.compose.ui.graphics.Shadow
 import androidx.compose.ui.graphics.TileMode
-import androidx.compose.ui.text.ExperimentalTextApi
+import androidx.compose.ui.text.ParagraphStyle
+import androidx.compose.ui.text.SpanStyle
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.withStyle
 import androidx.compose.ui.unit.sp
 
-@OptIn(ExperimentalTextApi::class)
+@Composable
+fun TextBrushDemo() {
+    LazyColumn {
+        item {
+            TagLine(tag = "Sample")
+            TextStyleBrushSample()
+        }
+        item {
+            TagLine(tag = "Brush")
+            BrushDemo()
+        }
+        item {
+            TagLine(tag = "Brush Emojis")
+            BrushGraphicalEmoji()
+        }
+        item {
+            TagLine(tag = "SingleLine Span Brush")
+            SingleLineSpanBrush()
+        }
+        item {
+            TagLine(tag = "MultiLine Span Brush")
+            MultiLineSpanBrush()
+        }
+        item {
+            TagLine(tag = "MultiParagraph Brush")
+            MultiParagraphBrush()
+        }
+        item {
+            TagLine(tag = "Animated Brush")
+            AnimatedBrush()
+        }
+        item {
+            TagLine(tag = "Shadow and Brush")
+            ShadowAndBrush()
+        }
+        item {
+            TagLine(tag = "TextField")
+            TextFieldBrush()
+        }
+    }
+}
+
+@Composable
+fun BrushDemo() {
+    Text(
+        "Brush is awesome\nBrush is awesome\nBrush is awesome",
+        style = TextStyle(
+            brush = Brush.linearGradient(
+                colors = RainbowColors,
+                tileMode = TileMode.Mirror
+            ),
+            fontSize = 30.sp
+        )
+    )
+}
+
+@Composable
+fun BrushGraphicalEmoji() {
+    Text(
+        "\uD83D\uDEF3\uD83D\uDD2E\uD83E\uDDED\uD83E\uDD5D\uD83E\uDD8C\uD83D\uDE0D",
+        style = TextStyle(
+            brush = Brush.linearGradient(
+                colors = RainbowColors,
+                tileMode = TileMode.Mirror
+            )
+        ),
+        fontSize = 30.sp
+    )
+}
+
+@Composable
+fun SingleLineSpanBrush() {
+    val infiniteTransition = rememberInfiniteTransition()
+    val start by infiniteTransition.animateFloat(
+        initialValue = 0f,
+        targetValue = 4000f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 2000, easing = LinearEasing),
+            repeatMode = RepeatMode.Reverse
+        )
+    )
+    Text(
+        buildAnnotatedString {
+            append("Brush is awesome\n")
+            withStyle(
+                SpanStyle(
+                    brush = Brush.linearGradient(
+                        colors = RainbowColors,
+                        start = Offset(start, 0f),
+                        tileMode = TileMode.Mirror
+                    )
+                )
+            ) {
+                append("Brush is awesome")
+            }
+            append("\nBrush is awesome")
+        },
+        fontSize = 30.sp,
+    )
+}
+
+@Composable
+fun MultiLineSpanBrush() {
+    Text(
+        buildAnnotatedString {
+            append("Brush is aweso")
+            withStyle(
+                SpanStyle(
+                    brush = Brush.linearGradient(
+                        colors = RainbowColors,
+                        tileMode = TileMode.Mirror
+                    )
+                )
+            ) {
+                append("me\nBrush is awesome\nCo")
+            }
+            append("mpose is awesome")
+        },
+        fontSize = 30.sp,
+    )
+}
+
+@Composable
+fun MultiParagraphBrush() {
+    Text(
+        buildAnnotatedString {
+            withStyle(ParagraphStyle(textAlign = TextAlign.Right)) {
+                append(loremIpsum(wordCount = 29))
+            }
+
+            withStyle(ParagraphStyle(textAlign = TextAlign.Left)) {
+                append(loremIpsum(wordCount = 29))
+            }
+        },
+        style = TextStyle(
+            brush = Brush.radialGradient(
+                *RainbowStops.zip(RainbowColors).toTypedArray(),
+                radius = 600f,
+                tileMode = TileMode.Mirror
+            )
+        ),
+        fontSize = 30.sp
+    )
+}
+
+@Composable
+fun AnimatedBrush() {
+    val infiniteTransition = rememberInfiniteTransition()
+    val radius by infiniteTransition.animateFloat(
+        initialValue = 100f,
+        targetValue = 300f,
+        animationSpec = infiniteRepeatable(
+            animation = tween(durationMillis = 1000, easing = LinearEasing),
+            repeatMode = RepeatMode.Reverse
+        )
+    )
+    val brush = remember {
+        // postpone the state read to shader creation time which happens during draw.
+        ShaderBrush { size ->
+            RadialGradientShader(
+                center = size.center,
+                radius = radius,
+                colors = RainbowColors,
+                colorStops = RainbowStops,
+                tileMode = TileMode.Mirror
+            )
+        }
+    }
+    Text(
+        text = loremIpsum(wordCount = 29),
+        style = TextStyle(
+            brush = brush,
+            fontSize = 30.sp
+        )
+    )
+}
+
+@Composable
+fun ShadowAndBrush() {
+    Text(
+        "Brush is awesome",
+        style = TextStyle(
+            shadow = Shadow(
+                offset = Offset(8f, 8f),
+                blurRadius = 4f,
+                color = Color.Black
+            ),
+            brush = Brush.linearGradient(
+                colors = RainbowColors,
+                tileMode = TileMode.Mirror
+            )
+        ),
+        fontSize = 42.sp
+    )
+}
+
 @Composable
 fun TextFieldBrush() {
     var text by remember { mutableStateOf("Brush is awesome") }
@@ -45,11 +263,21 @@ fun TextFieldBrush() {
     )
 }
 
-private val RainbowColors = listOf(
+@Suppress("PrimitiveInCollection")
+internal val RainbowColors = listOf(
     Color(0xff9c4f96),
     Color(0xffff6355),
     Color(0xfffba949),
     Color(0xfffae442),
     Color(0xff8bd448),
     Color(0xff2aa8f2)
 )
+
+@Suppress("PrimitiveInCollection")
+internal val RainbowStops = listOf(0f, 0.2f, 0.4f, 0.6f, 0.8f, 1f)
+
+private fun ShaderBrush(block: (Size) -> Shader): ShaderBrush {
+    return object : ShaderBrush() {
+        override fun createShader(size: Size): Shader = block(size)
+    }
+}

compose/mpp/demo/src/commonMain/kotlin/androidx/compose/mpp/demo/textfield/android/TextStyleSamples.kt

@@ -0,0 +1,63 @@
+/*
+ * Copyright 2019 The Android Open Source Project
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package androidx.compose.mpp.demo.textfield.android
+
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.font.FontFamily
+import androidx.compose.ui.text.font.FontStyle
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextDecoration
+import androidx.compose.ui.unit.em
+import androidx.compose.ui.unit.sp
+
+@Composable
+fun TextStyleSample() {
+    Text(
+        text = "Demo Text",
+        style = TextStyle(
+            color = Color.Red,
+            fontSize = 16.sp,
+            fontFamily = FontFamily.Monospace,
+            fontWeight = FontWeight.W800,
+            fontStyle = FontStyle.Italic,
+            letterSpacing = 0.5.em,
+            background = Color.LightGray,
+            textDecoration = TextDecoration.Underline
+        )
+    )
+}
+
+@Composable
+fun TextStyleBrushSample() {
+    Text(
+        text = "Demo Text",
+        style = TextStyle(
+            brush = Brush.linearGradient(listOf(Color.Red, Color.Blue, Color.Green)),
+            alpha = 0.8f,
+            fontSize = 16.sp,
+            fontFamily = FontFamily.Monospace,
+            fontWeight = FontWeight.W800,
+            fontStyle = FontStyle.Italic,
+            letterSpacing = 0.5.em,
+            textDecoration = TextDecoration.Underline
+        )
+    )
+}