3D перетворення і анімація css - урок 4. Управляем м`ячем
Чим же може дійсно вразити CSS? Може вільним вибором значень в залежності від часу? По зображенню, яке йде першим до даного уроку ви напевно зрозуміли що ми будемо створювати сьогодні. Так як мені тема футболу дуже близька, тому я зробив приклад з м`ячем. Ми зробимо так, щоб м`яч стрибав б`ючись об землю і стіни. При цьому ми зробимо так, щоб кожен раз траєкторія відрізнялася від попередньої, по якій проходив м`яч. Цей приклад показує те, які значні можливості є в технології CSS.
Приховані можливості і анімація CSS3
Це 4-й урок, присвячений 3D перетворенням і анімації CSS. Обов`язково подивіться і вивчіть попередні три уроки:
- 3D перетворення і анімація CSS - Урок 1. Обертання
- 3D перетворення і анімація CSS - Урок 2. Карусель новин
- 3D перетворення і анімація CSS - Урок 3. обертається куб
Стрибучий м`яч CSS - Реальний приклад
М`яч, з довільною траєкторією польоту дивіться нижче:
М`яч рухається по траєкторії, яка змінюється час від часу.
Як завжди для тих у кого анімація не підтримується браузером наступне відео:
структура HTML
Дивимося з чого складається структура цієї анімації:
12345 | lt;div id="Stage"gt;lt;div id="Traveler"gt;lt;div id="Bouncer"gt; lt;/divgt;lt;/divgt;lt;/divgt; |
Що у нас є:
- - блок, в якому буде відбуватися анімація.
- - блок, який потрібен щоб рухати м`яч по горизонталі.
- - блок з м`ячем. Також він необхідний для того щоб не тільки відобразити м`яч, але і для завдання обертання м`яча, а також руху по вертикалі.
Всемогутній CSS
Спершу давайте розберемося з ключовими кадрами, тому що вони тут непрості. Вам потрібно зрозуміти де ми рухаємо м`яч по горизонталі, а де по вертикалі. Як і раніше, код не містить префіксів.
Задаємо рух по горизонталі. Для цього ми створили в HTML структурі блок з ідентифікатором traveler:
12345678 | @keyframes travel {from {left: 21px-}to {left: 530px-}} |
Я задав що м`яч буде рухатися з відступом в 21px зліва. Тобто він не стосуватиметься краю і буде створюватися враження, ніби він стосується стіни. Таким же чином він не буде доходити до кінця, тому що ми йому задали 530px, а це на 70px менше всій ширину сцени (але це ще з урахуванням розмірів самого зображення з м`ячем). Таким чином ось її область, в якій він буде рухатися по горизонталі:
Зараз м`яч може рухатися тільки вправо і вліво, і тільки по горизонталі. Як на прикладі нижче:
Анімація не відтворюється? Дивіться короткий ролик нижче того, про що я говорю:
А зараз прийшов час змусити м`яч рухатися ще й по вертикалі. Ось так виглядають ключові кадрі:
12345678910 | @keyframes bounce {from, to {bottom: 0-animation-timing-function: ease-out-}50% {bottom: 310px-animation-timing-function: ease-in-}} |
Ви вже могли помітити, що коли м`яч піднімається і опускається швидкість то підвищується, то зменшується. І в обох випадках по-різному. За це відповідають властивості animation-timing-function. Дана властивість може приймати такі параметри: linear, ease, ease-in, ease-out і ease-in-out. Я перерахував не все, а лише найпростіші. Ви можете поекспериментувати з ними самостійно і побачити як змінюється швидкість руху м`яча.
Для того, щоб зробити анімацію більш реальну додамо обертання м`яча. Використовуємо наступні ключові кадри:
12345678 | @keyframes spin {from {transform: rotate(0)-}to {transform: rotate(360deg)-}} |
І зараз у нас вийшла готова анімація. Вихідний код ви можете завантажити за посиланням нижче.
завантажити
висновок
Ну і як ваші відчуття? Не страшно? # 128578; Сподіваюся я вас переконав в тому, що анімація в CSS може зробити кожен. Потрібно лише бажання і трохи терпіння, тому що не всі вийде з першого разу!
А що буде далі ... А в наступному уроці ми створимо галерею, яка називається «колесо зображень».
Успіхів!
З повагою, Юрій Німець