Анимированный AT-AT Walker из Звездных войн на чистом CSS3

Веб разработка - CSS

Нашел на днях интересный пример использования CSS3 и решил поделиться им с сообществом. Примеры сделаны для движка webkit, но все должно работать и в других браузерах, поддерживающих css3.

В этой статье мы рассмотрим, как можно сделать AT-AT Walker из V эпизода Звездных войн с помощью CSS3 анимации. Начнем с обзора тех свойств CSS3, которые делают эту анимацию возможной. Затем рассмотрим список частей AT-AT и CSS код для движения каждой части.

Итак, рассмотрим нужные нам свойства CSS3:

TRANSFORM: TRANSLATE(X Y) ROTATE(X)

Это CSS3 свойство преобразования превосходно говорит о себе само. Translate позволяет передвинуть объект вправо, влево, вверх и вниз, а rotate - повернуть его.

@-KEYFRAMES ‘ANIMATION-NAME’

1. @-webkit-keyframes 'bounce' {0 {top: 20px;}2. 40% {top: 0;}3. 60% {top: 20px;}4. 100% {top: 0}5. }6. #ball:hover {7. - webkit-animation-name: bounce;8. - webkit-animation-duration: 4s;9. - webkit-animation-iteration-count: infinite;10. }

Функция-свойство keyframes позволяет нам определить ключевые кадры и время их показа. Сейчас я расскажу о том как работает свойство keyframes, объясню, как код выше реализует анимацию подпрыгивания .

В начале (0%) функция перемещает объект на 20px от верха. В 40% происходит перемещение его вверх к 0px. В 60% объект снова опускается на 20px. В конце анимации (100%) объект возвращается на исходную позицию 0px. Во втором селекторе мы применяем эту анимацию к элементу #ball, когда над ним есть курсор.

Когда пользователь наводит курсор на ссылку с id= ball , она начинает подпрыгивать. Продолжительность анимации 4 секунды. Это означает что от 0% до 100% анимации пройдет 4 секунды. Анимация запускается в бесконечном цикле. Но если мы вдруг захотим чтобы шарик подпрыгнул пару раз и остановился, можно установить свойство webkit-animation-iteration равным 1.

TRANSFORM-ORIGIN: X Y

Это очень важное для анимации свойство. Оно позволяет вам изменить точку, вокруг которой вращается объект.

Рисунок a - ось вращения находиться в центре рисунка руки (красная точка), это ее место по умолчанию. Если мы будем поворачивать руку используя эту ось, рука повернется вокруг центра. Как винты вертолета. Не совсем то что нам надо.
Рисунок b - здесь мы переместили ось вращения в верх рисунка. Теперь, если поворачивать его, то все будет правильно, как и должно быть у висящей руки.

Перейдем к AT-AT, его частям и css3 свойствам примененным к этим частям:

Корпус - это png изображение; ключевые фреймы и анимация вращения согласованны с движением ног. Корпус будет слегка покачиваться, при каждом шаге.

Нога (бедро, колено, голень и ступня) - Анимации ноги - вот основная сложность всего эксперимента. Нога состоит из нескольких div`ов.

1. <div id= leg-a class= background > 2.     <div class= leg-thigh > 3.         <div class= leg-shin >4.             <div class= exo ></div> 5.             <div class= leg-foot ></div> 6.         </div><!-- конец голени --> 7.     </div><!-- конец бедра --> 8. </div>

Расположив div`ы таким образом, мы сможем подражать функционалу скелета.

Кроме такого расположения div`ов, переместим ось вращения из центра div`ов в их верхушки. Это позволит нам создать шарниры или кости. Когда нога шагает вперед, div бедра поворачивается на x градусов вокруг оси вращения, поворачивая так же голень и ступню. Голень, кроме движения вместе с бедром, начинает вращаться вокруг своей оси вращения, поворачивая вместе с собой ступню. И,в свою очередь, ступня, кроме движения вместе с голенью и бедром, вращается вокруг своей оси. Это создает впечатление, что ноги - часть робота

Анимация каждой ноги длиться 8 секунд. Ноги двигаются по очереди. Я разделил анимацию на четыре части. По 25% на каждую ногу. Собственно так AT-AT и двигался в фильме.

(Я приведу CSS код только для одной из частей. Каждая часть ног двигается одним и тем же способом, различаются только углы поворота и время.)

Голова (шея и череп) - здесь очень мало анимации. Череп и шея продолжают броню корпуса AT-AT, поэтому эта часть лишь немного вертится вверх и вниз.

Ну, вот и все. Это основные принципы анимации сей дьявольской военной машины используя css3. Что получилось можно посмотреть тут.

 

---

Читайте:
11 примеров использования CSS3 Создание прототипа с помощью CSS-фреймворка Grid 960 CSS3: Во веки веков! Производительность CSS Expressions Создаем закруглённые уголки с помощью CSS 3

Новые «заплатки» от Adobe Во Flash Player и Adobe Reader найдены новые критические уязвимости, поэтому Adobe пообещала не временить с «заплатками» для Flash Player, Reader и ...

Microsoft сообщила об открытии исходного кода компиляторов Visual Basi В то время как конкурирующие компании анонсируют новые, «более современные» языки программирования, корпорация Microsoft продолжает трудиться над ус...

Google открывает исходный код системы Living Stories В течение последних двух месяцев журналисты из New York Times и Washington Post экспериментировали с Living Story, новым форматом представления ново...

Google I/O: новый Android, Google TV и машинное обучение Несмотря на то, что первый день конференции I/O, проводимой компанией Google для разработчиков, принёс много интересных анонсов, во второй, заключит...

Native Client: одной ногой в офлайне В понедельник в Google Code Blog вышел анонс нового эксперимента веб-гиганта. Технология Native Client призвана ускорить веб-приложения благодаря пр...