Png animation: Animated PNG (APNG) Maker

Содержание

Анимированный PNG в Firefox, Opera и WebKit? Легко! / Хабр

Однажды, от скуки, мне захотелось создать красивую полноцветную анимацию с 8-битной прозрачностью. Понятно, что GIF для этой цели никак не подходил и я стал искать альтернативы. Flash в этом качестве даже не рассматривался – слишком нагружает процессор, плохо встраивается в страницу поверх других элементов, да и стоит не у всех.

Сперва мой взгляд пал на MNG, родственника PNG. «Спецификация формата выпущена ещё в 2001 году, поэтому он наверняка реализован во всех современных браузерах!». И тут меня ждало первое разочарование. Формат оказался слишком сложным для реализации – реализация Mozilla, по их словам, содержала столько же строк кода, сколько все остальные форматы вместе взятые, за что и была удалена из их продуктов. Другие производители браузеров, похоже, даже не пытались внедрить у себя этот формат. Конечно, существует плагин для браузеров, поддерживающих плагины Netscape, но это ничем не лучше Flash. Отмечу лишь, что, возможно, формат слишком опередил свое время. Судя по описанию возможностей, это такой растровый SVG.

Дальше поиски привели меня к формату APNG. Формат прост, как два рубля: в файле записаны изменения в кадре от предыдущего с некоторыми мелкими нюансами. Но самое главное, что браузеры, не поддерживающие этот формат, отобразят статичную картинку. В целом, по возможностям формат схож с GIF. Он был предложен Mozilla как замена монструозному MNG. Проверяю в Firefox – все отлично работает. Opera – также. Открываю в Chrome и… получаю статичную картинку. Что произошло: Mozilla предложила включить APNG в спецификацию PNG. Путем голосования эта идея была отвергнута. И теперь часть браузеров поддерживает этот формат, а часть – нет.

Предо мной явственно предстала картина:

Mozilla: Ваш формат плохой, вы ничего не понимаете в анимированных PNG! Мы сделали свой, без шахмат и поэтесс. Включите его в спецификацию!
Группа разработчиков PNG: А вот вам!

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

И тут меня посетила идея: вроде же в SVG можно вставлять растровые изображения?!

Если гора не идет к Магомету

Для экспериментов я одолжил картинку у Mozilla:

Разбиваем картинку на отдельные кадры:

И так далее. Получилось 25 кадров.

Указываем размеры SVG, равные размеру самого большого кадра, и вставляем изображения. Порядок, кстати, не важен.

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" xlink:href="spinfox_001.png" />
  <image x="0" y="0" xlink:href="spinfox_002.png" />
  <image x="0" y="0" xlink:href="spinfox_003.png" />
  …
  <image x="0" y="0" xlink:href="spinfox_024.png" />
  <image x="0" y="0" xlink:href="spinfox_025.png" />
</svg>

Дальше я было попытался просто накладывать последовательно кадры друг на друга, но не учел прозрачности и получил солнышко из уха лисы (этот же эффект можно пронаблюдать в IE9):

Эффект можно использовать для реализации одного из режимов APNG: отрисовка следующего кадра поверх предыдущего.

Теперь анимируем свойство прозрачности (opacity). Можно анимировать и координаты и сдвигать кадры за пределы видимости.
Тут проблема может проявиться в том, что прозрачность будет меняться плавно и появится шлейф или мерцание. Для этого мы указываем calcMode как «discrete».
Список опорных значений: values=«1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0». Как видно, это первый кадр. Первое значение – 1 – изображение не прозрачно. На всех остальных кадрах – полностью прозрачно.
Продолжительность анимации (dur) выбираем так, чтобы при делении на число кадров получить время одного кадра. Если какой-то кадр должен находиться на экране вдвое большее время, список опорных значений придется удваивать, либо менять длительность одного значения, что несколько сложнее.

<svg xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink">
  <image x="0" y="0" xlink:href="spinfox_001.png">
    <animate attributeType="CSS" attributeName="opacity" dur="1.25s"
    values="1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"
    calcMode="discrete" repeatCount="indefinite" />
  </image>
<image x="0" y="0" xlink:href="spinfox_002.png">
    <animate attributeType="CSS" attributeName="opacity" dur="1.25s"
    values="0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"
    calcMode="discrete" repeatCount="indefinite" />
  </image>
<image x="0" y="0" xlink:href="spinfox_003.png">
    <animate attributeType="CSS" attributeName="opacity" dur="1.25s"
    values="0;0;1;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0"
    calcMode="discrete" repeatCount="indefinite" />
  </image>
