在 Compose 中创建文本闪烁动画

文本闪烁动画是一种非常经典和常见的交互方式. 它最初由 Facebook 在其自家应用中引用, 并且将该效果开源出来. 详见Shimmer-Android.

在本文中, 我们将在 Jetpack Compose 中创建一个令人惊叹的文本闪烁动画, 非常适合简约的加载器 ✨

兴奋吗? 让我们开始吧 🚀👇

让我们从定义 ShimmeringText Composable函数开始:

@Composable
fun ShimmeringText(
    text: String,
    shimmerColor: Color,
    modifier: Modifier = Modifier,
    textStyle: TextStyle = LocalTextStyle.current,
    animationSpec: DurationBasedAnimationSpec<Float> = tween(1000, 500, LinearEasing)
)

参数

🖤 text 👉 将要显示的文本.

🖤 shimmerColor 👉 用于闪烁效果的颜色.

🖤 modifier 👉 Modifier 应用于Text的Composable函数.

🖤 textStyle 👉 文本的样式.

🖤 animationSpec 👉 用于控制闪烁速度, 延迟和缓和的动画规范.

在本节中, 我们将实现 ShimmeringText 函数.

创建无限动画

首先, 我们定义一个无限动画转换:

val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")

使用此转换, 我们将创建一个从 0 到 1 并重复播放的 shimmerProgress 动画:

val shimmerProgress by infiniteTransition.animateFloat(
    initialValue = 0f,
    targetValue = 1f,
    animationSpec = infiniteRepeatable(animationSpec),
    label = "ShimmerProgress"
)

创建 Shimmer Brush

接下来, 我们创建 Shimmer Brush, 它将根据 shimmerProgress 值在文本上移动:

val brush = remember(shimmerProgress) {
    object : ShaderBrush() {
        override fun createShader(size: Size): Shader {
            // Define the starting X offset, beginning outside the left edge of the text
            val initialXOffset = -size.width
            // Total distance the shimmer will sweep across (double the text width for full coverage)
            val totalSweepDistance = size.width * 2
            // Calculate the current position of the shimmer based on the animation progress
            val currentPosition = initialXOffset + totalSweepDistance * shimmerProgress

            return LinearGradientShader(
                colors = listOf(Color.Transparent, shimmerColor, Color.Transparent),
                from = Offset(currentPosition, 0f),
                to = Offset(currentPosition + size.width, 0f)
            )
        }
    }
}

渲染文本

最后, 我们渲染应用了动画 Shimmer Brush 的 Composable Text 文本:

Text(
    text = text,
    modifier = modifier,
    style = textStyle.copy(brush = brush)
)

恭喜🥳! 我们已经成功创建了 👏. 你可以在 GitHub **🧑‍💻 上找到完整代码. 让我们探索一下使用方法 👇

在这个示例中, 让我们创建一个简单的加载文本动画:

Box(
    modifier = Modifier
        .fillMaxSize()
        .background(Color.Black),
    contentAlignment = Alignment.Center
) {
    ShimmeringText(
        text = "LOADING",
        shimmerColor = Color.White,
        textStyle = LocalTextStyle.current.copy(
            fontSize = 20.sp,
            letterSpacing = 5.sp,
            fontWeight = FontWeight.Bold
        )
    )
}

视觉效果 ✨

哒哒! 今天的内容就分享到这里啦!

一家之言, 欢迎拍砖!

Happy Coding! Stay GOLDEN!