Jetpack Compose中如何实现radialGradient颜色位置循环动画？

要实现这种循环切换渐变颜色顺序的效果，核心思路是通过无限循环动画驱动颜色列表的偏移量，再用偏移后的颜色列表构建径向渐变画笔，具体实现步骤如下：

1. 核心实现逻辑 #

• 定义固定的基础颜色列表
• 创建无限循环动画控制颜色列表的偏移索引
• 根据动画进度生成偏移后的颜色列表，以此构建径向渐变画笔

2. 完整代码示例 #

import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.RadialGradient

@Composable
fun CyclicRadialGradientAnimation() {
    // 基础颜色序列：红/绿/蓝
    val baseColors = listOf(Color.Red, Color.Green, Color.Blue)
    val colorCount = baseColors.size

    // 创建无限循环过渡动画
    val infiniteTransition = rememberInfiniteTransition()
    // 动画值从0到颜色总数，每个周期3秒，循环重启
    val offsetProgress by infiniteTransition.animateFloat(
        initialValue = 0f,
        targetValue = colorCount.toFloat(),
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 3000),
            repeatMode = RepeatMode.Restart
        )
    )

    // 根据动画进度计算偏移量，生成顺序偏移后的颜色列表
    val currentOffset = offsetProgress.toInt()
    val animatedColors = baseColors.drop(currentOffset) + baseColors.take(currentOffset)

    // 构建径向渐变画笔
    val radialGradient = RadialGradient(
        colors = animatedColors,
        center = androidx.compose.ui.geometry.Center,
        radius = androidx.compose.ui.geometry.Size.Unspecified.width / 2
    )

    // 绘制铺满屏幕的渐变背景
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(brush = radialGradient)
    )
}

3. 关键细节说明 #

• 动画控制：rememberInfiniteTransition创建无限循环的动画载体，animateFloat控制偏移进度从0到颜色总数，周期结束后自动重启，实现颜色序列的循环偏移。
• 颜色偏移处理：通过drop(currentOffset)截取偏移后的子列表，拼接take(currentOffset)截取的前序元素，得到顺序偏移后的新颜色序列。
• 渐变配置：RadialGradient以组件中心为渐变中心，半径设为组件宽度的一半，确保渐变效果覆盖整个组件区域。

4. 自定义调整 #

• 修改动画速度：调整tween的durationMillis参数即可，数值越小动画越快。
• 扩展颜色数量：直接在baseColors中添加更多颜色，动画会自动适配新的颜色数量完成循环。

内容的提问来源于stack exchange，提问作者Nicolas DUBOSCQ