Анимация и интерактив в Web

2010-01-23T15:47:57+06:00

Предположим,вам нужно сделать на сайте что-то интерактивно-анимированное. Скажем, кнопку в виде вращающихся цветов. Что можно взять? Казалось бы, такой простой вопрос - и такие привычные ответы, но почему-то он меня заинтересовал. Итак, какие для этого существуют технологии:

  • GIF+Javascript
Топорнее некуда. Любая анимация заранее нарисована, любой интерактив выполняется с помощью Javascript. Преимущества: никакого дополнительного ПО для клиента, поддержка любого браузера, плавность анимации. Недостатки: может быть большой объём файлов (представьте, что вы показываете небольшой мультик…в GIF’ах это будет весомо), сложный Javascript и трудоёмкость рисования.
  • Flash
Проще некуда. Несмотря на то,что для этой технологии есть только один (!) нормальный редактор и тот стоит кучу $$$, Флеш процветает и благоухает на всех просторах Интернет. Разбирать его досконально не буду, все видели. Преимущества: распространённость просмотровщика, некая стандартизированность (действительно, мало у кого стоит Flash Player не от фирмы Adobe), векторность и, следовательно, малый объём файлов (скажем, мультик во Flash вполне возможно уместить в 10 Мб), простота рисования (среда разработки удобна и хороша). Недостатки: на слабых компьютерах ваша супер-крутая анимация с офигенными эффектами будет неизбежно тормозить. Но для этого нужны действительно сложные эффекты и\или длинный ролик. Ну и корявый ActionScript, думаю, тоже.

Ладно, теперь обратимся к экзотике.

  • SVG+Javascript
Подробно возможности и примеры показаны здесь. Так как технология всё ещё довольно нова, она имеет много нюансов, и главный из них - отсутствие стандарта реализации. Нет, стандарт W3C есть, но когда и кто обращал внимание на их стандарты, кроме них самих? Плагин Adobe SVG Player имеет свои понятия о том,что надо проигрывать,а что - нет, встроенные поддержки в Chrome, Opera и Firefox всё ещё недоработаны (хотя в Opera уже сделано вдвое больше того,что есть в Firefox и Chrome вместе взятых), вне браузера вообще толком не проигрывается. Чёрт побери, каждый разработчик SVG плеера имеет своё мнение даже на то,стоит ли отрисовывать невидимые элементы! Преимущества: открытость, обилие редакторов, встроенная поддержка в большинстве браузеров, малый размер роликов Недостатки: медленная прорисовка даже элементарных эффектов, ОЧЕНЬ большие проблемы совместимости в отображении, сложность разработки (внедрять Javascript в SVG - это не так просто, а SMIL так вообще…), возможны проблемы даже в конфигурации веб-сервера (не у всех хостеров возможно корректно настроить отдачу svg)
  • VML+Javascript
Эта технология - продукт компании Microsoft. Не используется никем, кроме этой компании. Но я всё равно расскажу немного, потому что встроенная поддержка этого языка есть в Internet Explorer. W3C в своё время сделала стандарт и этого языка, но сейчас он считается устаревшим и заменённым на SVG. Что интересно, но компания Microsoft так не считает и поддержку SVG в свой браузер внедрить не спешит. Хотя,что тут рассказывать? Свой вариант SVG. Редакторы формата? Microsoft Word. Проигрыватель? Microsoft Internet Explorer. Все недостатки SVG относятся и к нему тоже,а из преимуществ остаётся только малый размер роликов.
  • Native Client
Совершенно Экспериментальная Разработка от Гугла. Но тем не менее, она тоже стоит изучения. Собственно, для анимации её использовать очень мелко - основной задачей этой технологии является запуск полнофункциональных приложений в браузере клиента. То есть,вы можете сделать даже OpenGL и оно будет работать БЫСТРО, а не как на Javascript. Преимущества: быстрота анимации и работы, относительное удобство программирования, относительно малый размер программ Недостатки: клиенту необходим плагин, который до сих пор даже ещё не вышел из разработки; к тому же, он доступен пока что не для всех браузеров. Ну и конечно, что рисовать на SDL\openGL намного сложнее, чем во Flash.
  • VRML+Javascript
