Подтвердить что ты не робот

Почему не анимированный GIF вместо анимированных CSS-спрайтов?

В недавних тенденциях я видел людей, которые анимируют CSS-спрайты с использованием JavaScript вместо использования анимированных GIF файлов?

Пример:

Это все, что нужно, чтобы показать или экспериментировать с технологией или есть какие-то выгоды от этого. Мне интересно знать преимущества, если они есть. Причина, о которой я прошу, заключается в том, что я не мог понять, что в обоих случаях нам нужно создать промежуточные кадры (в основном, используя технику твинирования).

4b9b3361

ОТВЕТЫ

Ответ 1

  • Control

    У вас нет контроля над анимированными GIF. Вы не можете их запускать, вы не можете остановить их. Они просто оживают, как только они загружаются.

    С спрайтами вы можете управлять анимацией. Вы можете запускать, останавливаться и реагировать на события браузера, панорамировать анимацию. Например, Google Doodles обычно активируются, когда вы нажимаете на них.

    Элегантная система управления GIF может быть найдена в 9gag. Вы можете запустить их, добавив их в DOM и остановить их, удалив их и заменив их предварительно созданным "представлением первого кадра". Но что касается GIFs.

  • Независимые экземпляры

    При загрузке нескольких экземпляров одного и того же GIF все эти экземпляры используют одно и то же изображение на странице и одновременно перемещаются. Если у вас есть ряд танцующих единорогов GIF, они будут танцевать одновременно. Синхронизированные танцы!

    Но с спрайтами, даже если вы используете одни и те же изображения, анимация основывается на базовом script. Поэтому, если один спрайт анимируется одним script, а другой - другим script, обе анимации могут запускаться независимо друг от друга и отличаются друг от друга.

    Это избавит вас от создания другого GIF и его легко изменить, поскольку вы изменяете только script.

  • Обеспечение плавной анимации

    Анимированные GIF файлы просто оживают во время загрузки, а когда Интернет работает медленно, анимация замерзает, пока загружается больше изображения.

    Напротив, преимущество спрайтов заключается в том, что вы можете предварительно загрузить их, чтобы все изображения загружались заранее. Это гарантирует, что ресурсы, используемые для этой анимации, уже загружены до анимации, чтобы убедиться, что они оживлены как можно более гладкими.

    Однако GIF - это неподвижные изображения. Вы можете динамически загружать их из DOM и прослушивать событие загрузки, прежде чем добавлять их в DOM.

  • Частичный рендеринг

    С помощью спрайтов PNG вы можете делать "частичные" анимации, разбивая анимационную сцену на части. Например, когда персонаж стоит на месте, но руки размахивают. Вам не нужно анимировать весь персонаж или всю сцену. Вы можете поместить элемент, изображающий спрайт тела персонажа в состоянии "замораживания", в то время как руки - это другой элемент, который оживляет. Это сохраняет пространство и размер листа спрайтов. Хорошим примером для этого был Google Doodle Day Day от Google.

    В отличие от этого, в большинстве случаев каждый кадр в анимации GIF является целым изображением и оживляет, движется ли что-нибудь в нем. Чем больше кадров, тем больше размер GIF.

  • GIF просто не масштабируются

    GIF предназначены для значков. Отношение размера файла к размеру изображения не масштабируется в GIF по сравнению с PNG и JPG.

Ответ 2

На вершине ответа Джозефа Мечтателя...

Насколько я знаю, или, по крайней мере, это было так, GIF файлы НЕ являются истинным цветом, еще одна причина использовать JPG/PNG в качестве css-спрайта.