用户对于应用的体验要求早Yi超越了功Neng的范畴。你是否曾遇到过这样的情况：打开一个应用，面对着静止不动的屏幕，内心充满了焦虑，甚至怀疑程序是不是卡死崩溃了？这种“未知的等待”是用户体验的杀手。正如 GTD 时间管理法所强调的那样，将任务分割并展示进度，Neng让人感到事情正在推进，从而极大地缓解焦虑。在软件界面中，进度条就扮演了这样一个至关重要的角色。

回想一下钢铁侠电影中贾维斯那个充满科技感的搜索特效，那种动态的、流光溢彩的视觉反馈，是不是让人感觉“屌炸天了”？这就是优秀 UI 设计的魅力。而Jetpack Compose 凭借其声明式 UI 的特性，为我们提供了无限的创意空间。今天我们就来探讨一个有趣的话题：如何让你的进度条设计独特，通过 Compose 实现那种酷炫的条纹效果？

从心理学的角度来kan，人类对于“确定性”有着天然的渴望。Ru果一个耗时操作没有任何提示，用户在几秒钟内就可Neng失去耐心并关闭应用。这就是自然界“适者生存”原理在软件界的体现——那些Neng给用户反馈的程序活了下来。而一个简单的进度条，尤其是带有动态效果的进度条，不仅告知了用户“系统正在运行”，geng通过视觉上的流动传递出“速度感”和“效率感”。

虽然网络上有hen多现成的图片素材，甚至有支持 AI 抠图、一键处理的平台提供海量资源，但作为一名追求极致的工程师，我们geng希望用代码亲手绘制出这种细腻的交互体验。毕竟硬编码的动画往往比静态图片素材geng灵活，也geng节省包体积。

在传统的 View 系统中，实现复杂的条纹背景往往需要自定义 Drawable 或者依赖 XML 中的 layer-list。而在 Compose 中，这一切变得前所未有的直观。我们主要利用的是 `DrawScope` 提供的强大绘图Neng力，特别是 `Modifier.drawBehind`。

这种基于底层绘制的实现方式，性Neng极其优秀。它直接作用于 Canvas 层，避开了复杂的布局重组，非常适合用来制作高频geng新的自定义进度条或加载动画。来吧，各位 Compose 吴彦祖，跟我一起来kankan如何从零开始构建这个效果。

通常我们提到渐变，想到的dou是柔和的色彩过渡。但要在 Compose 中画出条纹，我们需要的是“硬边缘”。这听起来似乎有些矛盾，但其实原理非常简单。

假如我们仅仅处理几个简单的颜色断点，事情其实并不复杂。关键在于如何利用 `Brush.linearGradient` 的颜色停止点。请kan下面这段代码的逻辑：

Modifier.drawBehind {
    drawRect(
        brush = Brush.linearGradient(
            0f to Color.Black,
            .5f to Color.Black,
            .5f to Color.White,
            1f to Color.White,
        )
    )
}

注意到了吗？在 `0.5f` 这个位置，我们定义了两个停止点：一个是黑色，一个是白色。这意味着，颜色从黑色过渡到黑色，然后在 `0.5f` 处瞬间跳变到白色，再从白色过渡到白色。这种在极短空间内的颜色突变，正是形成清晰硬边边界的原因。Ru果我们将中间两个停止点不断靠近，Zui终就会形成一条分界线。

目前我们得到的还只是黑白两个半区，并非重复出现的条纹。要真正画出条纹，需要让这些颜色在整个区域内重复排列。这时候，`TileMode.Repeated` 就派上用场了。

Zuo法是通过设置 `start` 和 `end` 偏移来控制单次渐变的角度与尺寸，再将 `tileMode` 设为 `TileMode.Repeated`，图案就会重复铺满整个区域。就像铺地砖一样，一旦定义好了一块砖的样式，剩下的就交给系统自动复制。

Modifier.drawBehind {
    drawRect(
        brush = Brush.linearGradient(
            0f to Color.Black,
            .5f to Color.Black,
            .5f to Color.White,
            1f to Color.White,
            start = Offset,
            end = Offset,
            tileMode = TileMode.Repeated,
        )
    )
}

静态的条纹虽然比纯色好kan，但还不够惊艳。我们希望这些条纹Neng像流水一样移动。方法hen简单，只需对起点和终点Zuo偏移即可。我们Ke以通过动画改变 `animatedOffset` 的值，从而让条纹kan起来在移动。

在 Compose 中，实现这种无限循环动画的Zui佳搭档是 `rememberInfiniteTransition`。我们Ke以创建一个从 0f 到 1f不断循环的动画值。

val infiniteTransition = rememberInfiniteTransition
val animatedOffset by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 20f, // 对应上面 end 的 x 坐标
    animationSpec = infiniteRepeatable(
        animation = tween(
            durationMillis = 1000,
            easing = LinearEasing,
        )
    ),
    label = "offset"
)
Box(
    modifier = Modifier
        .size
        .drawBehind {
            drawRect(
                brush = Brush.linearGradient(
                    0f to Color.Black,
                    .5f to Color.Black,
                    .5f to Color.White,
                    1f to Color.White,
                    start = Offset,
                    end = Offset,
                    tileMode = TileMode.Repeated,
                )
            )
        }
)

你没kan错，这就是一个生动的条纹动画！通过不断改变 `start` 和 `end` 的 X 轴坐标，视觉上就产生了条纹在水平流动的错觉。

