Как добавить анимацию на сайт и не облажаться
В редизайне сайта RBK.money мы использовали многослойные сюжетные анимации. У нас получился яркий сайт, наполненный плавным движением, о котором мы рассказали в кейсе. Наш разработчик Алексей написал полезную статью про тонкости работы со сложной веб-анимацией.
Методы и ограничения
Анимации в вебе — это сложно. Ограничения старых браузеров накладываются на слабые пользовательские устройства, плохой интернет и вспышки на солнце. При разработке нужно учитывать миллиард нюансов, для того чтобы всё заработало именно на устройстве пользователя.
Показать анимацию на экране пользователя можно несколькими методами.
Видео. Много весит и в нём сложно настроить бесшовное воспроизведение. Видео подходит для коротких анимаций, которые не перегружают сайт.
GIF-анимации. Они распространены, но ради уменьшения веса разработчики жертвуют полнотой цветовой палитры. Иначе такие анимации весят слишком много, даже больше видео.
Набор последовательно переключающихся картинок, они же — секвенции. Грубо говоря, это видео без сжатия кадров, которое также много весит и замедляет работу браузера.
Анимированные вручную html-элементы или svg. Требуют сложного процесса разработки.
Недостатки этих методов ограничивают. Приходится выбирать: делать примитивную анимацию или добавить сложную и забыть о комфорте пользователей. Нас не устраивает ни один из этих вариантов.
Чтобы воплощать на сайтах все наши задумки, требовался новый инструмент, который снимет ограничения. О нём мы расскажем подробнее.
Библиотека Lottie
В одном из проектов мы использовали библиотеку Lottie от Airbnb. С ней можно переносить анимации на страницы браузера прямо из After Effects. Библиотека оказалась очень полезной, потому что мы как раз создавали сайт с многослойной анимацией для RBK.money.
С Lottie мы смогли добавлять на сайты сложные анимации и не думать о их размерах.
На главную страницу сайта RBK.money мы добавили зацикленный ролик длиной 15 секунд, который весит всего 65 КБ в сжатом состоянии. У нас получились плавные анимации, которые быстро загружаются и воспроизводятся без стыковок.
Преимущества
Преимущества Lottie — меньший вес и адаптивность. Библиотека работает с векторной отрисовкой. Это означает, что не придётся готовить отдельные изображения для экранов с разным разрешением.
В Lottie можно управлять анимацией — настроить воспроизведение при нажатии на триггер или интерактивную анимацию, которая следует за движением курсора.
Аниматор работает с привычными инструментами и экспортирует результат с помощью плагина в формат json. Разработчику остается только подключить этот json к сайту и настроить его воспроизведение.
Недостатки
Библиотека рендерит анимацию либо в svg, либо в canvas. У формата svg можно настраивать прозрачность, но он сильно загружает процессор из-за постоянной прорисовки html-контента страницы. Поэтому, когда мы добавили многослойные анимации на сайт RBK.money, кулеры наших компьютеров перешли в режим турбины. Пришлось переделать всё в canvas. В нём не настраивается прозрачность, зато нагрузка на процессор ниже.
Иногда Lottie преподносит неприятные сюрпризы. Особенно после обновлений, которые иногда нарушают работу готовых анимаций. Создатели Lottie быстро приходят на помощь и решают проблему вместе с пользователями.
Из-за разных языков программирования некоторые инструменты After Effects не работают с Lottie. Поэтому при создании анимаций на сайте RBK.money мы отказались от «паппетов» — инструментов для плавного движения анимации. Пришлось всё делать вручную и это заняло довольно много времени.
Что получилось
Мы сделали необычный и запоминающийся сайт с плавными анимациями. Анимации, сделанные в Lottie, не увеличили время загрузки страниц.
За дизайн сайта RBK.money мы получили награды:
Tagline Awards 2019
Серебро. Лучшая B2B-кампания.
Рейтинг Рунета 2019
Серебро. Финансы, инвестиции, банки.
CSS Design Awards 2019
Special Kudos / UI Design / UX Design / Innovation.
Awwwards 2019
Honorable Mention.