Чтение простая мультипликационная анимация , я понимаю это как нечто, что можно сделать с помощью меньшей цветовой палитры .Для этого анимированный GIF должен быть приемлемым, но с собственным набором проблем .
В сообщении предлагается, чтобы использование спрайт-листа с индексированными PNG могло решить проблемы синхронизации GIF и также было меньше, чем анимированный GIF.Ссылка имела вид двухцветной анимации, поэтому я проверил гипотезу для себя.Я использовал анимированный GIF 170x170 (216 цветовая палитра; 40 мс между кадрами) с 101 кадром для проверки, что составило 229 041 байт.
После извлечения отдельных кадров в виде отдельных PNG-файлов (индексированный цвет) общий размер файловбыло 375,242 байта.Я использовал ImageMagick для извлечения фреймов:
convert sca.gif -coalesce sca_%d.png
Затем создал лист спрайта - снова, используя ImageMagick:
montage -geometry 170x170 sca_*.png SpriteSheet.png
, который был 221 228 байт (чтоменьше исходного GIF).Выходные данные имели 11 строк x 10 строк.
EDIT : порядок кадров в этом случае получился как sca_ 2 .png был добавлен после sca_ 19 .png из-за того, как расширяется шар *****.Ниже приведен фрагмент кода для создания листа спрайта в правильном порядке .
Поскольку вы упоминаете, что анимированный GIF потерял слишком много деталей - это заставляет меня думать, что ваше видео может требовать большогоглубина цвета (или вам нужно экспортировать GIF без сглаживания).Для этого вы можете попробовать создать спрайт из JPEG .Вы упомянули, что файлы JPEG добавили до 7 МБ - немного больше работы, возможно, вы могли бы уменьшить количество кадров в видео, удалив дублирующиеся кадры (и / или уменьшив частоту кадров исходной анимации / видео).Для удаленных (дублирующих) кадров вы можете настроить задержку кадров.
Это может быть закодировано в объекте дескриптора в javascript.Например:
var animFrameTimes = [40, 40, 100, 100, ..., 40, 200, 40, 40]; // milliseconds between frames
Эти данные можно использовать для настройки времени ожидания для использования между кадрами, например, в функции filmstripper в ссылочной ссылке.
Дополнительный примерпростой реализации 2D спрайтовой анимации .
Нужно помнить, что некоторые устройства ( iOS ) могут не поддерживать спрайт-листы, которые слишком велики .В качестве обходного пути вам может потребоваться разбить ваш спрайт-лист на несколько листов.Все это зависит от того, насколько важно показывать анимацию / видео для вас.
Наконец, для обработки устройств с разными разрешениями можно создать несколько таких листов спрайтов с разными разрешениями, если наибольшее уменьшенное изображение делает это.не предлагать желаемого визуального качества.Затем загрузите их условно на основе устройства.
РЕДАКТИРОВАТЬ: Фрагмент пакета , чтобы создать спрайт-лист с кадрами в правильном порядке createSpriteSheet.bat:
@echo off
setlocal enableextensions enabledelayedexpansion
set fileList=
FOR /L %%n IN (0,1,100) DO (
if not "!fileList!" == "" set fileList=!fileList!
set fileList=!fileList! sca_%%n.png
)
REM echo %fileList%
montage -geometry 170x170 %fileList% SpriteSheet.png
endlocal