Як створити Tubelight ефект в Android Compose

💡 Усі статті, обговорення, новини про Mobile — в одному місці. Приєднуйтесь до Mobile спільноти!

Покрокова інструкція про те, як я створив ефект Tubelight для мого демо додатку. Декілька днів тому, я був зробив ось такий цікавий ефект для курсору. Під час його реалізації треба було відтворити tubelight ефект. Процейс мені здався дуже цікавим і можливо комусь буде цікаво.

val sweepGradient = Brush.sweepGradient(
    colorStops = arrayOf(
        0.0f to mainGlowColor,
        0.49f to Color.Transparent,
        1.0f to Color.Transparent,
    ),
    center = centerOffset
)

При правильному налаштування кутового градієнта - отримуємо ось такий ефект

Наступним кроком є відобразити такий саме елемент, але дзеркально. Для цього використаємо scale зі значенням −1 по X

onDrawBehind {
scale(
  scaleX = if (flip) -1f else 1f,
  scaleY = 1f
   ) {
     drawRect(
       brush = sweepGradient,
       blendMode = BlendMode.Plus
     )
   }
}

В результаті ми і отримуємо ось такий результат:

Давайте ще розберемо інші частини коду нам треба визначити centerOffset. size.width — максимальна ширина нашого блоку відмінімаємо половину потрібної нам ширину. Ми малюємо від центру, тому і рахуємо все від нього. Потім ми це використаємо для анімації

val centerOffset = Offset(
    x = size.width - tubeWidth,
    y = startY
)
val sweepGradient = Brush.sweepGradient(
    colorStops = arrayOf(
        0.0f to mainGlowColor,
        0.49f to Color.Transparent,
        1.0f to Color.Transparent,
    ),
    center = centerOffset
)

Взагалом це буде виглядати ось так:

@Composable
fun Light(
    mainGlowColor: Color = Color(0xFF00DEFF),
    flip: Boolean = true,
    startY: Float,
    modifier: Modifier,
    halfTubeWidth: Float,
) {

    Box(
        modifier = modifier
            .drawWithCache {
                val centerOffset = Offset(
                    x = size.width - halfTubeWidth,
                    y = startY
                )

                val sweepGradient1 = Brush.sweepGradient(
                    colorStops = arrayOf(
                        0.0f to mainGlowColor,
                        0.49f to Color.Transparent,
                        1.0f to Color.Transparent,
                    ),
                    center = centerOffset
                )

                onDrawBehind {
                    scale(
                        scaleX = if (flip) -1f else 1f,
                        scaleY = 1f
                    ) {
                        drawRect(
                            brush = sweepGradient1,
                            blendMode = BlendMode.Plus
                        )
                    }
                }
            }
    )
}

Якщо додати анімації, то можна отримати дуже цікавий ефект