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




Итак, вы хотите сделать интерфейс более интерактивным и добавить в него анимацию. 


 

(Скачать эту анимацию можно здесь)

При этом вы хотите, чтобы она мало весила, не сказывалась на производительности и была хорошего качества.

Отсюда мы получаем, что это должна быть векторная графика, а не растровая (gif, mp4).

На момент 2022 года популярность всё ещё набирает Lottie — анимация для SVG, хранящаяся в JSON. Её главные преимущества — огромные возможности по масштабированию без какой бы то ни было потери качества, лёгкость встраивания, потрясающая плавность и кроссплатформенность (iOS и. Android тоже).

 

Где взять Lottie

  1. Сделать самому (это пока не рассматриваем)
  2. Скачать бесплатно или платно на LottieFiles или стоках (куча бесплатной анимации есть именно на LottieFiles)
    Каталог анимаций для сайта
    Каталог анимаций для сайта

Как встроить Lottie на сайт

Чтобы анимация Lottie могла работать на сайте, вы можете пойти двумя путями:

  1. Использовать их WebPlayer— формируйте скрипт в сервисе и вставляйте его в сайт. Это очень просто
  2. Установить их плеер себе на сервер — вариант для продвинутых. Ссылка на Git здесь.

Как использовать плеер LottieFiles

Настройка анимации
Настройка анимации
  1. В плеер Лотти вам надо вставить ссылку на файл json. Если вы выбрали анимацию из каталога LottieFiles, он сдеает это за вас. Вам нужно лишь выбрать HTML:
    Способы подключения
    Где можно использовать Lottie
  2. Указать параметры (либо ничего не менять)
  3. Скопировать в нижней части код (есть кнопка Copy Code)
  4. Скопированный код разместите в любой html документ

Доступные настройки

Play mode — режим проигрывания. В Normal анимация проигрывается от начала к концу. В Bounce, если выбран режим Forward, анимация проигрывается по циклу от начала к концу, а потом в обратном направлении — от конца к началу. Но вы не увидите разницы, если отжат чекбокс Loop и анимация проигрывается 1 раз.

Direction — направление анимации. Forward — вперед (обычное), Backward — от конца к началу. Работает даже при одиночном проигрывании.

Background color — цвет фона. Transparent — прозрачный. Вы также можете выбрать один из предустановленных вариантов, либо задать цвет в формате hex.

Width/Height — ширина и высота соответственно в пикселях.

Animation speed — скорость проигрывания. Не влияет на плавность движения, в отличие от тех же Gif.


Controls — показывать или нет таймлайн, кнопку паузы и стоп. Органы управления, если в общем.

Autoplay — проигрывать ли анимацию сразу после загрузки.

Loop — зациклить ли анимацию (и повторять более одного раза)

Hover — проигрывать анимацию только при наведении на нее курсора

 

 

 

Стоит понимать, что хоть Lottie и легкая анимация, она всё равно создает дополнительную нагрузку. Не добавляйте на одну страницу десятки анимаций с автопроигрыванием.

Интерактивность

Lottie может довольно гибко реагировать на действия пользователя — например, можно привязать таймлайн к скроллу. Это довольно сложная история, которую мы разберем позже отдельно.

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


По теме:


Бесплатные иконки

Векторные и растровые иконки, бесплатные для коммерческого использования

Анимированные SVG иконки Изометрические иконки