Создание анимированого логотипа

Question

[Владимир]

Для своего веб-проекта решил сделать серию анимированых логотипов. Типа таких, как делает google для разных событий.

Задача по сути элементарная (логотипы для 4х времен года):
простенькая картинка, на которой отображается логотип сайта и несложная циклическая анимация (ветер, сугробы и снег; шевелящаяся трава и прыгающая птичка; ромашки и летающая бабочка; падающие желтые листья)

Еще никогда не сталкивался с анимацией. Вот пол дня провел читая различные статьи по анимации в веб, так и не понял, какой подход проще в использовании: спрайтовая анимация javascript, canvas или svg.

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

З.Ы.: анимированые гифы и флэш не подходят.

Answer 1

[Анатолий]

«несложная циклическая анимация» Все таки гиф была бы лучше =) Не понимаю зачем для такой простой задачи тратить кучу времени.

Answer 2

[Иван Маслов]

Почему гиф не подходит? Гиф это как раз универсальное кроссбраузерное решение. Лично мне удобно рисовать GIF-анимацию в Adobe Photoshop

Answer 3

[Vitaliy Petrychuk]

Рекомендую спрайты. habrahabr.ru/post/130193/

Comments

[Владимир]

Да, это я уже.
С анимацией спрайтов немного разобрался. Сейчас интересно как создать что-то подобное tavmjong.free.fr/INKSCAPE/DRAWINGS/clock2.svg

[Vitaliy Petrychuk]

Зачем так сложно, это же просто логотип :)

Answer 4

[miguelle74]

Можно поступить проще — создать во flash, при наличии навыков и конвертировать в HTML5 при помощи labs.adobe.com/technologies/wallaby/. Соответственно вот статья — habrahabr.ru/post/115124/

Answer 5

[Владимир Соколовский]

Как раз на днях разбирали CSS3 анимацию — получается вполне прикольно, изучить и написать простую анимацию можно через пару часов чтения документации и примеров. Единственный минус — IE<9 и Opera пока в пролете.

Answer 6

[Stdit]

GIF идеально должен подойти. Если нужен труколор — тогда композиция из PNG + JS-анимация. Если на ИЕ8 пофиг — тогда Canvas.

Answer 7

[Виталий Желтяков]

Всё зависит от наличия прозрачного фона и цикличности. Если фон не прозрачный, то лучше двигаться в сторону gif. Если нужна определённая (например, по событию) цикличность или фон прозрачный, то используем png-спрайт и jQuery.spritely.

Answer 8

[Владимир]

Ответ всем, кто предлагает гиф:
Потому что хочу в дальнейшем делать более сложную анимацию. А эта задача — как раз подходит, что бы научится.

Answer 9

[Vampiro]

habrahabr.ru/post/140286/