Базовые навыки CSS анимации: гравитация, сжатие и растяжение

Базовые навыки CSS анимации: гравитация, сжатие и растяжение

От автора: В одной из предыдущих статей я говорил об использовании свойств ease-in и ease-out для улучшения анимационного дизайна (motion design). Данные свойства можно также назвать силой трения и инерцией, и оба они связаны с гравитацией.

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

А теперь добавляем CSS, задающий движение для мяча. Некоторые значения были позаимствованы из работы Алби Браун (Albie Brown). Для наглядности стили приводятся без вендорных префиксов:

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

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

Сама по себе данная анимация создает иллюзию гравитации, но не является завершенным эффектом: мягкий объект, например, резиновый мяч, будет немного сжиматься при ударе о землю, а также растягиваться (восстанавливать форму) при отскоке. Американский художник-мультипликатор Уолт Дисней говорил, что подобное движение, т.е. сжатие и растяжение, является «самым важным принципом в анимации». Художники используют данный принцип, чтобы придать своим персонажам и объектам больше жизни и реалистичности. Это легко можно сделать с помощью CSS. Нужно добавить функцию scale для свойства transform, которое уже присутствует в нашей анимации:

То, насколько будут меняться параметры для сжатия и растяжения, частично зависит от самого объекта и частично от стиля анимации: в некоторых аниме, например, могут задаваться предельные значения. Конечно, у данной анимации есть еще одна нереалистичная особенность: она продолжается бесконечно. В дальнейшем я расскажу, как добавить естественное затухание для ваших анимационных дизайнов в CSS.

Посмотрите демо-пример данного эффекта на CodePen

Автор: Dudley Storey

Источник: //demosthenes.info/

Редакция: Команда webformyself.

Метки: , ,

Похожие статьи:

Комментарии Вконтакте: