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

Odpowiedzi:

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