Какие форматы, поддерживающие анимацию, подходят для Интернета?

Ответы:

13

Это зависит от того, какой тип анимации вам нужен.

  • .gif images - Полностью поддерживается, но ограничено для использования с фреймами. Предполагается, что в файлах .png есть поддержка анимации, но вы не видите ее в дикой природе очень часто, если вообще ее видите.
  • Flash, Silverlight и другие плагины - Flash имеет наибольшее распространение, но все плагины должны быть установлены в браузерах и не обязательно должны быть установлены на компьютере пользователя. Может не работать на мобильных платформах.
  • CSS3 - Ограниченные преобразования или анимации, ограниченная поддержка браузера.
  • HTML5 video - будущее, но ограниченная поддержка браузера.
  • JavaScript - должен быть включен, но должен иметь почти универсальную поддержку браузера. Ограниченные виды анимации. Смотрите Raphael.js .
  • Canvas tag - современная поддержка браузера, но поддерживает богатую анимацию.
Виртуозы Медиа
источник
Я собираюсь придираться, но <canvas>анимация - это, по сути, JavaScript - это просто другой формат, на котором можно рисовать вещи. Если вы хотите быть точным, вы должны различать анимированные элементы HTML, SVG (который использует raphael.js) и HTML5<canvas>
Yi Jiang
Разница между SVG и холст анимации в двух словах - с SVG, каждый путь является элемент , который можно связать данные и события , такие как щелчок и при наведении курсора мыши и взаимодействуют с как DIV, в то время как в Canvas, это больше похоже на браузер создает вещи, дает их правила поведения потом забывают о них. SVG не существует в IE до IE 9, поэтому Raphael великолепен - он управляет SVG, или, в IE6-8, он использует старый аналог собственной марки IE (называемый VML). Единственное, что я знаю, Рафаэль не работает на старых Android-браузерах (я думаю, до версии 2).
user56reinstatemonica8
2

Это в дополнение к отличному ответу Virtuosi Media:

Apple недавно использовала изображения JPEG и PNG для анимации на своем сайте. Они используют JavaScript для переключения изображений. Это отличный метод, если у вас не слишком много фреймов, вам нужна поддержка альфа-прозрачности, вы хотите, чтобы анимация была на странице, и если вам нужна широкая поддержка браузера. Недостатком является размер загрузки и усилия.

Это также может быть интерактивным. Если вы прокрутите раздел Smart Cover на странице Apple iPad, вы увидите его в действии: http://www.apple.com/ipad/features/

Марк Эдвардс
источник
1

При наложении изображений с прозрачностью поверх анимированных изображений на слои под изображением. Вы обнаружите, что PNG24 является единственным форматом изображения, в котором сглаживание корректно сочетается с фоновыми изображениями. С GIF и PNG8 вы обнаружите, что ваши края все короткие. Выглядит не очень хорошо, но очень легко пропустить.

Джон Дрефал
источник