На сегодняшний день мертвее всех мёртвых, и возрождаться не собирается. Как бы заменён на X3D и xVRML, но эти умерли ещё до рождения. Тем не менее, на этих технологиях тоже можно что-то сделать, правда потребуется чей-нибудь плагин.
  • Javascript
Действительно, зачем привязывать к этому языку ещё одни? Он и сам вполне в состоянии создавать анимированные объекты, полностью (!) вычисляемые. Не стоит строить велосипеды: существует целый зоопарк фреймворков для рисования на Javascript. В качестве редактора подходит этот. Всё это ещё ново, но уже работает. Вот пример на библиотеке CAKE. Преимущества: никаких дополнительных плагинов для браузера, малый размер страницы Недостатки: в первую очередь, это - недостаток редакторов. Рано или поздно вам придётся лезть в код и править ручками координаты. Во вторую - скорость исполнения (это лечится тройной буферизацией, оптимизацией и прочим, но всё-таки, Javascript всё ещё выполняется не мгновенно) и хорошие затраты в производительности на антиалиасинг (особенно по сравнению с Flash). В остальном - рекомендую, за этим будущее.
  • Silverlight\Moonlight
Наконец-то что-то интересное. Что у нас тут? Интернет-технология для запуска .NET-программ. Её свободный аналог для запуска программ на Mono.Я никогда не сталкивался с .NET, поэтому лично меня надо сильно чем-нибудь возбудить в этой технологии,чтобы я решил вдруг выучить C# (или Ruby, или Python).Посмотрим… Преимущества: поддержка всеми браузерами, быстрота и плавность исполнения, удобство разработки для .NET программистов и дизайнеров (в качестве редактора XAML прекрасно подходит Inkscape) Недостатки: скачивать клиент; возможны глюки в Opera; плохая стандартизация (плагин Novell и реализация в Microsoft IE не совсем совпадают по возможностям) …Нет, не возбуждает.
  • JavaFX
Старая,добрая Ява. Она использовалась для веб-приложений задолго до повсеместного ввода Flash. Преимущества: относительная плавность анимации и быстрота выполнения, удобство разработки для Java программистов и дизайнеров (в качестве редактора JavaFX прекрасно подходит…да, тот же самый Inkscape), универсальность поддержки и стандартизованность языка (ни один нормальный человек не поставит себе в браузер OpenJRE). Недостатки: большой клиент (Sun JRE - штука увесистая), “хороший” расход памяти, плохая интеграция с браузером Что я имею в виду под плохой интеграцией? Криворукость. Если у вас на странице есть Java-приложение, то оно начинает подгружаться. На это время браузер попросту виснет (это справедливо для Оперы и Мозиллы, насчёт Хрома не знаю), вместе со всеми вкладками. Не самое хорошее начало для работы, правда? Конечно, Mozilla обещает исправить это, но - потом. Кроме того, если ваша программа зависнет, то это же сделает и весь браузер, опять же со всеми вкладками. По справедливости,это же верно и для других встраиваемых технологий - так, грохнуть браузер может и Flash, и Silverlight, но Ява грузит комп намного больше (одна загрузка JRE в память занимает довольно долгое время), к тому же, там намного проще напортачить, чем во Flash и Native Client.Нет, браузер может навернуться и от Javascript - но со стопроцентной вероятностью он зависнет только от Явы. При подгрузке,как минимум.
  • Своя технология
А также свой браузер, своя операционная система и свои компьютеры. Да, а ещё ваша компания называется либо Apple, либо Oracle :-)

Пожалуй,я пока не буду делать графических веб-приложений. Это слишком тернистый путь,чтобы вести по нему мелкие проекты.