Как Google анимирует свои логотипы? - PullRequest
Новая
       31

Как Google анимирует свои логотипы?

7 голосов
/ 31 марта 2011

Я пытался выяснить, как Google анимирует свои логотипы с момента взрыва частицы некоторое время назад, и сегодня у них есть набор химии , чтобы отпраздновать 200-летие Роберта Бунзена.

Я предполагаю, что это HTML5 (я использую Firefox 4, Chrome и Safari 5), но кто-нибудь может подтвердить, если так, и есть ли хорошие уроки о том, как делать эти типы анимации?

1 Ответ

5 голосов
/ 31 марта 2011

Это частично HTML5:

  1. они используют технику кросс-браузерного спрайта - одно изображение PNG с несколькими сценами.

Они обрезают область одной сцены и отображают ее.Чтобы показать следующую сцену, они просто смещают начальное смещение области отсечения.

Просто проверьте с помощью Firebug: изображение устанавливается в качестве фона тега div с высотой ровно одной сцены, затем они сдвигают смещение по Y и фоновые "движения" -совсем как пленочная лентаКак показать анимированное изображение из PNG изображения, используя JavaScript?[как в gmail]

Обновление : 2. Они также используют холст HTML5 для создания части анимации с интерактивными эффектами - например, пузырьков.

...