Как добавить анимацию на сайт и не облажаться

Тонкости работы со сложной веб-анимацией

В редизайне сайта 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

0
5 комментариев
Станислав Калашников
Ответить
Развернуть ветку
Александр Устинов

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

Ответить
Развернуть ветку
Александр Устинов

На главной странице мы сделали максимально эффектный кейвижуал, передающий основную идею проекта. Поэтому, да, главная действительно демонстрирует слабую скорость загрузки. Однако все остальные решения для отображения этой анимации многократно увеличивают размер страницы или приводят к падению качества визуала. При этом, остальные страницы, на которых нет такой мощной анимации дают результат намного лучше: https://developers.google.com/speed/pagespeed/insights/?hl=RU&url=https%3A%2F%2Frbk.money%2Fsecurity%2F&tab=mobile 

 
Но, мы посмотрели, на 3g интернете на телефоне страница без кэша открывается мгновенно. 

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Александр Устинов

Да, эффекты не поддерживаются. Градиенты работают и маски тоже, в чем вы можете убедиться, посмотрев на наши анимации на сайте rbk.money. Просто скорее всего вы недостаточно хорошо владеете этим инструментом))

Ответить
Развернуть ветку
2 комментария
Раскрывать всегда