…
<image x="0" y="0" xlink:href="spinfox_024.png">
    <animate attributeType="CSS" attributeName="opacity" dur="1.25s"
    values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1;0"
    calcMode="discrete" repeatCount="indefinite" />
  </image>
<image x="0" y="0" xlink:href="spinfox_025.png">
    <animate attributeType="CSS" attributeName="opacity" dur="1.25s"
    values="0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;0;1"
    calcMode="discrete" repeatCount="indefinite" />
  </image>
</svg>

Теперь у нас остается лишь одно неудобство – анимация состоит из множества файлов. Эту проблему мы решим с помощью data:URL, встроив изображения прямо в SVG.

Итоговый результат

Размер исходного APNG: 613321 байт;
Размер SVG: 799692 байт;
Размер SVG, сжатого gzip: 601409 байт. Даже меньше исходного!
Кадры PNG были оптимизированы при помощи pngout.

Внимательный читатель мог заметить, что данная «тайная техника» не работает в IE. Могу посоветовать только отдавать ему другой код с GIF или Flash, ждать IE10 и готовить лопату.

анимация PNG, векторы, PSD и пнг для бесплатной загрузки

анимация горящий огонь с искры эффект вектор

5000*5000

анимация сэндвич ролл антропоморфный мультфильм

1200*1200

ластик Аниме анимация Резиновый плот Мультфильм рисованной

2000*2000

Девушка подростковая анимация фигура Рисованной

1290*1338

Наушники в стиле анимации

1200*1200

Мультфильм аниме девушка креативный рисунок мультипликация анимация Красивая девушка

1144*1445

девочки девушка Игровой персонаж анимация

2000*2000

спрайт лист флеш персонажа с анимацией для создания 2д игры

3000*3000

Версия q анимация фигура мультипликация

2000*2000

Мультфильм аниме милая девушка мультипликация анимация прекрасный

2480*3508

Аниме животных Украшение животных Мультфильм анимация анимация

2000*3020

Открой анимации руки

2292*2292

анимация компьютер редактор контролировать по линии

5556*5556

детский день счастливый детский день радуга анимация небо фон

2000*3000

Осенняя тема тема поле пугало иллюстрация осень Осенние комиксы Аниме анимация Осенний пейзаж

2000*2000

мультипликация Рисованной анимация животное

2000*2000

мультфильм нарисован вручную творческих аниме анимации простой

2000*2000

игры анимация сцена Настройка концепции

2040*1875

Мультфильм рисованной созидательный Аниме анимация простой

658*1149

Костюм персонажа q версия мультфильма мужской ход мг анимация

2000*2000

пользовательский интерфейс игры игры кнопки анимации

1200*1200

С Днем Детства Детский день родительской анимации Старый дедушка бабушка

2480*3508

игры анимация роль Япония и Южная Корея

1692*1517

девочки девушка Игровой персонаж анимация

2000*2000

Анимация PNG, векторы, PSD и пнг для бесплатной загрузки

анимация горящий огонь с искры эффект вектор

5000*5000

анимация сэндвич ролл антропоморфный мультфильм

1200*1200

Наушники в стиле анимации

1200*1200

Игровой персонаж анимация мультипликация девушка

2000*2000

ластик Аниме анимация Резиновый плот Мультфильм рисованной

2000*2000

девочки девушка Игровой персонаж анимация

2000*2000

спрайт лист флеш персонажа с анимацией для создания 2д игры

3000*3000

Девушка подростковая анимация фигура Рисованной

1290*1338

Мультфильм аниме милая девушка мультипликация анимация прекрасный

2480*3508

mg flash анимация иллюстрация роль

2362*4134

Аниме животных Украшение животных Мультфильм анимация анимация

2000*3020

Черный кот окно мультипликация анимация

1220*1092

молния энергия мультфильм молния анимация молния игра энергия

1200*1200

девочки девушка Игровой персонаж анимация

2000*2000

Версия q анимация фигура мультипликация

2000*2000

детский день счастливый детский день радуга анимация небо фон

2000*3000

анимация компьютер редактор контролировать по линии

5556*5556

мультипликация Рисованной анимация животное

2000*2000

Осенняя тема тема поле пугало иллюстрация осень Осенние комиксы Аниме анимация Осенний пейзаж

2000*2000

Мультфильм рисованной созидательный Аниме анимация простой

