用Jetpack Compose打造炫酷圆形加载动画：Canvas与动画的完美结合

前言

在现代应用开发中，流畅美观的加载动画对用户体验至关重要。Jetpack Compose凭借其声明式UI特性，为我们提供了强大的动画制作工具。今天，我们就来一起动手创建一个自定义圆形加载器组件，探索Compose中Canvas和动画的无限可能

基础准备

首先，我们需要创建一个StrokeStyle数据类来处理加载器的描边样式：

data class StrokeStyle(
    val width: Dp = 4.dp,
    val strokeCap: StrokeCap = StrokeCap.Round,
    val glowRadius: Dp? = 4.dp
)

构建核心函数

让我们定义CircleLoader可组合函数：

@Composable
fun CircleLoader(
    modifier: Modifier,
    isVisible: Boolean,
    color: Color,
    secondColor: Color? = color,
    tailLength: Float = 140f,
    smoothTransition: Boolean = true,
    strokeStyle: StrokeStyle = StrokeStyle(),
    cycleDuration: Int = 1400,
)

参数详解：

1. modifier 应用于Canvas的修饰符
2. isVisible 控制动画可见性
3. color 主色调
4. secondColor 可选副色调
5. tailLength 尾部长度(角度制)
6. smoothTransition 是否启用平滑过渡
7. strokeStyle 描边样式
8. cycleDuration 动画周期(毫秒)

实现细节

1. 绘制工具配置

setupPaint函数配置绘制所需的Paint对象：

fun DrawScope.setupPaint(style: StrokeStyle, brush: Brush): Paint {
    val paint = Paint().apply {
        isAntiAlias = true
        style = PaintingStyle.Stroke
        strokeWidth = style.width.toPx()
        strokeCap = style.strokeCap
        brush.applyTo(size, this, 1f)
    }
    style.glowRadius?.let { radius ->
        paint.asFrameworkPaint().setShadowLayer(
            radius.toPx(), 0f, 0f, android.graphics.Color.WHITE
        )
    }
    return paint
}

2. 动画魔法

我们使用两种动画效果：

旋转动画 - 无限循环旋转：

val transition = rememberInfiniteTransition()
val spinAngel by transition.animateFloat(
    initialValue = 0f,
    targetValue = 360f,
    animationSpec = infiniteRepeatable(
        animation = tween(cycleDuration, easing = LinearEasing),
        repeatMode = RepeatMode.Restart
    )
)

状态过渡动画 - 平滑显示/隐藏效果：

val tailToDisplay = remember { Animatable(0f) }
LaunchedEffect(isVisible) {
    val targetTail = if (isVisible) tailLength else 0f
    if (smoothTransition) {
        tailToDisplay.animateTo(targetTail, tween(cycleDuration, easing = LinearEasing))
    } else {
        tailToDisplay.snapTo(targetTail)
    }
}

3. Canvas绘制

最后，我们使用drawArc方法绘制加载器：

Canvas(
    modifier
        .rotate(spinAngel)
        .aspectRatio(1f)
) {
    listOfNotNull(color, secondColor).forEachIndexed { index, color ->
        rotate(if (index == 0) 0f else 180f) {
            val brush = Brush.sweepGradient(
                0f to Color.Transparent,
                tailToDisplay.value / 360f to color,
                1f to Color.Transparent
            )
            val paint = setupPaint(strokeStyle, brush)
            drawIntoCanvas { canvas ->
                canvas.drawArc(
                    rect = size.toRect(),
                    startAngle = 0f,
                    sweepAngle = tailToDisplay.value,
                    useCenter = false,
                    paint = paint
                )
            }
        }
    }
}

恭喜！ 我们已经成功构建了这个炫酷的加载器。

实际应用

通过控制主色和副色，我们可以创建三种不同的动画效果：

1. 双尾同色效果

CircleLoader(
    color = Color(0xFF1F79FF),
    modifier = Modifier.size(100.dp),
    isVisible = isLoading
)

2. 双尾异色效果

CircleLoader(
    color = Color(0xFF1F79FF),
    secondColor = Color(0xFFFFE91F),
    modifier = Modifier.size(100.dp),
    isVisible = isLoading
)

3. 单尾效果

CircleLoader(
    color = Color(0xFF1F79FF),
    secondColor = null,
    tailLength = 280f,
    modifier = Modifier.size(100.dp),
    isVisible = isLoading
)

结语

通过这篇文章，我们不仅学会了如何创建自定义加载动画，还深入理解了Jetpack Compose中Canvas和动画系统的强大功能。现在，是时候在你的项目中应用这些知识，创造出更出色的用户体验了！