OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

OpenStreetBugs — лёгкий способ сообщить об ошибке в OpenStreetMap

Вы, конечно, знаете о свободной карте OpenStreetMap. Это настоящая народная карта, создаваемая такими же людьми как и вы! Это такой же opensource-проект как Linux и как Википедия. Конечно же, как и в других картах, в OpenStreetMap имеются ошибки, но в отличие от тех же Яндекс.Карт, где ошибки не исправляются годами из-за сложной бюрократической процедуры (я уже не говорю о намеренных ошибках), в OpenStreetMap всё гораздо проще и лучше для всех нас...
Подробнее..

CloudMade Navigation поддерживает ограничения манёвров

CloudMade Navigation поддерживает ограничения манёвров

Не так давно CloudMade выделил несколько приоритетных направлений, среди которых оказалась и навигация. Решено было создать специальный проект Navi Studio, который объединял бы в себе несколько более мелких сервисов и позволял пользоваться ими, для создания полноценного навигационного программного обеспечения. В Navi Studio вошли: Работа закипела и уже появилось несколько приложений использующих данный проект. Но полноценной навигации без соблюдения правил ПДД не существует, а потому данному вопросу было также уделено не мало времени...
Подробнее..

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Удали себя из интернет-социума — «Web 2.0 Suicide Machine»

Недавно наткнулся в сети на один занимательный интернет-сервис, именующийся Web 2.0 Suicide machine . Предназначен он для того, чтобы позволить людям, обремененным «социальной жизнью в интернете», в пару кликов удалить свои аккаунты на Facebook (в данный момент сервис блокирован администрацией по IP), Twitter, Linkedin и Myspace. В общем-то судя по количеству положительных отзывов и «успешных очищений» — пипл хавает зависимые от социальных сетей успешно пользуются сервисом и довольны...
Подробнее..




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

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

анимированный at-at walker из звездных войн на чистом css3

Нашел на днях интересный пример использования 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. Что получилось можно посмотреть тут.

 


Читайте:


Добавить комментарий


Защитный код
Обновить

News image

Что такое AJAX API для Google Переводчика?

Благодаря AJAX API для Google Переводчика можно переводить и определять язык блоков текста на веб-странице, используя только JavaScript. Кроме того,...

News image

Gmail Labs: кто выйдет в свет, а кто уйдет в отставку

Мы запустили Gmail Labs более полутора лет назад. Это экспериментальная лаборатория, позволяющая разработчикам предлагать новые функции, а вам – реш...

News image

PDF Metamorphosis .Net открывает разработчикам встраиваемые технологии

Новый компонент PDF Metamorphosis .Net позволит разработчикам легко создавать приложения с возможностью конвертации документов различного формата в ...

News image

Продукты, связанные со средой Flex

Вместе с платформой Adobe® Flash® развивается обширная экосистема продуктов, которые способствуют успешной разработке приложений. Поддержку среды Fl...

News image

Oracle RAC. Общее описание

Высоконагруженные сайты, доступность «5 nines». На заднем фоне (backend) куча обрабатываемой информации в базе данных. А что, если железо забарахлит...

Топ технологий:

News image

Оздана новая система беспроводной связи - она в 10

Ученые из Национального тайваньского университета разработали новую систему беспроводной передачи данных, которая позволит передавать инф...

News image

Как взломали Twitter

В Интернетах, наряду с iPad, сканерами в аэропортах и войне между Google и Apple, уже второй день подряд активно обсуждается тема взлома и...