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

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

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

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

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

З.Ы.: анимированые гифы и флэш не подходят.
  • Вопрос задан
  • 7503 просмотра
Пригласить эксперта
Ответы на вопрос 9
taliban
@taliban
php программист
«несложная циклическая анимация» Все таки гиф была бы лучше =) Не понимаю зачем для такой простой задачи тратить кучу времени.
Ответ написан
student_ivan
@student_ivan
Web-Developer, Front-End Engineer
Почему гиф не подходит? Гиф это как раз универсальное кроссбраузерное решение. Лично мне удобно рисовать GIF-анимацию в Adobe Photoshop
Ответ написан
vermilion1
@vermilion1
Рекомендую спрайты. habrahabr.ru/post/130193/
Ответ написан
miguelle74
@miguelle74
Можно поступить проще — создать во flash, при наличии навыков и конвертировать в HTML5 при помощи labs.adobe.com/technologies/wallaby/. Соответственно вот статья — habrahabr.ru/post/115124/
Ответ написан
inlanger
@inlanger
Django программист
Как раз на днях разбирали CSS3 анимацию — получается вполне прикольно, изучить и написать простую анимацию можно через пару часов чтения документации и примеров. Единственный минус — IE<9 и Opera пока в пролете.
Ответ написан
Stdit
@Stdit
GIF идеально должен подойти. Если нужен труколор — тогда композиция из PNG + JS-анимация. Если на ИЕ8 пофиг — тогда Canvas.
Ответ написан
Всё зависит от наличия прозрачного фона и цикличности. Если фон не прозрачный, то лучше двигаться в сторону gif. Если нужна определённая (например, по событию) цикличность или фон прозрачный, то используем png-спрайт и jQuery.spritely.
Ответ написан
@de1vin Автор вопроса
Ответ всем, кто предлагает гиф:
Потому что хочу в дальнейшем делать более сложную анимацию. А эта задача — как раз подходит, что бы научится.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы