Базові навички CSS-анімації: гравітація, стиск і розтяг

39

Від автора: В одній з попередніх статей я говорив про використання властивостей ease-ease in і 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.3 s 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