Jakie formaty obsługujące animację są odpowiednie dla Internetu?

13

Jakie formaty obsługujące animację są odpowiednie dla Internetu i jakie są zalety i wady każdego z nich.

image-format animation

— Alinium
źródło

Zobacz także Jaki jest najlepszy sposób animacji ilustracji w Internecie? więcej informacji na temat każdego formatu

— Zach Saucier

13

To zależy od tego, jakiego rodzaju animacji potrzebujesz.

Obrazy .gif - w pełni obsługiwane, ale ograniczone użycie z ramkami. Pliki .png powinny mieć wsparcie dla animacji, ale nie widać tego zbyt często na wolności, jeśli w ogóle.
Flash, Silverlight i inne wtyczki - Flash ma największą wszechobecność, ale wszystkie wtyczki muszą być zainstalowane w przeglądarkach i niekoniecznie można liczyć na to, że zostaną zainstalowane na komputerze użytkownika. Może nie działać na platformach mobilnych.
CSS3 - Ograniczone transformacje lub animacje, ograniczona obsługa przeglądarki.
Wideo HTML5 - Przyszła, ale ograniczona obsługa przeglądarki.
JavaScript - musi być włączony, ale powinien mieć prawie uniwersalną obsługę przeglądarki. Ograniczone rodzaje animacji. Zobacz Raphael.js .
Tag Canvas - nowoczesna obsługa przeglądarki, ale obsługuje bogate animacje.

— Virtuosi Media
źródło

Zamierzam tu nitpick, ale <canvas>animacja jest w zasadzie JavaScript - to tylko inny format, na którym można rysować. Jeśli chcesz być precyzyjny, powinieneś rozróżniać między animowanymi elementami HTML, SVG (który używa raphael.js) i HTML5<canvas>

— Yi Jiang

Różnica między SVG i animacji płótnie w pigułce - z SVG, każda ścieżka jest elementem można powiązać dane i wydarzeń, takich jak kliknięcia i najechaniu myszą do i interakcji z jak div, natomiast w płótnie, to nic więcej jak przeglądarka tworzy rzeczy, daje ich reguły zachowania zapominają o nich. SVG nie istnieje w IE przed IE 9, dlatego Raphael jest niesamowity - kontroluje SVG lub, w IE6-8, używa starego odpowiednika IE własnej marki (zwanego VML). Jedyne, o czym wiem, że Raphael nie działa, to stare przeglądarki zapasowe Androida (myślę, że przed wersją 2).

— user56reinstatemonica8,

2

Jest to uzupełnienie świetnej odpowiedzi Virtuosi Media:

Firma Apple niedawno używała nadal animacji JPEG i PNG na swojej stronie. Używają JavaScript do przełączania obrazów. Jest to świetna technika, jeśli nie masz zbyt wielu ramek, potrzebujesz obsługi przezroczystości alfa, chcesz, aby animacja była na miejscu i jeśli chcesz szerokiej obsługi przeglądarki. Minusem jest rozmiar pobierania i wysiłek.

Może być również interaktywny. Jeśli przewiniesz do sekcji Smart Cover na stronie iPada firmy Apple, możesz zobaczyć ją w akcji: http://www.apple.com/ipad/features/

— Marc Edwards
źródło

1

Podczas nakładania obrazów zawierających przezroczystość na animowane obrazy na warstwach pod obrazem. Przekonasz się, że PNG24 jest jedynym formatem obrazu, w którym wygładzanie łączy się prawidłowo z obrazami tła. Z GIF i PNG8 przekonasz się, że wszystkie twoje krawędzie są masywne. Nie wygląda bardzo dobrze, ale naprawdę łatwo go przeoczyć.

— John Drefahl
źródło