От автора: В одной из предыдущих статей я говорил об использовании свойств ease-in и ease-out для улучшения анимационного дизайна (motion design). Данные свойства можно также назвать силой трения и инерцией, и оба они связаны с гравитацией.
Гравитация — это тоже настроение: мрачное, пугающее и унылое или светлое, обворожительное и веселое. Путем воспроизведения данных видов движения с помощью CSS, мы можем оживить интерфейсы наших сайтов интересной анимацией. Простым примером является подпрыгивающий мяч. Его подвижность может быть использована для того, чтобы привлечь внимание пользователя к очень важному сообщению. Разметка состоит из одного элемента div, который оформлен таким образом, чтобы он мог напоминать настоящий мяч:
|
1 2 3 4 5 6 |
#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). Для наглядности стили приводятся без вендорных префиксов:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее|
1 2 3 4 5 6 7 8 |
@keyframes bounce { from, to { transform: translateY(30vh); } 80% { transform: translateY(15vh); } } |
Я использую единицы vw и vh для указания размеров мяча и для его движения, поэтому это будет полностью отзывчивым решением в современных браузерах, без необходимости использования медиа-запросов. Вызываем анимацию для мяча:
|
1 2 3 4 |
#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, которое уже присутствует в нашей анимации:
|
1 2 3 4 5 6 7 8 |
@keyframes bounce { from, to { transform: translateY(30vh) scaleY(.98); } 80% { transform: translateY(15vh) scaleY(1.02); } } |
То, насколько будут меняться параметры для сжатия и растяжения, частично зависит от самого объекта и частично от стиля анимации: в некоторых аниме, например, могут задаваться предельные значения. Конечно, у данной анимации есть еще одна нереалистичная особенность: она продолжается бесконечно. В дальнейшем я расскажу, как добавить естественное затухание для ваших анимационных дизайнов в CSS.
Посмотрите демо-пример данного эффекта на CodePen
Автор: Dudley Storey
Источник: //demosthenes.info/
Редакция: Команда webformyself.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
