3D перетворення і анімація css - урок 4. Управляем м`ячем

3D перетворення і анімація CSS3 - Урок 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 може зробити кожен. Потрібно лише бажання і трохи терпіння, тому що не всі вийде з першого разу!

А що буде далі ... А в наступному уроці ми створимо галерею, яка називається «колесо зображень».

Успіхів!

З повагою, Юрій Німець

Поділися в соц мережах:
Cхоже

Увага, тільки СЬОГОДНІ!