658*1149

мультфильм нарисован вручную творческих аниме анимации простой

2000*2000

Мультфильм аниме каваи девушка мультипликация анимация прекрасный

2480*3508

игры анимация сцена Настройка концепции

2040*1875

пользовательский интерфейс игры игры кнопки анимации

1200*1200

Открой анимации руки

2292*2292

трёхмерная анимация линии саймреап

1200*1200

Аниме животных Украшение животных Мультфильм анимация анимация

2000*2000

Костюм персонажа q версия мультфильма мужской ход мг анимация

2000*2000

Рисованной мультипликация анимация анимация

3000*3000

Аниме животных Украшение животных Мультфильм анимация анимация

2000*2000

мультипликация анимация площадь Рисованной

2362*2362

мультипликация прекрасный анимация простой

6000*6000

Apng — новый формат анимации

Наверное, каждый дизайнер страдал из-за формата gif. Раньше это был единственный формат покадровой анимации для веб-сайтов. Не считая, конечно, flash, использование которого требует наличие на компьютере обновленного Flash Player, что в принципе неудобно. Несколько лет назад появился новый анимированный формат APNG для веба, который, как утверждают разработчики, в настоящее время поддерживается всеми браузерами. Давайте разберемся, так ли он хорош.

Поэкспериментировать с форматом APNG я решила, когда рисовала анимированные открытки с поздравлениями, которые вы, кстати можете скачать бесплатно на моем сайте.

Что нам сулят создатели APNG:

Поддержка миллионов цветов (в формате gif – это максимум 256 цветов)
Небольшой вес анимации (больше чем у gif, но все же)
Поддержка всеми браузерами (с достаточно недавнего времени)

Что мы получаем в итоге:

Отсутствие возможности сохранения в формат APNG в таких распространенных программах как Adobe Animate и Adobe Photoshop (у последнего есть плагины для этих целей, но я не стала ими пользоваться).
Качество результата – такое же, как и в случае с форматом gif.
Размер становится больше (при использовании самого простого способа получения анимации apng – сборка из png последовательности в программе APNGb)

Чтобы не быть голословной покажу, какой у меня вышла анимированная открытка в форматах gif и apng.

В первом случае возьму открытку из статьи «Скачать бесплатно анимированные открытки». Весит файл 55 кб

Открытка создавалась в программе

Adobe Animate и чтобы получить анимированную открытку из Adobe Animate в формате apng, нужно сначала опубликовать файл, как последовательность png файлов, а затем с помощью программы APNGb, которая распространяется бесплатно для персонального использования.

Качество осталось таким же, вес увеличился до 88 кб.

Для меня использование формата APNG не показалось чем-то более продвинутым чем gif анимация, может быть кто-то знает более подходящие способы сохранения анимации в apng, или программы?

Подписывайтесь на обновления блога «Дизайн в жизни»

по e-mail или социальных сетях

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна звука и уроки по Adobe Audition 2020. Пишите в комментариях, какие темы были бы для вас наиболее интересными и мы построимся их изучить для вас.

(Visited 299 times, 1 visits today)

Анимированный PNG в Firefox, Opera и WebKit? Легко! / Хабр

Однажды, от скуки, мне захотелось создать красивую полноцветную анимацию с 8-битной прозрачностью. Понятно, что GIF для этой цели никак не подходил и я стал искать альтернативы. Flash в качестве даже не рассматривался — слишком нагружает процессор, плохо встраивается в страницу поверх других элементов, да и стоит не у всех.

Сперва мой взгляд пал на MNG, родственника PNG. «Спецификация формата выпущена ещё в 2001 году, поэтому он наверняка реализован во всех современных браузерах!».И тут меня ждало первое разочарование. Формат слишком сложной реализации — реализация Mozilla, по их словам, сколько все остальные форматы взяты вместе, за что и была удалена из их продуктов. Другие производители браузеров, похоже, даже не пытались внедрить у себя этот формат. Конечно, существует плагин для браузеров, поддерживающих плагины Netscape, но это ничем не лучше Flash. Отмечу лишь, что, возможно, формат слишком опередил свое время. Судя по описанию возможностей, это такой растровый SVG.

