Разработка
Создаем мерцающий текст в Jetpack Compose
В этой статье мы создадим потрясающую анимацию мерцающего текста в Jetpack Compose, идеально подходящую для минималистичного загрузчика.
В этой статье мы создадим потрясающую анимацию мерцающего текста в Jetpack Compose, идеально подходящую для минималистичного загрузчика.
Определение функции
Начнем с определения композабл функции 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 — модификатор, который будет применен к тексту
- 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" )
Создание мерцающей кисти
Далее мы создадим мерцающую кисть, которая будет перемещаться по тексту в зависимости от значения 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) ) } } }
Рендеринг текста
Наконец, мы отрендерим композабл 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 ) ) }
Вот что получится:
Спасибо, что прочитали статью. Не забудьте показать коллегам!