Базовая теория веб анимации
Анимация как правило ассоциируется с мультипликацией или созданием видео. В веб-среде тоже есть понятие анимации. Элементы на странице могут менять положение, прозрачность, форму, размеры и так далее.
Есть функциональная анимация — она помогает взаимодействовать с интерфейсом, делая его более интуитивным. Такая анимация применяется в интерфейсах продуктов и мобильных приложений. И есть декоративная анимация — она применяется в основном на лендингах или в спецпроектах и служит для привлечения внимания зрителя, делает проект интереснее и помогает вызвать определенные эмоции.
Остановимся на последнем типе. В этой статье мы расскажем, что входит в проектирование веб-анимации:
Скорость анимации
Easing. Cглаживание анимации
Кривые Безье
Как устроена анимация в Тильде
Хореография
Равнозначные и ключевые элементы
Баланс анимации
Закрепим основные правила
Скорость в анимации
Скорость анимации — это отношение пройденной элементом дистанции ко времени. В понятие скорости входят и все ее изменения на старте и финише. Это одна из ключевых составляющих анимации, она отвечает за общую динамику и настроение. Создание анимации — довольно творческий процесс, и вы тут становитесь режиссером.
При проектировании анимации важно учитывать:
- Сколько она будет длиться,
- С какой при этом скоростью будет совершаться анимация,
- С какой скоростью элемент будет начинать и заканчивать эту анимацию.
Длительность анимации
Какую длительность выбрать, чтобы получилось классно? Точного ответа нет. Важно не заставлять пользователя ожидать развязки действия, но и не делать анимацию слишком быстрой. Зритель должен успеть понять, откуда элемент появился на экране и как попал на новое место. В целом анимация должна восприниматься естественно.
Более динамичная анимация подходит для появления небольших элементов — текстов, списков, карточек или кнопок. Крупные элементы обычно анимируют более плавно. Длительность зависит и от количества пространства, которое займет путь анимации. Высокая скорость больше подходит для микродвижений, потому что чем она выше, тем больше внимания требует и отвлекает от остального контента.
Как выбрать скорость анимации. Дистанция пути и размер элемента
Обозначим сразу, что дистанции движений в веб анимации, как правило, короткие:
- Появление из прозрачности элементов (карточек, списков, картинок)
- Ховер эффекты (анимация при наведении) на кнопках и карточках: увеличение, смещение, смена цвета
- Появление pop-up (напримр, увеличение фотографии)
- Перелистывание в галерее изображений
Несмотря на то, что параметры анимации зависят от задач проекта, существуют универсальные значения скорости. В этих рамках анимация наиболее комфортна для восприятия — скорее всего, вы не промахнетесь.
Это средний отрезок значения для анимации большинства элементов. Не слишком быстро и не слишком затянуто. Этого диапазона достаточно, чтобы анимировать текст, появляющиеся плашки и списки, декоративные элементы. Увеличим интервал:
Время в 0,1 секунду воспринимается как мгновение и подходит для небольших элементов и изменений (ховеры, переключение вкладок, пролистывания в галереях), а анимация дольше секунды будет утомлять. Хорошо бы убедиться, что вы не применяете такую анимацию к какому-то важному элементу на странице.
Эти цифры были выявлены в ходе исследования компании Nielsen Norman Group (научно-исследовательская и консалтинговая компания по изучению пользовательского опыта) Модели человеческого процесса (одно из направлений изучения когнитивной психологии)
Физические свойства элементов
Когда свойства анимированного элемента похожи на свойства физических объектов, они воспринимаются естественно. Такая анимация более предсказуема, поэтому не вызывает дискомфорта.
Она помогает вызвать у пользователя определенные ассоциации и эмоции, которые уже знакомы человеку. Один из главных способов добиться естественности — представить себе, как повел бы себя физический объект, двигаясь так же, как ваша анимация. Как это влияет на скорость?
- Например, одинаковые элементы будут по-разному двигаться, если у них разная дистанция. При перемещении элемента тот, у которого наименьшая дистанция, остановится первым.
- Элементы разной массы тоже двигаются по-разному. Тот, что больше, будет перемещаться медленнее. Если бы это был физический объект, масса его тела не дала бы ему двигаться быстрее.
Эти правила тесно связаны с нашим восприятием. Важно вспомнить, что физические объекты всегда имеют старт и конец движения. В какой-то момент они ускоряются (например на старте, если был толчок), в какой-то момент замедляют скорость (в конце пути). В веб-анимации эти свойства передают с помощью Easing или Сглаживания.
Easing. Сглаживание анимации
Easing — переводится как «Сглаживание» или «Ослабление», это изменение скорости движения элемента в рамках одной анимации — замедление или ускорение.
Сглаживание — главный прием при проектировании анимации. Оно придает естественность, характер и динамику.
Описывают сглаживание обычно с помощью графиков зависимости дистанции элемента (ось y) и времени на ее прохождение (ось x). Если научиться их читать и грамотно составлять, это поможет дизайнеру яснее и проще объяснить разработчику, что от него требуется.
Самое неестественное движение для восприятия — линейное. Представьте себе, что на всем пути анимации скорость элемента не меняется. Как если бы не было силы гравитации и трения. Такая анимация выглядит искусственно и просто неаккуратно.
Есть несколько видов Easing / Сглаживания. Очень полезно будет изучить, в чем заключается суть, и научиться применять их в своих проектах. Вот, как выглядят самые распространенные примеры сглаживания и их графики:
Сглаживание Ease-In-Out
Этот тип сглаживания самый распространенный. Сглаживание Ease-In-Out заключается в плавном ускорении элемента в начале и замедлении в конце пути. Так анимация выглядит наиболее естественно — разгон, движение и остановка.
Сглаживание в начале анимации (Ease-In)
В этом случае у элемента есть разгон в начале и постоянная скорость анимации. Выглядит такая анимация как старт ракеты.
Сглаживание в конце анимации (Ease-Out)
При таком типе сглаживания у элемента есть ярко выраженное быстрое движение в начале и плавная остановка движения в конце анимации.
Несимметричное сглаживание
Несимметричное сглаживание позволяет применить более тонкие настройки для точной передачи физических свойств. В этом случае точки ускорения и замедления имеют свою динамику, и графики с кривыми анимации могут выглядеть совершенно по-разному. Например, у элемента может быть плавное ускорение в начале и быстрая остановка анимации в конце.
Отскок (Elastic и Bounce)
При столкновении предметы могут отскакивать друг от друга или наоборот, растягивать. В проектировании анимации такие эффекты называется Bounce (отскок) или Elastic (эластичность). Эти эффекты придают движению естественный характер.
Амплитуда движения зависит от общей задумки проекта. При проектировании, сравните ваш элемент с каким-то предметом, чтобы понять, как именно выстроить анимацию. Если хочется добиться эффекта прыжков легкого мягкого мячика, то ускорение будет плавным, а отскок от поверхности — довольно большим. Если представить, что падает металлический шарик, он будет падать более стремительно, а отскок будет еле заметный.
Сглаживание анимации, отскок, скорость — все это в сумме создает определенную динамику. Научившись пользоваться этими инструментами, вы поймете, как задать нужный характер вашей анимации.
Кривые Безье. Как читать и понимать графики
С помощью Кривой Безье составляют графики ускорения элемента. Кривая Безье — это математическая кривая на графике с осями Y (дистанция) и X (скорость). Они отвечают за путь, пройденный элементом в пространстве, и за время, которое на это ушло. Регулируя кривую, можно отрегулировать, насколько быстро какой кусок пути пройдет элемент.
Есть два типа кривых Безье — Квадратичная и Кубическая. Координаты первой и последней точки на них уже определены: они лежат на линии. Остальные точки настраиваются и лежат вне линии. Передвижение точек трансформирует кривую, создавая плавную форму.
Научимся читать графики
Чтобы научиться читать графики, понять, как углы изгиба на кривой показывают динамику движения, нарисуем похожие графики, но с небольшими отличиями.
Разберемся о чем нам может рассказать этот график
- Кривая начинает движение вверх из нижнего левого угла.
- Если внимательно посмотреть на отметки времени и дистанции, можно увидеть, что элемент ускоряется. Линия пологая, и это значит, что за первые два промежутка времени элемент почти не проходит никакого расстояния.
- Посередине графика видно, как элемент преодолевает почти все отведенное ему расстояние за очень короткий промежуток времени.
- На последнем отрезке элемент замедляется так же медленно, как и ускорялся в начале.
- Ускорение элемента продолжается дольше, чем на предыдущем графике,
- Посередине пути элемент ускоряется,
- В конце резко замедляет ход.
Экспериментируйте
Нет универсальных значений для точек на кривой, которые бы сделали классную анимацию. Здесь важно экспериментировать и опытным путем выяснять, какая динамика движения подходит для каждого случая. Когда вы научились читать графики, вы можете более профессионально использовать эти знания. Для удобства существуют сервисы, которые помогают дизайнерам визуализировать анимацию:
cubic-bezier
В нем можно подвигать кривую и воспроизвести ее настройки, а нужный результат сохранить. Чтобы было проще передать проект анимации в разработку, можно скопировать значения точек координат и поделиться с разработчиком.
easings.net
Тут есть проекты готовых анимаций, они могут пригодиться как готовые примеры с нужными значениями.