Нещодавно (11 травня 2011 року) Google показував спеціально присвячене Марті Грехем анімоване лого. Дуже красиво анімоване лого! Власне, це не зовсім лого (тобто не офіційне лого), це дудл (doodle). До речі, хто не помітив – ось тут зібрані всі дудли компанії: www.google.com/logos/.
Так, а про що я взагалі говорив спочатку? Ага, техніка анімації! Отож на блозі сайту acumenholdings.com є пояснення як саме це було зроблено.
Перш за все, було створено одне зображення, яке містило всі кадри майбутньої анімації (величезне зображення-спрайт).
Наступний крок – на сторінці створено всі скільки-їх-там блоків <div>, однакових за розміром з різницею лише у положенні зображення у фоні. Тобто, кожен новий <div> показував новий “кадр” фонового зображення.
На останок, ці всі блоки з’єднані з допомогою JavaScript таким чином, щоб з’являтись один над одним створюючи ефект анімації. Скрипт містить великий масив координат про кожен блок та “малює” їх якраз один над одним з частотою у 83 мілісекунди (що складає 12 кадрів у секунду).
Ось така блискуча техніка! А як вам?
at 22:21
Кльова була ця анімашка. Я ще захопливо дивися як та баба там карате показує,
at 00:29
Хе-хе
Тільки то не карате, то просто танці такі))
at 11:30
Я десь читав замітку про те, як кожну частинку великого зображення зробити лінком на окремий ресурс (так само по координатах), а це якесь продовження такої ідеї, дуже класно вийшло
at 21:00
дякую, пізнавально.