Техніка анімації Google лого присвяченого Марті Грехем (Martha Graham)

Нещодавно (11 травня 2011 року) Google показував спеціально присвячене Марті Грехем анімоване лого. Дуже красиво анімоване лого! Власне, це не зовсім лого (тобто не офіційне лого), це дудл (doodle). До речі, хто не помітив – ось тут зібрані всі дудли компанії: www.google.com/logos/.

Так, а про що я взагалі говорив спочатку? Ага, техніка анімації! Отож на блозі сайту acumenholdings.com є пояснення як саме це було зроблено.

Перш за все, було створено одне зображення, яке містило всі кадри майбутньої анімації (величезне зображення-спрайт).

Наступний крок – на сторінці створено всі скільки-їх-там блоків <div>, однакових за розміром з різницею лише у положенні зображення у фоні. Тобто, кожен новий <div> показував новий “кадр” фонового зображення.

На останок, ці всі блоки з’єднані з допомогою JavaScript таким чином, щоб з’являтись один над одним створюючи ефект анімації. Скрипт містить великий масив координат про кожен блок та “малює” їх якраз один над одним з частотою у 83 мілісекунди (що складає 12 кадрів у секунду).

Ось така блискуча техніка! А як вам?