Что такое гиф анимация

27.10.202314.04.2022 admin 0 Comments

GIF изнутри

Вам когда-нибудь было интересно, как устроены gif-ки? В данной статье попробуем разобраться с внутренним строением GIF-формата и методом сжатия LZW.

Структура GIF

Файл в формате GIF состоит из фиксированной области в начале файла, за которой располагается переменное число блоков, и заканчивается файл завершителем изображения.

Основные характеристики формата GIF:

Пример разбора

Рассмотрим разбор дампа анимированного GIF-изображения размера 4х4 пикселя, состоящего из двух кадров. А вот и сами кадры, увеличенные в десятки раз.

Заголовок

В начале каждого файла GIF находится заголовок. Состоит он из текста «GIF87a» или «GIF89a», в зависимости от версии. В формате GIF87a переменная область содержит исключительно описания изображения, а в формате GIF89a она может включать еще и блоки расширений.

Логический дескриптор экрана

[04 00] [04 00] – ширина и высота виртуального экрана в пикселях
[А2] –
&nbsp&nbsp&nbsp&nbsp&nbsp(1) — флаг M использования глобальной таблицы цветов. Если 1, то в файле присутствует глобальная таблица цветов.
&nbsp&nbsp&nbsp&nbsp&nbsp(010) = 2 — флаг CR. Число бит разрешения цвета = CR + 1.
&nbsp&nbsp&nbsp&nbsp&nbsp(0) – флаг S (флаг сортировки). Если 1, то цвета в глобальной карте цветов отсортированы в порядке убывающей важности.
&nbsp&nbsp&nbsp&nbsp&nbsp(010) = 2 — флаг PIXEL. Размер общей таблицы цветов. Число записей в глобальной таблице цветов: 2^(N+1).
[00] – Индекс цвета фона.
[00] – Соотношение сторон. По умолчанию — 1:1.

Глобальная таблица цветов

[0A B2 5D] —
[C8 A6 2D] —
[F3 ED 63] — &nbsp
[BA 60 A5] —
[00 80 C8] — &nbsp
[F1 60 22] — &nbsp
[00 00 00] — &nbsp
[FF FF FF] — &nbsp&nbsp

После глобальной таблицы цветов располагается переменная часть GIF. Файл содержит последовательность блоков, которые иденцифицируются 1-байтовым кодом в начале блока.

Коды блоков:
&nbsp&nbsp&nbsp&nbsp0x21 – Расширение
&nbsp&nbsp&nbsp&nbsp0x2С – Блок изображения
&nbsp&nbsp&nbsp&nbsp0x3B – Завершение файла GIF

Блок расширения

Коды расширения:
&nbsp&nbsp&nbsp&nbsp0x1 – расширение простого текста
&nbsp&nbsp&nbsp&nbsp0xF9 – расширение управления графикой
&nbsp&nbsp&nbsp&nbsp0xFE – расширение комментария
&nbsp&nbsp&nbsp&nbsp0xFF – расширение программы

[FF] — код расширения. В нашем случае имеем расширение программы.
[0B] — размер последующего блока в байтах.
[4E 45 54 53 43 41 50 45] — (NETSCAPE) идентификатор приложения, которому принадлежит это расширение.
[32 2E 30] — (2.0) код приложения. С его помощью приложение проверяет, действительно ли это расширение принадлежит ему.
[03] — размер последующего блока в байтах.
[01] — фиксированное значение.
[00 00] — значение 0..65535. Беззнаковое целое в формате little-endian. Определяет, сколько раз должен повторяться цикл.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbspДля 0 – бесконечно.
[00] — конец блока.

[F9] — код расширения (расширение управления графикой).
[04] — размер последующего блока в байтах.
[04] —
&nbsp&nbsp&nbsp&nbsp(000) – зарезервировано. Рекомендуется заполнять нулями.
&nbsp&nbsp&nbsp&nbsp(001) — метод обработки. Определяет, что делать после отображения.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp0 – к картинке не будет применяться никакой обработки
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp1 – картинка останется без изменений
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp2 – картинка затрется фоном
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp3 – восстановится изображение под картинкой
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp4-7 – не определены
&nbsp&nbsp&nbsp&nbsp(0) – флаг ввода пользователя. Если 1, то для продолжения обработки изображения требуется реакция пользователя.
&nbsp&nbsp&nbsp&nbsp(0) – флаг цвета прозрачности. Указывает, будет ли какой-нибудь цвет использоваться как прозрачный.
[32 00] – время задержки в анимации. = 50/100 секунды = 0,5 с
[00] – индекс цвета прозрачности.
[00] — конец блока.

Блок изображения

