Разработка

Создаем мерцающий текст в Jetpack Compose

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

Опубликовано

7 месяцев назад

19.09.2024

Автор:

AppTractor

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

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

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

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

Параметры:

text — текст, который будет отображаться
shimmerColor — цвет, используемый для эффекта мерцания
modifier — модификатор, который будет применен к тексту
textStyle — стиль текста
animationSpec — спецификация анимации для управления скоростью, задержкой и смягчением мерцания.

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

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

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

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

val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")

xxxxxxxxxx
 
val infiniteTransition = rememberInfiniteTransition(label = "ShimmeringTextTransition")​

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

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

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

Создание мерцающей кисти

Далее мы создадим мерцающую кисть, которая будет перемещаться по тексту в зависимости от значения 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)
            )
        }
    }
}

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

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

Наконец, мы отрендерим композабл Text с анимированной мерцающей кистью:

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

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

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