БАЗОВАЯ ТЕОРИЯ ВЕБ-АНИМАЦИИ
СТАТЬЯ
Анимация как правило ассоциируется с мультипликацией или созданием видео. В веб-среде тоже есть понятие анимации. Элементы на странице могут менять положение, прозрачность, форму, размеры и так далее.
Есть функциональная анимация — она помогает взаимодействовать с интерфейсом, делая его более интуитивным. Такая анимация применяется в интерфейсах продуктов и мобильных приложений. И есть декоративная анимация — она применяется в основном на лендингах или в спецпроектах и служит для привлечения внимания зрителя, делает проект интереснее и помогает вызвать определенные эмоции.
Остановимся на последнем типе. В этой статье мы расскажем, что входит в проектирование веб-анимации:

Скорость в анимации

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

Длительность анимации

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

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

Как выбрать скорость анимации. Дистанция пути и размер элемента

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

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

Несмотря на то, что параметры анимации зависят от задач проекта, существуют универсальные значения скорости. В этих рамках анимация наиболее комфортна для восприятия — скорее всего, вы не промахнетесь.
0,2 — 0,5 с. (200 - 500 мс.)
Длительность появления — 0,2 секунды
Длительность появления — 0,5 секунд
Это средний отрезок значения для анимации большинства элементов. Не слишком быстро и не слишком затянуто. Этого диапазона достаточно, чтобы анимировать текст, появляющиеся плашки и списки, декоративные элементы. Увеличим интервал:
0,1 — 1 с. (100 - 1000 мс.)
HELLO
HELLO
Движение за 0,1 секунды
Движение за 1 секунду
Наведите на кнопку
Время в 0,1 секунду воспринимается как мгновение и подходит для небольших элементов и изменений (ховеры, переключение вкладок, пролистывания в галереях), а анимация дольше секунды будет утомлять. Хорошо бы убедиться, что вы не применяете такую анимацию к какому-то важному элементу на странице.

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

Физические свойства элементов

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

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

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

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

Easing. Сглаживание анимации

Easing — переводится как «Сглаживание» или «Ослабление», это изменение скорости движения элемента в рамках одной анимации — замедление или ускорение.
Сглаживание — главный прием при проектировании анимации. Оно придает естественность, характер и динамику.

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

Самое неестественное движение для восприятия — линейное. Представьте себе, что на всем пути анимации скорость элемента не меняется. Как если бы не было силы гравитации и трения. Такая анимация выглядит искусственно и просто неаккуратно.
Пример анимации элемента без эффекта сглаживания. На протяжении всего движения скорость элемента не меняется.
График, который описывает движение без эффекта сглаивания.
Есть несколько видов Easing / Сглаживания. Очень полезно будет изучить, в чем заключается суть, и научиться применять их в своих проектах. Вот, как выглядят самые распространенные примеры сглаживания и их графики:

Сглаживание Ease-In-Out

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

Сглаживание в начале анимации (Ease-In)

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

Сглаживание в конце анимации (Ease-Out)

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

Несимметричное сглаживание

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

Отскок (Elastic и Bounce)

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

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

Кривые Безье. Как читать и понимать графики

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

Есть два типа кривых Безье — Квадратичная и Кубическая. Координаты первой и последней точки на них уже определены: они лежат на линии. Остальные точки настраиваются и лежат вне линии. Передвижение точек трансформирует кривую, создавая плавную форму.
Квадратичная линия Безье, строится из трех точек. Это значит, что в анимации будет сглаживание либо в начале, либо в конце (Ease-In или Ease-Out)
Кубическая линия Безье, строится из четырех точек. Поэтому можно настроить сглаживание и в начале, и в конце анимации.

Научимся читать графики

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

  • Кривая начинает движение вверх из нижнего левого угла.
  • Если внимательно посмотреть на отметки времени и дистанции, можно увидеть, что элемент ускоряется. Линия пологая, и это значит, что за первые два промежутка времени элемент почти не проходит никакого расстояния.
  • Посередине графика видно, как элемент преодолевает почти все отведенное ему расстояние за очень короткий промежуток времени.
  • На последнем отрезке элемент замедляется так же медленно, как и ускорялся в начале.
2
Почти линейное движение элемента
15
На втором графике
  • Ускорение элемента продолжается дольше, чем на предыдущем графике,
  • Посередине пути элемент ускоряется,
  • В конце резко замедляет ход.

Экспериментируйте

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

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

Разбираем предустановленные эффекты анимации в Тильде

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

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

