Эффект жидкого стекла в Compose Multiplatform или как оживить интерфейс за пару минут

Знаете это чувство, когда открываешь современное приложение, проводишь по экрану, а интерфейс буквально «дышит»? Кнопки плавно перетекают одна в другую, цвета смешиваются как капли масла в воде, и всё это выглядит безумно дорого. Обычно за такими эффектами стоят часы мучений с шейдерами, математика синусов и косинусов и бесконечные правки производительности. Но недавно я наткнулся на библиотеку AndroidLiquidGlass, которая делает этот процесс почти неприлично простым.

Что это вообще такое

Библиотека Liquid Glass (или просто Backdrop, как она называется внутри) — это инструмент для создания эффектов «жидкого стекла» и тягучих органических анимаций в Compose Multiplatform. Автор проекта собрал под капотом магию размытия и смешивания слоев, чтобы мы могли делать интерфейсы в духе последних трендов Apple или футуристичных концептов с Dribbble.

Самое приятное тут — поддержка Multiplatform. Если вы пишете на Kotlin для Android и iOS (и других платформ, где живет Compose), эффект будет работать везде одинаково. На Github у проекта уже больше 2800 звезд, что для узкоспециализированной UI-библиотеки очень приличный результат.

Как это работает на практике

Библиотека не дает готовых кнопок «из коробки», которые можно просто закинуть в проект и забыть. Это скорее низкоуровневый инструмент, фундамент. Вам придется собрать компоненты самостоятельно, но автор любезно оставил примеры реализации для самых популярных элементов:

• LiquidButton — кнопка, которая мягко деформируется при нажатии.
• LiquidToggle — переключатель с эффектом перетекания массы.
• LiquidSlider — ползунок, который выглядит как капля, движущаяся по поверхности.
• LiquidBottomTabs — нижняя навигация, где активный элемент выделяется плавным «наплывом».

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

Поиграем с кодом

Чтобы начать, нужно подключить зависимость из Maven Central. В Gradle это выглядит стандартно:

implementation("io.github.kyant0:backdrop:latest_version")

Основная концепция крутится вокруг слоев. Вы определяете фон и контент, который должен взаимодействовать с эффектом «жидкости». В документации (которая, кстати, живет на Gitbook) подробно расписано, как управлять вязкостью и прозрачностью этого самого «стекла».

Лично меня зацепило то, что эффект не выглядит дешево. Это не простое размытие по Гауссу, которое тормозит интерфейс. Здесь чувствуется работа с GPU, анимации плавные даже на устройствах среднего сегмента.

Где это использовать

Конечно, не стоит пихать «жидкое стекло» в каждое банковское приложение или CRM-систему для бухгалтеров. Но есть несколько сценариев, где это будет попаданием в десятку:

1. Медиаплееры и музыкальные приложения. Там, где важна атмосфера и плавность.
2. Фитнес-трекеры и велнес-приложения. Органические формы отлично подчеркивают тематику здоровья и движения.
3. Промо-лендинги или приложения-визитки. Всё, что должно зацепить взгляд пользователя в первые секунды.

Я пробовал реализовать нечто подобное чистыми шейдерами в Compose пару месяцев назад. Спойлер: я потратил три вечера и в итоге сдался, когда дело дошло до корректной обработки границ объектов. С Backdrop я получил похожий результат за двадцать минут, просто адаптировав пример из репозитория.

Стоит ли пробовать

Проект активно обновляется — это видно по истории коммитов. Однако документация в самом README довольно лаконичная, поэтому стоит сразу идти в папку catalog в репозитории. Там лежат исходники демо-приложения, из которых становится понятно, как именно связывать компоненты между собой.

Если вам надоели скучные плоские интерфейсы и хочется добавить в проект немного «жизни» без погружения в дебри написания шейдеров на Skia, AndroidLiquidGlass — отличный кандидат на попробовать. Это тот случай, когда маленькая библиотека может кардинально изменить восприятие продукта пользователем.

Для быстрого старта рекомендую скачать APK демо-приложения, которое автор выложил в репозитории. Один раз потыкать «живые» кнопки полезнее, чем прочитать десяток статей.