Волгатех.Коллектив: Liquid Glass — стекло, иней и узоры времён года

Версия 0.5.3 Волгатех.Коллектива целиком посвящена внешнему виду. В «Настройках» появилась тема «Liquid Glass»: карточки, верхняя панель и меню становятся полупрозрачным стеклом над мягким цветным фоном. Сначала тема появилась в браузерной версии, за четыре дня прошла через несколько вариантов стекла и узоров и затем перешла в приложение для Android. Этот разбор — о том, как она рисуется и как проверяется, что поверх стекла по-прежнему можно читать.

Стекло, которое не мешает читать

Первая версия темы была сдержанной. Каждая страница лежит на своём фоне, который размещается по её положению в окне: на компьютере он тянется без разрыва под меню и панелями, а новая страница выезжает поверх фона, который остаётся на месте. Размытие включено только у выдвижного меню — единственной панели, которая ложится поверх содержимого: размывать ровный градиент дорого для браузера и ничего не меняет на экране. Диалоги и меню остаются непрозрачными, а у карточек убрана тень, которая просвечивала бы сквозь стекло дымкой.

Тому, кто попросил систему уменьшить прозрачность или повысить контрастность, тема сама показывает обычные непрозрачные панели, а переключатель в «Настройках» объясняет почему.

Вторая версия сделала стекло заметным: мягкие пятна цвета за прозрачными панелями, светлая кромка, блик по верхнему краю и тень только снаружи панели. Палитра — деловая: сталь, графит и приглушённый синий фирменного цвета, а не пастельная радуга. Текст на всём этом держит контраст 7:1, а второстепенный — 4,5:1, на любом участке фона. Это проверяет тест: каждый цвет текста сверяется с каждой частью фона.

Сила эффекта

Ползунок «Сила эффекта» плавно ведёт стекло от полной прозрачности к сплошной панели: фон успокаивается, а размытие, кромки, блики и тени гаснут. Панели смешиваются с предварительно умноженной альфой, поэтому тёмная панель на полпути не становится серой. Тесты контрастности прогоняются на пяти значениях ползунка: 100, 75, 50, 25 и 0 %.

Матовое стекло

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

Узор на матовом стекле за несколько итераций прошёл путь от царапин к инею. Сначала это были царапины, прорезанные как канавки — с затенённой стенкой со стороны света и освещённой с противоположной, а при сильном износе — трещины, звездой расходящиеся от края. Затем — гравировка спиралями: логарифмические завитки с равномерным шагом. Затем — иней, как на окне зимой.

Иней как фрактал

Окончательный иней — это снежинки, нарисованные как фрактал. У кристалла шесть одинаковых лучей под 60°, у каждого луча четыре пары ветвей под 60°, короче к концу, и каждая ветвь повторяет то же самое, только меньше, — трижды. Крупные кристаллы растут первыми и с центрами на краях карточки, чаще всего снизу и редко сверху, так что иней наползает от рамы. Мелкие снежинки заполняют оставшееся место — и только там, где помещается целая снежинка, без обрубков лучей.

Главное правило роста позаимствовано у настоящего инея: кристаллы растут в том порядке, в каком росли бы, и ветвь, подошедшая ближе чем на 3 пикселя ко льду другого кристалла, там останавливается. Кристаллы встречаются, не пересекаясь, а середина карточки остаётся самой чистой. Это закреплено тестами: лучи исходят из одного центра под 60°, крупные кристаллы стоят на краю, ветвление уходит не меньше чем на четыре уровня, а лёд разных кристаллов не подходит ближе 3 пикселей.

Узор каждой карточки задаётся её содержимым и при движении ползунка только растёт: ветвь может появиться и удлиниться, но не перескочить на другое место. Поэтому ползунок не перетасовывает картинку, а как будто проматывает время. И контраст проверяется над самым толстым льдом — на прозрачном стекле тоже.

Узор по времени года

Последний шаг превратил иней в один из четырёх узоров, нарисованных одним способом, — тонкими выпуклыми линиями, которые растут с ползунком и не пересекаются:

• осень — кленовые, берёзовые и дубовые листья, скапливающиеся внизу;
• зима — фрактальный иней;
• весна — луг из ромашек, цветов и тюльпанов;
• лето — школьники с рюкзаками на самокатах.

Узор выбирается по дате или вручную, а ползунок под ним называется по узору: «Листья», «Иней», «Цветы», «Самокаты». Сохранённая сила узора осталась под прежним ключом настроек, так что ничья настройка не потерялась.

Выводы

1. Декоративная тема проверяется так же строго, как функциональность: контраст текста — на каждом участке фона, при каждой силе эффекта и над самым толстым льдом.
2. Прозрачность — не для всех. Настройки системы «уменьшить прозрачность» и «повысить контрастность» выигрывают у темы автоматически.
3. Эффект стоит тратить там, где он виден: размытие ровного градиента стоит ресурсов и ничего не показывает.
4. Процедурный узор выглядит естественно, если растёт по правилам природы: по порядку и с остановкой у чужого льда — тогда кристаллы встречаются, а не накладываются.
5. Узор, заданный содержимым карточки и только растущий, превращает ползунок в ось времени, а не в генератор случайных картинок.

Доступность

Тема включается в «Настройках» → «Тема оформления» → «Liquid Glass» — в приложении для Android начиная с версии 0.5.3 и в браузерной версии.

• Браузерная версия: konkin-nikita.ru/volgatech.corp
• APK для Android: github.com/nikita-konkin/volgatech.corp/releases
• Исходный код: github.com/nikita-konkin/volgatech.corp