Анимация спроектирована нашими дизайнерами, динамика настроена не слишком быстро или медленно, элементы гармонично следуют друг за другом. Разберем, как устроены свойства анимации Тильды, на примере одной из обложек:
Пример предустановленной анимации в Обложке CR17. Стиль анимации элементов — Fade in Up / Появление снизу
В примере всем элементам мы назначили одинаковый стиль анимации — появление снизу — для того, чтобы нагляднее рассмотреть динамику.
Появляется заголовок
    Появляется надзаголовок
      Кнопка
        • Стиль - Fadein-Up
        • Delay Задержка анимации — 0s
        • Duration Продолжительность — 1.2s
        • Анимация Ease In Out
        • Distance Дистанция появления 100px
        • Стиль - Fadein-Up
        • Delay Задержка анимации - 0.3s
        • Duration Продолжительность 0,7s
        • Анимация Ease In Out
        • Distance Дистанция появления 100px
        • Стиль - Fadein-Up
        • Duration - 1s
        • Delay — 0.8s
        • Анимация Ease In Out
        • Distance Дистанция появления 100px
        Мы уделили внимание проработке того, с какой скоростью элементы будут появляться друг за другом, с какой задержкой и с каким смещением. Если присмотреться к значениям, в обложке, можно увидеть, что:

        • Первым появляется элемент по центру (заголовок самый крупный, он — ключевой элемент)
        • За ним — надзаголовок. Он выше, но второстепенный. Его скорость почти в два раза выше.
        • Кнопка появляется последней, и скорость ее появления быстрее, чем у обоих текстов.
        Стиль Easing/Смягчения для всех элементов с предустановленной анимацией одинаковый:
        График базовой анимации для блоков Тильды. Значение Easing — 0.19, 1, 0.22, 11.
        График показывает, что в начале у элементов есть стремительное ускорение, а в конце — медленное угасание скорости.

        Хореография

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

        Последовательность анимации

        Параллельная анимация. Анимация элементов с одной скоростью и временем. Таким образом элементы выглядят как одна группа.
        Тайский массаж
        Санкт-Петербург, Воронежская улица, 18
        Мы открыты с 10:00 до 24:00
        Пример появления заголовка и описания в обложке одновременно
        Анимация с задержкой. Когда между появлениями элементов есть небольшая задержка движения и следующий элемент движется чуть быстрее предыдущего. Чтобы элементы все еще оставались частью одной группы, интервал задержки должен быть небольшой (например, 0,3s)
        Тайский массаж
        Санкт-Петербург, Воронежская улица, 18
        Мы открыты с 10:00 до 24:00
        Пример появления элементов в обложке с задержкой
        Группирование элементов. Можно собирать элементы в группы и комбинировать параллельную анимацию и анимацию с задержкой. Например, в заголовочном комплексе показывать одновременно все тексты, а с задержкой только кнопки.
        Кулинарный мастер-класс
        «Итальянская кухня»
        На нашем мастер-классе вы самостоятельно приготовите 3 аутентичных блюда итальянской кухни с помощью шеф-повара из Италии и лучших продуктов
        16 августа 12:00
        Кулинарная студия «Pesto»
        4500 рублей
        Пример группирования элементов в обложке с задержкой и разной скоростью движения элементов
        Последовательность анимации зависит от значимости элемента: есть равнозначные элементы, и есть ключевые.

        Равнозначные и ключевые элементы

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

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

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

        • 1 карточка Delay - 0,32s
        • 2 карточка Delay - 0,48s
        • 3 карточка Delay - 0,64s
        • Ease In Out — 19, 1, 22, 11
        Ключевые элементы
        Ключевые элементы, наоборот, задают акценты. Такой элемент может быть один или несколько (тогда они собираются в группы). Например, можно сделать яркий крупный заголовок, назначить ему быстрое появление без задержки, но с замедлением движения в конце. Остальные элементы могут появиться плавно и уже после заголовка, с большой задержкой.
        Biography
        Personas
        HEBERT
        INTERVIEW
        Timeline
        JULIEN
        All interviews

        Адекватность анимации

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

        Баланс анимации

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

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

        Закрепим основные правила

        Анимация делает проект интереснее, поддерживает стиль и атмосферу, задает характер, но может и навредить, если не соблюдать основные правила:
        1
        Не анимируйте слишком много элементов. Выберите для начала какой-то один.
        2
        Не применяйте много разных эффектов. Выберите два, а дополнительные приемы используйте в конце.
        3
        Анимируйте элементы одного уровня и назначения в одном стиле.
        4
        Следите, чтобы анимация не была слишком быстрой или затянутой.
        5
        Используйте Easing (Сглаживание), проводите ассоциацию с движением физического объекта при планировании анимации.
        6
        Уделяйте внимание хореографии: для анимации с ключевыми элементами придумывайте ритм. Элементы одного назначения (списки, колонки, фото в галерее), наоборот, анимируйте друг за другом одинаково, одновременно или с маленькой задержкой.
        7
        Заменяйте одновременную анимацию элементов на последовательную с небольшой задержкой, где это возможно. Это облегчит нагрузку на страницу.
        8
        Не загружайте тяжелые изображения. Это тоже поможет при загрузке и анимации, и самих изображений на странице.
        9
        Проверяйте анимацию на маломощных компьютерах и при медленном соединении с интернетом.
        Куратор проекта: Никита Обухов
        Текст, дизайн и верстка: Яна Плющева
        Иллюстрации: Роман Косов, Яна Плющева