Как создать анимацию мерцающего текста в Jetpack Compose

Из этой статьи вы узнаете, как создать анимацию с эффектом мерцающего текста в Jetpack Compose, идеально подходящую для минималистичного загрузчика.

Определение функции

Начнем с определения composable-функции ShimmeringText:

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

Параметры

•  text — текст, который будет отображаться;

• shimmerColor — цвет, который будет использоваться для эффекта мерцания;

• modifier — модификатор, который будет применен к composable-функции Text;

• textStyle — стиль отображаемого текста;

•  animationSpec — спецификация анимации (управление скоростью, задержка и смягчение мерцания).

Реализация функции

В этом разделе реализуем функцию ShimmeringText.

Создание бесконечной анимации

Сначала определим бесконечный анимационный переход:

val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")

Используя этот переход, создадим анимацию shimmerProgress, которая проходит от 0 до 1 и повторяется:

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

Создание кисти для эффекта мерцания

Теперь создадим кисть для реализации эффекта мерцания (shimmer brush), которая будет перемещаться по тексту в зависимости от значения shimmerProgress:

val brush = remember(shimmerProgress) {
    object : ShaderBrush() {
        override fun createShader(size: Size): Shader {
            // Определите начальное смещение по оси X, начиная от левого края текста
            val initialXOffset = -size.width
            // Общее расстояние, по которому будет проходить мерцание (удвойте ширину текста для полного покрытия)
            val totalSweepDistance = size.width * 2
            // Рассчитайте текущее положение мерцания на основе прогресса анимации
            val currentPosition = initialXOffset + totalSweepDistance * shimmerProgress

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

Рендеринг текста

Наконец, отрендерим composable-функцию Text с применением анимированной кисти для эффекта мерцания:

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

Мы успешно создали анимацию. Полный код можете найти на GitHub Gist. Рассмотрим возможности применения анимации мерцающего текста. 

Практический пример 

Cоздадим простую анимацию загрузки текста:

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
        )
    )
}

Результат

Читайте также:

• Как создать атомарный загрузчик в Jetpack Compose
• Jetpack Compose: настройка Retrofit и Ktor с помощью Dagger Hilt для внедрения зависимостей
• Как создать анимацию кругового вытеснения в Jetpack Compose

Читайте нас в Telegram, VK и Дзен

---

Перевод статьи Kappdev: How to Create a Shimmering Text Animation in Jetpack Compose