虽然上面的方法可行，但一旦需要构建geng复杂的图案，比如不同颜色的条纹、不同宽度的比例，手动计算就会变得相当繁琐。为什么这个条纹是斜的？因为默认的 `linearGradient` 的起点在左上角，终点在右下角，所以绘制出来是斜的。后续我们将通过主动设置 `start` 和 `end` 参数来纠正这个问题，或者干脆利用它来制作斜条纹。

为了让这类设计的实现geng简单，我们来写一个辅助函数。我们不再直接计算 `start` 和 `end` 的偏移量，而是用宽度和角度来定义条纹的尺寸及方向。

这个辅助函数 要解决的核心问题就是颜色停止点，手动设置它们既容易出错，又非常繁琐。与其如此，不如直接传入一个由“颜色-权重”键值对组成的列表。Ru果所有权重dou相同，那么所有条纹的宽度也dou相同。例如一条条纹的权重是 `2f`，另一条是 `1f`，那么前者就会占据 2/3 的宽度空间。

fun Brush.Companion.stripes(
    vararg stripes: Pair,
    width: Float = 20f,
    angle: Float = 45f,
    phase: Float = 0f,
): Brush {
    val totalWeight = stripes.sumOf { it.second.toDouble }.toFloat
    val colorStops = mutableListOf
    var currentPosition = 0f
    stripes.forEach {  ->
        val proportion = weight / totalWeight
        colorStops.add
        currentPosition += proportion
        colorStops.add
    }
    val angleInRadians = angle * 
    val endX = ).toFloat
    val endY = ).toFloat
    val phaseOffsetX = endX * phase
    val phaseOffsetY = endY * phase
    return linearGradient(
        colorStops = colorStops.toTypedArray,
        start = Offset,
        end = Offset,
        tileMode = TileMode.Repeated,
    )
}

在此基础上，通过封装辅助函数，不仅让多颜色、多宽度的条纹构建变得简单，还利用 `phase` 参数为实现流畅的条纹动画提供了便利。Zui后是 `phase`，我们用它来控制图案的起始偏移量，这也是实现条纹动画的关键参数。`phase` 与前面传入的 `width` 是成比例的，也就是说`phase` 为 `1f` 时正好对应一个完整图案的偏移长度。

使用起来也非常简单：

// Equal stripes
Brush.stripes(
    Pink400 to 1f,
    Transparent to 1f,
)
// Pink twice as wide
Brush.stripes(
    Pink400 to 2f,
    Transparent to 1f,
)
// Multiple colors
Brush.stripes(
    Red to 1f,
    Blue to 2f,
    Green to 1f,
)

现在我们来解决文章开头提到的需求，绘制一个美观的条纹进度条。我们将结合之前学到的 `drawBehind` 和新的 `stripes` 辅助函数。

大部分代码一目了然。在 `drawBehind` 中，我们使用了刚刚编写的辅助函数 `stripes`。为了让效果geng酷，我们Ke以给进度条加上圆角边框，并让条纹在进度填充区域内流动。

@Composable
fun AnimatedStripeProgressBar(
    modifier: Modifier = Modifier,
    progress: Float = 0f,
    height: Float = 24f,
    strokeWidth: Float = 3f,
    stripeColor: Color = Color,
    bgColor: Color = Color.White,
    stripeWidth: Float = 12f,
    angle: Float = 45f,
    animationSpeed: Int = 1000,
) {
    val phase by rememberInfiniteTransition
        .animateFloat(
            initialValue = 0f,
            targetValue = 1f,
            animationSpec = infiniteRepeatable(
                animation = tween(
                    durationMillis = animationSpeed,
                    easing = LinearEasing,
                )
            ),
            label = "progress_phase"
        )
    Box(
        modifier = modifier
            .clip
            .border(
                width = strokeWidth.dp,
                color = stripeColor,
                shape = CircleShape
            )
            .height
            .fillMaxWidth
            .drawBehind {
                val barWidth = size.width
                val filledWidth = barWidth * progress
                if  {
                    drawRect(
                        brush = Brush.stripes(
                            stripeColor to 1f,
                            bgColor to 1f,
                            width = stripeWidth,
                            angle = angle,
                            phase = -phase
                        ),
                        size = Size
                    )
                }
            }
    )
}

有了这个辅助函数之后就Ke以像下面这样创建动画条纹：

Column {
    Text(
        text = "Animated Stripes",
        style = MaterialTheme.typography.titleMedium,
        modifier = Modifier.padding
    )
    AnimatedStripeProgressBar(
        modifier = Modifier.padding,
        progress = 0.65f
    )
}

通过巧妙利用 `Brush.linearGradient` 的颜色停止点和 `TileMode.Repeated`，我们Ke以轻松在 Compose 中实现硬边缘的条纹效果。这种基于底层绘制的动画实现方式性Neng优秀，非常适合用来制作高频geng新的自定义进度条或加载动画。

相比于 Bootstrap 框架中通过 CSS 类名来实现的方式，Compose 的方案geng加灵活且原生。我们不再局限于简单的 CSS 渐变，而是Ke以用 Kotlin 代码精确控制每一个像素的绘制逻辑。

无论是为了展现个性魅力的时尚设计，还是为了提升用户体验的功Neng性组件，掌握这种自定义绘图技巧dou是每一位 Android 开发者进阶的必经之路。下次当你再kan到那个独特的进度条设计时你应该会心一笑：“嘿，这一定是 Compose 画出来的条纹！”

希望这篇文章Neng为你带来一些灵感。Ru果你有geng独特的见解，或者尝试了不同的颜色搭配，欢迎在评论区分享你的作品。毕竟代码不仅是逻辑的堆砌，geng是艺术的表达。