Дальше поиски приводят меня к формату APNG. Формат прост, как два рубля: в файле записаны изменения в кадре от некоторых с некоторыми мелкими нюансами. Но самое главное, что браузеры, не поддерживающие этот формат, отображят статичную картинку. В целом, по возможностям формат схож с GIF. Он был предложен Mozilla как замена монструозному MNG. Проверяю в Firefox — все отлично работает. Опера — также. Открываю в Chrome и… получаю статичную картинку. Что произошло: Mozilla предложила включить APNG в спецификации PNG.Путем эта идея была отвергнута голосования. И теперь часть браузеров поддерживает этот формат, а часть — нет.

Предо мной явственно предстала картина:
Mozilla: Ваш формат плохой, вы ничего не понимаете в анимированных PNG! Мы сделали свой, без шахмат и поэтесс. Включите его в спецификацию!
Группа разработчиков PNG: А вот вам!

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

И тут меня посетила идея: вроде же в SVG можно вставлять растровые изображения ?!

Если гора не идет к Магомету

Для экспериментов я одолжил картинку в Mozilla:

Разбиваем картинку на отдельные кадры:

И так далее. Получилось 25 кадров.

Дальше я была попытка просто накладывать последовательно кадры друг на друга, но не учел прозрачности и получил солнышко из уха лисы (этот же эффект можно пронаблюдать в IE9):

Эффект можно использовать для реализации одного из параметров APNG: отрисовка следующего кадра поверх предыдущего.

Теперь анимируем свойство прозрачности (непрозрачность). Можно анимировать и координаты и сдвигать кадры за пределы видимости.
Тут проблема может проявиться в том, что прозрачность будет меняться плавно и появится шлейф или мерцание. Для этого мы указываем calcMode как «дискретный».
Список опорных значений: values = «1; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0; 0 ; 0; 0; 0 ». Как видно, это первый кадр. Первое значение — 1 — изображение не прозрачно. На всех остальных кадрах — полностью прозрачно.
Продолжительность анимации (dur) выбираем так, чтобы при делении на число кадров получить время одного кадра. Если какой-то кадр должен находиться на вдвое большее время, список опорных значений придется удваивать, либо длительность одного значения, что несколько сложнее.

Теперь у нас остается лишь одно неудобство — анимация последовательности из множества файлов. Эту проблему мы решим с помощью data: URL, встроив изображения прямо в SVG.

Итоговый результат

Размер исходного APNG: 613321 байт;
Размер SVG: 799692 байт;
Размер SVG, сжатого gzip: 601409 байт.Даже меньше исходного!
Кадры PNG были оптимизированы при помощи pngout.

анимация PNG, конструкция, PSD и пнг Аниме для бесплатной загрузки

анимация горящий огонь с искры эффект вектор

5000 * 5000

анимация сэндвич ролл антропоморфный мультфильм

1200 * 1200

/ourmid/pngtree-rubber-anime-animation-eraser-cartoon-hand-drawn-png-image_508007.jpg» alt=»ластик Аниме анимация Резиновый плот Мультфильм рисованной, резиновый, Аниме анимация, Резиновый плот PNG фото и картинки»/>

ластик анимация Резиновый плот Мультфильм рисованной

2000 * 2000

/ourmid/pngtree-cartoon-hand-drawn-creative-anime-animation-simple-png-image_411457.jpg» alt=»мультфильм нарисован вручную творческих аниме анимации простой, жемчужное ожерелье, Золото, мультфильм ожерелье PNG ресурс рисунок и векторное изображение»/>/ourmid/pngtree-teenage-girl-anime-character-hand-painted-png-image_356860.jpg» alt=»Девушка подростковая анимация фигура Рисованной, фигура, Цветение персика, Девушка PNG и PSD»/>

Девушка подростковая анимация фигура Рисованной

1290 * 1338

Наушники в стиле анимации

1200 * 1200

/ourmid/pngtree-cartoon-anime-girl-creative-drawing-cartoon-anime-beautiful-girl-png-image_517470.jpg» alt=»Мультфильм аниме девушка креативный рисунок мультипликация анимация Красивая девушка, творческая живопись, иллюстрация, девушка PNG и PSD»/> 9000 рисунок мультипликация аниме Рисунок анимация Красивая девушка

1144 * 1445

/ourmid/pngtree-girl-girl-game-character-anime-png-image_492710.jpg» alt=»девочки девушка Игровой персонаж анимация, японский, Японский аниме, мультипликация PNG и PSD»/>

девочки девушка Игровой персонаж анимация

2000 * 2000

спрайт лист флеш персонажа с анимацией для создания 2д Версия игры

3000 * 3000

/ourmid/pngtree-q-version-anime-character-cartoon-png-image_536609.jpg» alt=»Версия q анимация фигура мультипликация, Маленькая лиса, фигура, Мультфильм маленькая девочка PNG и PSD»/>

анимация фигура мультипликация 9 0005

2000 * 2000

/ourmid/pngtree-cartoon-hand-drawn-creative-anime-animation-simple-png-image_411457.jpg» alt=»мультфильм нарисован вручную творческих аниме анимации простой, жемчужное ожерелье, Золото, мультфильм ожерелье PNG ресурс рисунок и векторное изображение»/>/ourmid/pngtree-cartoon-anime-cute-girl-cartoon-anime-lovely-png-image_372185.jpg» alt=»Мультфильм аниме милая девушка мультипликация анимация прекрасный, Большие глаза, мультипликация, прекрасный PNG и PSD»/>

Мультфильм аниме милая девушка мультипликация анимация прекрасный

2480 * 3508

/ourmid/pngtree-anime-animal-animal-decoration-cartoon-animation-anime-png-image_538673.jpg» alt=»Аниме животных Украшение животных Мультфильм анимация анимация, книга, анимация, прекрасный PNG и PSD»/>

Аниме животных Украшение животных Мультфильм анимация анимация

2000 * 3020

Открой

2 анимации руки * 2292

900

анимация компьютер редактор контролировать по линии

5556 * 5556

/ourmid/pngtree-childrens-day-happy-childrens-day-rainbow-animation-sky-background-png-image_503049.jpg» alt=»детский день счастливый детский день радуга анимация небо фон, облако, плавающие облака, красивая радуга PNG и PSD»/>

детский день счастливый день радуга анимация небо фон

2000 * 3000

/ourmid/pngtree-autumnal-autumn-theme-field-scarecrow-illustration-autumn-autumn-comics-anime-animation-png-image_431239.jpg» alt=»Осенняя тема тема поле пугало иллюстрация осень Осенние комиксы Аниме анимация Осенний пейзаж, поле, чучело, пугало PNG и PSD»/>

Осенняя тема тема поле пугало иллюстрация осень Осенние комиксы Аниме анимация Осенний пейзаж

2000 * 2000

/ourmid/pngtree-cartoon-hand-painted-anime-animal-png-image_499276.jpg» alt=»мультипликация Рисованной анимация животное, Рисованной, Мелкое животное, зодиак PNG и PSD»/>

мультипликация Рисованная анимация животное

2000 * 2000

мультфильм нарисован вручную творческих сценариев анимации простой

9000 аним4 2000 * 2000

тройка концепции

2040 * 1875

Мультфильм рисованной созидательный Аниме анимация простой

658 * 1149

Костюм персонажа версия мультфильма мужской ход мг анимация

2000 * 2000

кнопки анимации
1200 * 1200

С Днем Детства Детский день родительской анимации Старый дедушка бабушка

2480 * 3508

игры анимация роль и Южная Корея

1692 * 1517

8 Южная Корея девочки девушка Игровой персонаж анимация
2000 * 2000

Трёхмерная анимация линии саймреап

1200 * 1200

Рисованная мультипликация анимация анимация

животных 3000 * 3000

9018

2000 * 2000

Аниме животных Украшение животных Мультфильм анимация анимация

2000 * 2000

Анимация PNG, конструкция, PSD и пнг для бесплатной загрузки

анимация горящий огонь с искры эффект вектор

5000 * 5000

анимация сэндвич ролл антропоморфный мультфильм

1200 * 1200

Наушники стиль анимации

1200 * 1200

/ourmid/pngtree-game-character-anime-comic-girl-png-image_492749.jpg» alt=»Игровой персонаж анимация мультипликация девушка, девочки, Девушка подростковая, манга PNG и PSD»/>

Игровой персонаж анимация мультипликация девушка

2000 * 2000

ластик Аниме анимация Резиновый плот Рисунок рисованной

2000 * 2000

9 аним0008

9 девушка девушка Игровой персонаж

2000 * 2000

спрайт лист флеш персонажа с анимацией для создания 2д игры

3000 * 3000

анимация компьютер редактор контролировать по линии, линия, 3d, диаграмма PNG ресурс рисунок и векторное изображение

/ourmid/pngtree-teenage-girl-anime-character-hand-painted-png-image_356860.jpg» alt=»Девушка подростковая анимация фигура Рисованной, фигура, Цветение персика, Девушка PNG и PSD»/>

Девушка подростковая анимация фигура Рисованной

1290 * 1338

