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

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

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

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

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

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

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

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

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

Автор: Dudley Storey

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

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

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: , ,

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

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

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree