Библиотека мобильного разработчика | Android, iOS, Swift, Retrofit, Moshi, Chuck

🔴 Индикатор пульса в Jetpack Compose

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

Вот полная составная функция, которая отображает индикатор пульса:

@Composable
закрытый метод PulseIndicator(
    @DrawableRes значок: Int,
 модификатор: Modifier = Modifier
) {
    val periodMs = 3600L
    val offsetsMs = longArrayOf(0L, 1200L, 2400L)

    val startNs = запомнить { System.nanoTime() }
    var frameTimeNs by запомнить { mutableLongStateOf(startNs) }

 LaunchedEffect(Единица измерения) {
        while (true) {
 withFrameNanos { now -> frameTimeNs = now }
 }
 }

    (offsetMs:  Long)фазафункция: число с плавающей запятой {
        val elapsedMs = (frameTimeNs - startNs) / 1_000_000L + offsetMs
        return ((elapsedMs % periodMs).toFloat() / periodMs.toFloat())
 }

 Box(modifier.size(80.dp), contentAlignment = Alignment.Center) {
        (p: 
        Float )Кольцофункция@Composable = Box(
 Модификатор
 .matchParentSize()
 .graphicsLayer {
 scaleX = 1f + 0,8f * p
 scaleY = 1f + 0,8f * p
 alpha = 1f - p
 }
 .border(1,5.dp, Color.White.copy(alpha = 0,9f), CircleShape)
 )

 Кольцо(фаза(смещения[0]))
 Кольцо(фаза(смещения[1]))
 Кольцо(фаза(смещения[2]))

 Box(
 Modifier
 .size(80.dp)
 .background(Color.White, CircleShape),
 contentAlignment = Alignment.Center
 ) {
 Image(
 painter = painterResource(icon),
 contentDescription = null,
 modifier = Modifier.size(32.dp)
 )
 }
 }
}

❓ Как это работает

➖ Хронометраж анимации

Компонуемый элемент использует withFrameNanos внутри LaunchedEffect. Это позволяет получить доступ к текущей временной метке кадра и обеспечивает плавность анимации, пока компонуемый элемент находится на экране. Когда компонуемый элемент покидает композицию, сопрограмма автоматически отменяется.

➖ Расчет фазы

Функция phase(offsetMs) преобразует прошедшее время в значение между 0f и 1f. Каждое кольцо смещено (0, 1200, 2400 мс), поэтому они расширяются в разные моменты. Это создаёт иллюзию непрерывных волн.

➖ Рендеринг кольца

Каждое кольцо изображается в виде Box с круглой рамкой. Его размер и непрозрачность изменяются с помощью graphicsLayer:

🔘 scaleX и scaleY постепенно увеличиваются от 1f до 1.8f.
🔘 alpha плавно переходит от 1f к 0f.

Вместе они образуют расширяющийся, затухающий круг.

➖ Значок ядра

В центре находится сплошной белый круг с указанным значком (например, с меткой местоположения). Он служит статичной точкой привязки, в то время как анимированные кольца расходятся в стороны.

🐸 Библиотека мобильного разработчика

#PixelPerfect #MiddlePath #Kotlin

Please open Telegram to view this post

VIEW IN TELEGRAM

👍4😁4👾1

www.tgoop.com/mobileproglib/6271

750 viewsOct 7 at 11:01

🔴 Индикатор пульса в Jetpack Compose

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

Вот полная составная функция, которая отображает индикатор пульса:

@Composable
закрытый метод PulseIndicator(
    @DrawableRes значок: Int,
 модификатор: Modifier = Modifier
) {
    val periodMs = 3600L
    val offsetsMs = longArrayOf(0L, 1200L, 2400L)

    val startNs = запомнить { System.nanoTime() }
    var frameTimeNs by запомнить { mutableLongStateOf(startNs) }

 LaunchedEffect(Единица измерения) {
        while (true) {
 withFrameNanos { now -> frameTimeNs = now }
 }
 }

    (offsetMs:  Long)фазафункция: число с плавающей запятой {
        val elapsedMs = (frameTimeNs - startNs) / 1_000_000L + offsetMs
        return ((elapsedMs % periodMs).toFloat() / periodMs.toFloat())
 }

 Box(modifier.size(80.dp), contentAlignment = Alignment.Center) {
        (p: 
        Float )Кольцофункция@Composable = Box(
 Модификатор
 .matchParentSize()
 .graphicsLayer {
 scaleX = 1f + 0,8f * p
 scaleY = 1f + 0,8f * p
 alpha = 1f - p
 }
 .border(1,5.dp, Color.White.copy(alpha = 0,9f), CircleShape)
 )

 Кольцо(фаза(смещения[0]))
 Кольцо(фаза(смещения[1]))
 Кольцо(фаза(смещения[2]))

 Box(
 Modifier
 .size(80.dp)
 .background(Color.White, CircleShape),
 contentAlignment = Alignment.Center
 ) {
 Image(
 painter = painterResource(icon),
 contentDescription = null,
 modifier = Modifier.size(32.dp)
 )
 }
 }
}