/ourmid/pngtree-cartoon-anime-cute-girl-cartoon-anime-lovely-png-image_372185.jpg» alt=»Мультфильм аниме милая девушка мультипликация анимация прекрасный, Большие глаза, мультипликация, прекрасный PNG и PSD»/>

анимация милая анимация аниме прекрасный

9000 4 2480 * 3508

/ourmid/pngtree-mg-flash-animation-illustration-character-png-image_509425.jpg» alt=»mg flash анимация иллюстрация роль, стиле, иллюстрация, Студенческая одежда PNG ресурс рисунок и векторное изображение»/>

мг flash анимация иллюстрация роль

2362 * 4134

Аниме животных Украшение животных Мультфильм анимация анимация

2000 * 3020

/ourmid/pngtree-black-cat-window-cartoon-anime-png-image_491257.jpg» alt=»Черный кот окно мультипликация анимация, простой, милый, окно PNG и PSD»/>

Черный кот окно мультипликация анимация 12205

1092

молния энергия мультфильм молния анимация молния игра энергия

1200 * 1200

/ourmid/pngtree-girl-girl-game-character-anime-png-image_492515.jpg» alt=»девочки девушка Игровой персонаж анимация, мультипликация, анимация, девушка PNG и PSD»/>

девочка девушка Игровой персонаж анимация

2000 * 2000

Версия q анимация фигура мультипликация

2000

детский день счастливый детский день радуга анимация небо фон

2000 * 3000

анимация компьютер редактор контролировать по линии

5556 * 5556

мультипликация Рисованной анимация животное

2000

О сенняя тема тема поле пугало иллюстрация осень Осенние комиксы Аниме анимация Осенний пейзаж

2000 * 2000

Мультфильм рисованной созидательный Аниме анимация простой

658 * 1149

мультфильм нарисован вручную

анимации простой

2000

Мультфильм аниме каваи девушка мультипликация анимация прекрасный

2480 * 3508

игры анимация сцена Настройка концепции

2040 * 1875

пользовательский интерфейс игры

Открой анимации руки

2292 * 2292

трёхмерная анимация линии саймреап

1200 * 1200

Аниме животных Украшение животных Анимация анимация

2000 * 20008 0004 Костюм персонажа q версия мультфильма мужской ход мг анимация

2000 * 2000

Рисованной мультипликация анимация анима

Apng — новый формат анимации

Наверное, каждый дизайнер страдал из-за формата gif . Раньше это был единственный формат покадровой анимации для веб-сайтов. Не считая, конечно, flash , использование которого требует наличия на компьютере обновленного Flash Player , что в принципе неудобно. Несколько лет назад появился новый анимированный формат APNG для веба, который, как утверждают, установлены всеми браузерами.Давайте разберемся, так ли он хорош.

Поэкспериментировать с форматом APNG я решила, когда рисовала анимированные открытки с поздравлениями, которые вы, кстати, можете скачать бесплатно на моем сайте.

Что нам сулят создатели APNG:

Поддержка миллионов цветов (в формате gif — это максимум 256 цветов)
Небольшой вес анимации (больше чем у gif , но все же)
Поддержка всех браузерами (с достаточно недавнего времени)

Что мы получаем в итоге:

Отсутствие возможности сохранения в формате APNG в таких распространенных программах как Adobe Animate и Adobe Photoshop (у последнего есть плагины для этих целей, но я не стала ими пользоваться).
Качество результата — такое же, как и в случае с форматом gif .
Размер становится больше (при использовании самого простого способа получения анимации apng — сборка из png следовать в программе APNGb )

Чтобы не быть голословной покажу, какой у меня вышла анимированная открытка в форматах gif и apng .

В первом случае возьму открытку из статьи «Скачать бесплатно анимированные открытки».Весит файл 55 кб

Открытка создавалась в программе Adobe Animate и затем получить анимированную открытку из Adobe Animate в формате apng , нужно сначала опубликовать файл, как последовательность png файлов, а с помощью программы APNGb, которая распространяется бесплатно для персонального использования.

Качество осталось таким же, вес увеличился до 88 кб.

Подписывайтесь на обновления блога «Дизайн в жизни»

по электронной почте или по почте

и мы обязательно опубликуем для вас еще больше полезных статей из мира дизайна звука и уроки по Adobe Audition 2020.Пишите в комментариях, какие темы были бы для вас наиболее интересными и мы построимся их изучить для вас.

(Посещали 299 раз, 1 посещали сегодня)