[00 00] [00 00] — номер строки и столбца. Определяет координаты верхнего левого угла логического экрана. (0, 0).
[04 00] [04 00] — ширина и высота изображения в пикселях.
[00] —
&nbsp&nbsp&nbsp&nbsp(0) – флаг использования локальной таблицы цветов
&nbsp&nbsp&nbsp&nbsp(0) – флаг чересстрочной развертки. Указывает, в каком порядке считываются пиксели изображения.
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp0 – по строкам слева направо, сверху вниз
&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp1 – порядок:0-я. 8-я, 16-я…, 4-я, 12-я, 24-я…
&nbsp&nbsp&nbsp&nbsp(0) – флаг сортировки локальной таблицы цветов. Если 1, то цвета в локальной карте цветов отсортированы в порядке убывающей важности.
&nbsp&nbsp&nbsp&nbsp(00) – зарезервированы.
&nbsp&nbsp&nbsp&nbsp(000) – флаг PIXEL. Размер локальной таблицы цветов, если есть.

[03] — минимальный размер кода в LZW.
[08] — размер последующего блока в байтах.
[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW. Представлены в виде последовательности кодов, имеющих длину [мин. размер кода] + 1
[00] — окончание потока данных.

Разбор алгоритма LZW

Кадр 1

Словарь инициализирован по количеству цветов и кодами и . Берем код с длиной текущего размера, получаем его значение из словаря. Если значение есть в словаре, то получаем готовый индекс цвета для текущего пикселя и добавляем в словарь следующее значение: полученное предыдущее + первое из текущего. Если в словаре еще нет такого значения, то добавляем по этому индексу полученное предыдущее + первое из предыдущего. Первый код должен соответствовать значению , последний — .

Решим обратную задачу. Возьмем исходные данные изображения и закодируем их с использованием алгоритма LZW. Под исходными данными понимаем последовательность индексов цветов из словаря, соответствующих каждому из пикселей. Пискели рассматриваем сверху вниз, слева направо.

Step	Action	Index Stream	New Code Table Row	Code Stream
1	Init	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8
2	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8
3	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#10 – 0 0	#8 #0
4	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0
5	Found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0
6	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0
7	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#11 – 0 0 0	#8 #0 #10
8	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10
9	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#12 – 0 2	#8 #0 #10 #0
10	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0
11	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#13 – 2 2	#8 #0 #10 #0 #2
12	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2
13	Found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2
14	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2
15	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#14 – 2 2 2	#8 #0 #10 #0 #2 #13
16	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13
17	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#15 – 2 4	#8 #0 #10 #0 #2 #13 #2
18	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2
19	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#16 – 4 4	#8 #0 #10 #0 #2 #13 #2 #4
20	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4
21	Found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4
22	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4
23	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#17 – 4 4 4	#8 #0 #10 #0 #2 #13 #2 #4 #16
24	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16
25	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#18 – 4 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4
26	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4
27	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#19 – 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5
28	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5
29	Found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5
30	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5
31	Not found	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#20 –5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 #19
32	Read	0 0 0 0 2 2 2 2 4 4 4 4 5 5 5 5	#8 #0 #10 #0 #2 #13 #2 #4 #16 #4 #5 #19 #5 #9

Теперь сравним результат кодирования со сжатыми данными, хранящимися в дампе. Формат GIF в данном блоке хранит многобайтовые целые числа с младшим байтом на первом месте (прямой порядок байтов).

[08 0A D2 42 90 94 59 12] — блок данных, сжатых алгоритмом LZW.

Аналогично поступаем со вторым кадром.

Кадр 2

Step	Action	Index Stream	New Code Table Row	Code Stream
1	Init	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8
2	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8
3	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#10 – 3 6	#8 #3
4	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3
5	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#11 – 6 1	#8 #3 #6
6	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6
7	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#12 – 1 7	#8 #3 #6 #1
8	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1
9	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#13 – 7 3	#8 #3 #6 #1 #7
10	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7
11	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1#7
12	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1#7
13	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#14 – 3 6 1	#8 #3 #6 #1 #7 #10
14	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10
15	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10
16	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10
17	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#15 – 1 7 3	#8 #3 #6 #1 #7 #10 #12
18	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12
19	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12
20	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12
21	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12
22	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12
23	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#16 – 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14
24	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14
25	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14
26	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14
27	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#17 – 7 3 6	#8 #3 #6 #1 #7 #10 #12 #14 #13
28	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14 #13
29	Found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14 #13
30	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14 #13
31	Not found	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#18 – 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14 #13 #11
32	Read	3 6 1 7 3 6 1 7 3 6 1 7 3 6 1 7	#8 #3 #6 #1 #7 #10 #12 #14 #13 #11 #7 #9

[38 16 A7 EC 6D 9D 04] — блок данных, сжатых алгоритмом LZW.

Блок завершения файла GIF

Заключение

На этом всё. Надеемся, эта статья была полезна для вас (ну или хотя бы интересна).

Источник

Что такое GIF и как благодаря ему можно зарабатывать деньги

Здравствуйте, уважаемые читатели блога Start Luck! Наверняка каждый пользователь, регулярно или время от времени выходящий «посерфить» в интернете, сталкивался с так называемыми гифками. Чаще всего я встречался с ними в социальных сетях — Вконтакте, Одноклассниках и т.д.

Но, конечно, используются они повсеместно. Формат не для всех понятный — то ли это видео, то ли картинка. Предлагаю вам расставить все точки над i.

Итак, давайте поговорим о gif — что за формат и для чего он нужен. Вы также узнаете где взять анимированные картинки и как на умении создавать их можно заработать.

Что это?

Что такое gif? Что за формат? Создан он был для обмена растровыми (пиксельными) картинками. Удобен и популярен он стал из-за своей особенности сжимать графические файлы без особой потери их качества. Но у всего есть предел, а лимит gif – 256 цветов.

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

Что за прозрачность? Чтобы не давать какому-то участку цвет (ведь количество ограничено), его делают прозрачным, и он будет приобретать цвет фона. То есть, он может быть белым, черным или красным — все зависит от того, где вы откроете гифку.

Я вот, например, как-то раз сохранил картинку в этом формате. Скачивал я черную надпись на белом фоне и что, вы думаете, я увидел в галерее? Просто черный квадрат. Это уже промах создателя гифки, можно было бы и обойтись без прозрачности — тут всего два цвета!

Теперь об анимации. Именно из-за нее многие ошибочно полагают, что gif – это формат видео. На самом деле это последовательность из статичных изображений, каждое из которых будет находиться на экране указанное время и все они беззвучны.

Поэтому на гифки с фрагментами из каких-то фильмов или сериалов на моменты с диалогами накладывают текст. Могу предложить вам статью о том, как делать надписи в фотошопе.

Как правило, анимацию делают цикличной — после последнего кадра снова воспроизводится первый. Тут прозрачность имеет свое значение. Благодаря ей, не обязательно сохранять каждый кадр полностью, достаточно сохранить лишь изменения.

Где их взять?

Вы можете попробовать свои силы в том же фотошопе. Например, вы хотите сделать гифку с какой-то шуткой из любимого сериала. Для этого нужно открыть видео в Photoshop и выбрать нужный участок. Программа сама разобьет этот фрагмент на множество кадров, а вам нужно будет указать для каждого время, спустя которое будет происходить смена. Останется лишь сохранить файл в формате gif.

Все! Теперь можете поделиться своим творением с друзьями или оставить в своем блоге, использовать в качестве рекламного баннера на каком-нибудь сайте и многое другое.

Если вам нужны какие-то гифки, но сами вы создавать их не хотите из-за отсутствия времени или интереса, воспользуйтесь сайтами-банками. Таковых на просторах интернета полным-полно, например Giphy.com или Gifs.net .

Заработок возможен?

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

Насколько мне известно, никто не занимается продажей и покупкой gif-анимации. Возможно, это просто непопулярная биржа и поэтому она находится в тени. Но кто сказал, что вы не можете попробовать создать такой сайт?

После прохождения курса « Интернет-магазин под ключ » вы сможете продавать гиф-анимацию на созданной платформе.

Или можете найти человека, который сделает вам сайт на Kwork.ru или других биржах фрилансеров, что будет дешевле.

В наши дни владелец компьютера может начать зарабатывать деньги почти из ничего — нужно лишь знать, что делать. Помните, что начать можно с обычного ноутбука и прийти к большому успеху — все в ваших руках. А как выжать из ПК максимум вы сможете узнать из курса « Секреты продуктивной работы за компьютером ».

Ну и мой блог, я надеюсь, вам в этом помогает. Если эта статья была полезной, подписывайтесь на мой паблик Вконтакте и рассказывайте о блоге своим друзьям! Желаю вам удачи во всех начинаниях! Пока!

Источник

Что такое Gif-анимация.

Произношение и происхождение названия.

Как делается анимированные изображения.

Чуть-чуть теории, а если она не нужна, то сразу сюда на практику создания анимации..
Создаются несколько картинок в формате GIF или PNG. На мой взгляд, слово мульти (много) тут подходит больше. Причем каждый кадр в этой последовательности несет информацию о том, сколько времени кадр должен быть показан на экране, размер, эффект итд..

Практическое занятие

на примере создания GIF-анимации в среде Гифовины:
Итогом нашей практической работы будет создание вот такой картинки.

1. Запускаем редактор по ссылке http://gifovina.ru. И начинаем добавлять кадр за кадром.

2. Добавляем 7 кадров- букетов. Указываем эффекты. Эффекты разбиты по группам. Их достаточно много. Я выбрала «вертикальные жалюзи».

3. К каждой картинке установить параметры: Размер, Режимы подгонки, Длительность кадра, Эффекты.

4. Вот пример эффекта «горизонтальные жалюзи». Все эффекты можно попробовать через кнопку «Готово». А зафиксировать результат кнопкой «Скачать».

5.Есть возможность добавить на каждую картинку свой текст. Для этого надо картинку активизировать кликом.

6.Потянув за зеленые уголки (границы текста», можно изменить размеры текстового окна

7. Готовый результат. Не забыть про клавишу «Поделиться в соц сетях»

Источник

Сайт aromolux.ru

Что такое гиф анимация

GIF изнутри

Структура GIF