3D преобразования и анимация CSS — Урок 4. Управляем мячом

3D преобразования и анимация CSS3 — Урок 4. Управляем мячом

Чем же может действительно впечатлить CSS? Может произвольным выбором значений в зависимости от времени? По изображению, которое идет первым к данному уроку вы наверняка поняли что мы будем создавать сегодня. Так как мне тема футбола очень близка, поэтому я сделал пример с мячом. Мы сделаем так, чтобы мяч прыгал ударяясь о землю и стены. При этом мы сделаем так, чтобы каждый раз траектория отличалась от предыдущей, по которой проходил мяч. Этот пример показывает то, какие внушительные возможности есть в технологии CSS.

Скрытые возможности и анимация CSS3

Это 4-й урок, посвященный 3D преобразованиям и анимации CSS. Обязательно посмотрите и изучите предыдущие три урока:

  • 3D преобразования и анимация CSS — Урок 1. Вращение
  • 3D преобразования и анимация CSS — Урок 2. Карусель новостей
  • 3D преобразования и анимация CSS — Урок 3. Вращающийся куб

Прыгающий мяч CSS Реальный пример

Мяч, с произвольной траекторией полета смотрите ниже:

Мяч двигается по траектории, которая меняется время от времени.

Как обычно для тех у кого анимация не поддерживается браузером следующее видео:

Структура HTML

Смотрим из чего состоит структура этой анимации:

1 2 3 4 5 &lt,div id=stage&gt, &lt,div id=traveler&gt, &lt,div id=bouncer&gt,&lt,/div&gt, &lt,/div&gt, &lt,/div&gt,

Что у нас есть:

  • &lt,div id=stage&gt, блок, в котором будет происходить анимация.
  • &lt,div id=traveler&gt, блок, который нужен чтобы двигать мяч по горизонтали.
  • &lt,div id=bouncer&gt, блок с мячом. Также он необходим для того чтобы не только отобразить мяч, но и для задания вращения мяча, а также движения по вертикали.

Всемогущий CSS

Сперва давайте разберемся с ключевыми кадрами, потому что они здесь непростые. Вам нужно понять где мы двигаем мяч по горизонтали, а где по вертикали. Как и раньше, код не содержит префиксов.

Задаем движение по горизонтали. Для этого мы создали в HTML структуре блок с идентификатором traveler:

1 2 3 4 5 6 7 8 @keyframes travel { from left: 21px, to left: 530px,

Я задал что мяч будет двигаться с отступом в 21px слева. То есть он не будет касаться края и будет создаваться впечатление, будто он касается стены. Таким же образом он не будет доходить до конца, потому что мы ему задали 530px, а это на 70px меньше всей ширины сцены (но это еще с учетом размеров самого изображения с мячом). Таким образом вот его область, в которой он будет двигаться по горизонтали:

Пространство по горизонтали

Сейчас мяч может двигаться только вправо и влево, и только по горизонтали. Как на примере ниже:

Анимация не воспроизводится? Смотрите короткий ролик ниже того, о чем я говорю:

А сейчас пришло время заставить мяч двигаться еще и по вертикали. Вот так выглядят ключевые кадры:

1 2 3 4 5 6 7 8 9 10 @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. Я перечислил не все, а лишь самые простые. Вы можете поэкспериментировать с ними самостоятельно и увидеть как изменяется скорость движения мяча.

Для того, чтобы сделать анимацию более реальную добавим вращение мяча. Используем следующие ключевые кадры:

1 2 3 4 5 6 7 8 @keyframes spin { from transform: rotate0, to transform: rotate360deg,

И сейчас у нас получилась готовая анимация. Исходный код вы можете скачать по ссылке ниже.

Скачать

Вывод

Ну и как ваши ощущения? Не страшно? 🙂 Надеюсь я вас убедил в том, что анимация в CSS может сделать каждый. Нужно лишь желание и немного терпения, потому что не все получится с первого раза!

А что будет дальше А в следующем уроке мы создадим галерею, которая называется колесо изображений.

Рейтинг
( Пока оценок нет )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: