Animowane.GIF vs Spritesheet + JS / CSS
Która będzie skalowana najlepiej pod kątem wydajności, rozmiaru pliku (i mojego rozsądku): animowane .gifs czy spritesheet z animacjami za pomocą CSS (i JS, gdy zajdzie taka potrzeba)?
Filesize
Więc szczerze mówiąc nie jestem pewien, który będzie tutaj lepszy, ponieważ nie rozumiem kompresji klatek w .gif. Domyślam się, że skończyliby na równi, gdybym mógł to dobrze huśtać, ale jeśli to jest złe, lub jeśli jest to czynnik z innego powodu daj mi znać.
Główny przewaga tutaj, w moim umyśle, idzie do Spritesheets, ponieważ byłbym w stanie uwzględnić wiele animacji na jednym arkuszu (a mówimy tu o setkach animowanych spritów). I bazując na jednym z moich poprzednich pytań, wiem, że mogę łatwo wyciągnąć pojedynczą klatkę w CSS za pomocą image-rect(). Gdzie tak jak w przypadku pliku .gif mogę umieścić tylko jedną animację, ponieważ każda z nich będzie miała inny czas trwania.
Dodatek: również niektóre animacje powtarzają się dla danego sprite, więc spritesheet musiałby mieć tylko jedną kopię ramek, gdzie jako .gif musiałby mieć wszystkie ramki (przynajmniej z mojej wiedzy).
Wydajność
Zgadując tu ponownie, moja intuicja mówi mi, że animowane .gif s będą znacznie szybsze, ponieważ nie będę musiał zarządzać wszystkimi animacjami w tym samym czasie robię dużo kodu JS dla innych rzeczy. Ale, nie wiem na pewno, może przeglądarki wziąć znaczący hit z 30 + animowane .gifs.
Moje Zdrowie Psychiczne
Spritesheets są dla mnie, więc moja praca byłaby wysoka na początku (silnik pisania i animacji oraz ręczne kodowanie po jednym / każdym arkuszu). Ale raz napisany, jest użyteczny na dobre i zmiana w arkuszu spritesheet wymaga minimalnych zmian w kodzie.
Z drugiej strony, animowane pliki .gif nie są ciastem do zrobienia w Photoshopie (jeśli masz lepszy program, proszę daj mi znać). I każdy z nich musi być ręcznie i jest długi proces. Ale, kiedy już są zrobione, nie muszę ich zmieniać. Moje arkusze spritesheets prawdopodobnie nie zmienią się bardzo szybko, więc są szanse, że będzie to jeden i gotowe.
Moje pytanie (tl;dr)
Który będzie skalował się lepiej do setek animacji pod względem rozmiaru pliku( w tym transferu nagłówka HTTP, ponieważ będzie on przechodzić przez Internet), wydajności w nowoczesnych przeglądarkach i łatwości tworzenia (najniższy priorytet, ale jeśli możesz ułatwić moją pracę, lub argumentować do tego, byłbym wdzięczny), animowane .gif pliki zbudowane ze spritesheetów, czy po prostu za pomocą CSS i spritesheetów, które już mam?
Przykłady
VS 
8 answers
Jak byłem ciekaw, zaimplementowałem go w javascript.
Jsfiddle demo (edytowany host obrazu zgodnie z komentarzami).
Czego się dowiedziałem:
- To działa! I lepiej niż się spodziewaliśmy.
- zużycie procesora jest rzeczywiście niskie (nie testowałem go w IE6 i jestem pewien, że wymagałoby to "poprawek").
- rozmiar może być odcięty i / lub jakość może być znacznie zwiększona (w zależności od źródła).
- W przeciwieństwie do koncepcji Mikey ' A G. , to działa nawet jeśli przybliżasz/oddalasz (spróbuj w obu).
- pozwala na zmienny czas trwania klatek, tak jak gif.
- przy większej ilości pracy może mieć nawet API podobne do odtwarzacza(pauza/wznowienie, fastforward, skip itp...).
- wykorzystuje inne formaty: 8-bit alpha PNG, progressive JPEG,
<canvas>, SVG, WebP ...
Więcej informacji na stronie jsfiddle demo.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-06 11:02:19
Po prostu chciałem to przemyśleć. Istnieje wiele scenariuszy, w których na jednej stronie znajduje się wiele animacji. W scenariuszu posiadania wielu animacji na tej samej stronie, które są interaktywne. Lepiej jest użyć arkusza sprite z animacjami CSS niż GIFów. Oto moje dema:
Http://clubsexytime.com/projects/eyetracker_gif/
Http://clubsexytime.com/projects/eyetracker_sprite/
Jak widać wersja sprite obsługuje rolki z łatwością, podczas gdy wersja oparta na gifach zatrzymuje się.
Znowu, to tylko jeden scenariusz, ale pomyślałem, że może się przydać. Działa również jako dobry fragment kodu.
Dziękuję.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-21 14:52:25
Update:
Od czasu, kiedy po raz pierwszy to opublikowałem, miałem więcej szczęścia, aby animacje arkuszy sprite działały w przeglądarkach. Czy przeglądarki / Komputery się poprawiły, czy po prostu źle to zrobiłem? Nie mam pojęcia. Tak czy inaczej, ta odpowiedź jest trochę przestarzała, ale zostawię ją tutaj dla celów historycznych. Są lepsze, nowsze odpowiedzi, które są dziś bardziej istotne.
Gify działają całkiem dobrze z akceleracją GPU, ponieważ częściowe aktualizacje ramek oznaczają, że tylko piksele porcji muszą zostać przerysowane. W przeciwieństwie do rysowania bez GPUless, przeglądarka nie musi przerysowywać wszystkich pikseli każdej klatki. W przypadku arkusza sprite ' a i tak wymuszasz ten drugi, ponieważ nie nakładasz głównie przezroczystych warstw. Dlatego gify zdecydowanie dadzą ci lepszą wydajność, szczególnie w nowoczesnych przeglądarkach.
Gify oczywiście mają tę zaletę, że są ograniczone do 256 kolorów, ale na podstawie Twojej próbki nie powinno to stanowić problemu. Jeśli jednak używasz sprite ' a arkuszy, z pewnością stanie się to problemem i nie będziesz mógł użyć GIFA. Oznacza to najprawdopodobniej gorszą kompresję. Ponieważ masz duże obszary jednolitego koloru, wiele powtórzeń w poziomie i kilka kolorów w danym obszarze, będziesz miał duże korzyści z implementacji kompresji Lempel-Ziv(-Welch) w formacie GIF.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-01 05:00:47
Rzuciłbym na to okiem:
Http://adamducker.com/blog/7/animated-gif-for-css-sprites/
Osobiście uważam, że zwariowałbyś używając spritesheeta, ale to chyba zależy od tego, ile animowanych GIFów musiałbyś przynieść w przeciwnym razie
Nie wiem jakie są Twoje ograniczenia, ale tutaj jest skrzypek za pomocą CSS3 step() do animowania spritesheet:
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-03 22:20:06
Animowane gify dają tylko przezroczystość binarną (piksel jest przezroczysty lub całkowicie nieprzezroczysty). Dlatego większość animowanych GIFów źle wygląda na przezroczystym tle, ponieważ nie można zastosować antyaliasingu (jak wiewiórka, niektóre antyaliasingi zdziałałyby cuda).
Jeśli chcesz mieć jakość przezroczystości PNG-24, musisz użyć animowanych spritów.
Również animowane sprity działają bardzo dobrze, jeśli narysujesz je na płótnie. Zobacz też: http://seb.ly/demos/bunnybench/bunnies_canvas.html
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-07-09 16:09:43
Animacje Gif mogą powtarzać sprite' y, mogą również korzystać z częściowych aktualizacji klatek i ustawiać ten sam sprite ' y w różnych pozycjach. Jeśli chcesz po prostu wyświetlić nieinteraktywną animację, powiedziałbym, że animowane gify mają wszystkie zalety, z wyjątkiem koloru, jesteś zmuszony użyć palety kolorów 256.
Pamiętam, że używałem Microsoft GIF Animator , który jest z pewnością łatwy w użyciu. Nie wiem nic o Photoscape , ale w necie mówi się, że to dobry nieco cięższa alternatywa.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-04 11:03:56
Innym problemem związanym z CSS sprites, przynajmniej w obecnych przeglądarkach, jest skalowanie "jitter". Możesz przeskalować plik GIF do dowolnego rozmiaru (prawdopodobnie mniejszego), ale jeśli spróbujesz przeskalować CSS sprite, napotkasz jitter z powodu błędów zaokrąglania (pozycja tła opiera się na skalowanych współrzędnych, nie na oryginale). Jeśli ktoś zna inny sposób radzenia sobie ze skalowanymi animowanymi Sprite ' ami, dobrze byłoby to wiedzieć.
ImageMagick świetnie tworzy animowane gify lub sprity.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-02-11 22:42:45
Jeśli mówisz o setkach spritów, to idź z .gif. Im bardziej złożona animacja, tym więcej animacji, tym większe obciążenie przeglądarki, ponieważ więcej zasobów zostanie wykorzystane do renderowania animacji "slide by slide", a nie tylko pozwalając animacji .gif Sam grać.
To się pogarsza, gdy wziąć pod uwagę kompatybilność między przeglądarkami, gdzie, jak zawsze, IE zawodzi wielki czas. Nigdy nie widziałem strony dławiącej się wieloma małymi .gify ale widzę że strony dławią się prosty javascript przez cały czas. Mogę sobie tylko wyobrazić, jak źle byłoby z setkami animowanych obrazów css/js przerzucających się przez cały czas.
Jeśli mogę zapytać, do jakiego rodzaju strony przeznaczone są te animacje? Czy to jakiś rodzaj portfolio animacji lub...?
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-02-09 21:59:31