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

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

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

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

#redball {
  border-radius: 50%;
  width: 20vw; height: 20vw; 
  background-image: radial-gradient(ellipse farthest-corner at 25% 25%, #f00,#000); 
  margin: 0 auto;
}

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

@keyframes bounce {
 from, to {
   transform: translateY(30vh);
 }
 80% {
   transform: translateY(15vh);
 }
}

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

#redball {
  transform-origin: center bottom;
  animation: bounce 1.3s cubic-bezier(0.30, 2.40, 0.85, 2.50) infinite;
}

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

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

@keyframes bounce {
 from, to {
   transform: translateY(30vh) scaleY(.98);
 }
 80% {
   transform: translateY(15vh) scaleY(1.02);
 }
}

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

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

Автор: Dudley Storey

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

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

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

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

Получить

Метки: , ,

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree