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

13

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

image-format animation

— Alinium
источник

Смотрите также Как лучше всего анимировать иллюстрацию для Интернета? для получения дополнительной информации о каждом формате

— Зак

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 вы обнаружите, что ваши края все короткие. Выглядит не очень хорошо, но очень легко пропустить.

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