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

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

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

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

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

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

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

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

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

Структура HTML

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

1
2
3
4
5

<div id="stage"> 
    <div id="traveler">
        <div id="bouncer"></div>
    </div>
</div>

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

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

Всемогущий 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: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

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

Скачать

Вывод

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

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

Успехов!

С Уважением, Юрий Немец