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

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

При проектировании анимации важно учитывать:
- Сколько она будет длиться,
- С какой при этом скоростью будет совершаться анимация,
- С какой скоростью элемент будет начинать и заканчивать эту анимацию.

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

Более динамичная анимация подходит для появления небольших элементов — текстов, списков, карточек или кнопок. Крупные элементы обычно анимируют более плавно. Длительность зависит и от количества пространства, которое займет путь анимации. Высокая скорость больше подходит для микродвижений, потому что чем она выше, тем больше внимания требует и отвлекает от остального контента.

Обозначим сразу, что дистанции движений в веб анимации, как правило, короткие:

• Появление из прозрачности элементов (карточек, списков, картинок)
• Ховер эффекты (анимация при наведении) на кнопках и карточках: увеличение, смещение, смена цвета
• Появление pop-up (напримр, увеличение фотографии)
• Перелистывание в галерее изображений

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

Это средний отрезок значения для анимации большинства элементов. Не слишком быстро и не слишком затянуто. Этого диапазона достаточно, чтобы анимировать текст, появляющиеся плашки и списки, декоративные элементы. Увеличим интервал:

Время в 0,1 секунду воспринимается как мгновение и подходит для небольших элементов и изменений (ховеры, переключение вкладок, пролистывания в галереях), а анимация дольше секунды будет утомлять. Хорошо бы убедиться, что вы не применяете такую анимацию к какому-то важному элементу на странице.

Эти цифры были выявлены в ходе исследования компании Nielsen Norman Group (научно-исследовательская и консалтинговая компания по изучению пользовательского опыта) Модели человеческого процесса (одно из направлений изучения когнитивной психологии)

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

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

• Например, одинаковые элементы будут по-разному двигаться, если у них разная дистанция. При перемещении элемента тот, у которого наименьшая дистанция, остановится первым.

• Элементы разной массы тоже двигаются по-разному. Тот, что больше, будет перемещаться медленнее. Если бы это был физический объект, масса его тела не дала бы ему двигаться быстрее.

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

Сглаживание — главный прием при проектировании анимации. Оно придает естественность, характер и динамику.

Описывают сглаживание обычно с помощью графиков зависимости дистанции элемента (ось y) и времени на ее прохождение (ось x). Если научиться их читать и грамотно составлять, это поможет дизайнеру яснее и проще объяснить разработчику, что от него требуется.

Самое неестественное движение для восприятия — линейное. Представьте себе, что на всем пути анимации скорость элемента не меняется. Как если бы не было силы гравитации и трения. Такая анимация выглядит искусственно и просто неаккуратно.

Есть несколько видов Easing / Сглаживания. Очень полезно будет изучить, в чем заключается суть, и научиться применять их в своих проектах. Вот, как выглядят самые распространенные примеры сглаживания и их графики:

Этот тип сглаживания самый распространенный. Сглаживание Ease-In-Out заключается в плавном ускорении элемента в начале и замедлении в конце пути. Так анимация выглядит наиболее естественно — разгон, движение и остановка.

В этом случае у элемента есть разгон в начале и постоянная скорость анимации. Выглядит такая анимация как старт ракеты.

При таком типе сглаживания у элемента есть ярко выраженное быстрое движение в начале и плавная остановка движения в конце анимации.

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

При столкновении предметы могут отскакивать друг от друга или наоборот, растягивать. В проектировании анимации такие эффекты называется Bounce (отскок) или Elastic (эластичность). Эти эффекты придают движению естественный характер.

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

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

С помощью Кривой Безье составляют графики ускорения элемента. Кривая Безье — это математическая кривая на графике с осями Y (дистанция) и X (скорость). Они отвечают за путь, пройденный элементом в пространстве, и за время, которое на это ушло. Регулируя кривую, можно отрегулировать, насколько быстро какой кусок пути пройдет элемент.

Есть два типа кривых Безье — Квадратичная и Кубическая. Координаты первой и последней точки на них уже определены: они лежат на линии. Остальные точки настраиваются и лежат вне линии. Передвижение точек трансформирует кривую, создавая плавную форму.

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

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

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

easings.net
Тут есть проекты готовых анимаций, они могут пригодиться как готовые примеры с нужными значениями.

На Тильде есть разные виды анимации. Есть продвинутый инструмент в Zero block для дизайнеров, где можно настроить подробную анимацию, и есть обычные блоки, в которых уже предустановлена базовая анимация (Basic animation).

Подробнее об анимации на Тильде можно узнать здесь

Мы хотели дать возможность непрофессиональным в сфере дизайна пользователям добавлять классную анимацию в свои проекты. Поэтому добавили в блоки предустановленную анимацию. И использовали для нее свойства, которые, по нашему мнению, идеально сбалансированы визуально и при этом остаются универсальными. Остается только активировать анимацию для нужного элемента (заголовок, подзаголовок и т.д.) в настройках блока.

Анимация спроектирована нашими дизайнерами, динамика настроена не слишком быстро или медленно, элементы гармонично следуют друг за другом. Разберем, как устроены свойства анимации Тильды, на примере одной из обложек:

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

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

• Первым появляется элемент по центру (заголовок самый крупный, он — ключевой элемент)
  
• За ним — надзаголовок. Он выше, но второстепенный. Его скорость почти в два раза выше.
  
• Кнопка появляется последней, и скорость ее появления быстрее, чем у обоих текстов.

Стиль Easing/Смягчения для всех элементов с предустановленной анимацией одинаковый:

График показывает, что в начале у элементов есть стремительное ускорение, а в конце — медленное угасание скорости.

С помощью хореографии в анимации выстраивается ритм. Это похоже на музыкальный ритм, он задает характер. Что важно — движения в анимации должны четко прослеживаться и не быть монотонными (с одним временным интервалом друг между другом).

Параллельная анимация. Анимация элементов с одной скоростью и временем. Таким образом элементы выглядят как одна группа.

Анимация с задержкой. Когда между появлениями элементов есть небольшая задержка движения и следующий элемент движется чуть быстрее предыдущего. Чтобы элементы все еще оставались частью одной группы, интервал задержки должен быть небольшой (например, 0,3s)

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

Последовательность анимации зависит от значимости элемента: есть равнозначные элементы, и есть ключевые.

На ключевом элементе делают визуальный акцент, а остальные будут максимально унифицированы. Например, заголовок страницы будет главным, а подзаголовки и картинки — второстепенны. Один из способов выделить ключевой элемент — показать заголовок первым, сделать паузу, показать второстепенные элементы с меньшей скоростью.

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

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

Такая анимация не предназначена для привлечения внимания, она только придает динамику во время скролла страницы. Хороший прием для того, чтобы визуально собрать разные элементы в группу — начинать анимацию второго элемента до того, как закончится анимация первого. Например:

Ключевые элементы, наоборот, задают акценты. Такой элемент может быть один или несколько (тогда они собираются в группы). Например, можно сделать яркий крупный заголовок, назначить ему быстрое появление без задержки, но с замедлением движения в конце. Остальные элементы могут появиться плавно и уже после заголовка, с большой задержкой.

Анимация — это инструмент для придания выразительности, расставления акцентов, управления вниманием. Это очень мощный инструмент, который часто используют неумело. При анимации часто есть большой соблазн применить все известные приемы в одном проекте. Как правило выходит плохо — фокус внимания зрителя смещается на движение картинок и текстов, и погрузиться в контент становится очень сложно. Так как же понять, не переборщили ли вы с анимацией?

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

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

Следите за качеством. Если вы добавляете анимацию в проект, важно проследить за тем, чтобы она не тормозила: анимация требует много системных ресурсов, и при сильной нагрузке процессора будет медленно или прерывисто работать. Это не даст никакого вау-эффекта. Поэтому необходимо:

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

Соблюдайте иерархию. Применяйте одинаковую анимацию к элементам одинакового значения на всем сайте. Например:
Одинаковый стиль появления заголовков.
Одинаковый стиль ховеров на сайте (например, появление тени под кнопкой при наведении)

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

Ограниченное количество анимации помогает на начальном этапе не переборщить с анимацией и не запутаться со стилями. Убедитесь, что минимальной анимации на cтранице вам недостаточно, и только после этого пробуйте добавлять еще.

Анимация делает проект интереснее, поддерживает стиль и атмосферу, задает характер, но может и навредить, если не соблюдать основные правила: