Які формати, що підтримують анімацію, підходять для Інтернету?

13

Які формати підтримки анімації підходять для Інтернету та які плюси та мінуси кожного.

image-format animation

Дивіться також Який найкращий спосіб анімації ілюстрації для Інтернету? для отримання додаткової інформації щодо кожного формату

— Zach Saucier

13

Це залежить від того, який тип анімації вам потрібен.

.gif зображення - повністю підтримується, але обмежене використання з кадрами. Файли .png мають підтримувати анімацію, але ви не бачите її в природі дуже часто, якщо взагалі.
Flash, Silverlight та інші плагіни - Flash має найбільш повсюдний характер, але всі плагіни повинні бути встановлені в браузерах і не обов'язково розраховувати на їх встановлення на комп'ютері користувача. Може не працювати на мобільних платформах.
CSS3 - обмежена трансформація чи анімація, обмежена підтримка браузера.
HTML5 відео - майбутня, але обмежена підтримка браузера.
JavaScript - потрібно ввімкнути, але він повинен мати майже універсальну підтримку браузера. Обмежені види анімації. Дивіться Raphael.js .
Canvas tag - сучасна підтримка браузера, але підтримує багату анімацію.

— Віртуозні медіа
джерело

Я збираюся тут вибирати nitpick, але <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 на iPad-сторінці Apple, ви побачите це в дії: http://www.apple.com/ipad/features/

— Марк Едвардс
джерело

1

Під час накладання зображень, які містять прозорість анімованих зображень на шарах під зображенням. Ви побачите, що PNG24 - єдиний формат зображення, де антизгладжування правильно поєднується з фоновими зображеннями. Завдяки GIF та PNG8 ви дізнаєтесь, що ваші краї чіткі. Це не дуже добре, але насправді легко пропустити.

— Джон Дрефал
джерело