Анимация в iOS-приложениях или как я создаю файлы APNG

Sasha Bor
Sasha Bor
Aug 9, 2017 · 5 min read

Недавно я столкнулась с необходимостью создать анимацию в формате APNG. Раньше мы как-то всегда обходили анимацию стороной. «Это долго», «это сложно», «это не MVP» — говорили они. В данный момент я проектирую как раз MVP-проект. Это значит, что все что я рисую, должно быть сверстано максимально быстро, без особой траты времени. Стандартными инструментам iOS Kit пользоваться довольно скучно, и я решила разнообразить приложение с помощью мини-откликов на действия пользователя. Мне захотелось создать что-то более интересное, чем стандартный тост. iOS-разработчик, с которым я работаю, сказал что сейчас самым быстрым вариантом создания такого отклика, будет анимация в формате APNG. Мне требовалось создать файл, а он просто импортирует его в проект.

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


Что же такое APNG?

Формат APNG (Animated Portable Network Graphics) — это анимированный формат изображения на основе png. Появился он в далеком 2008, но почему-то информации на эту тему не так много. В данном случае для меня этот формат интересен для создания микроанимаций, спиннеров, анимированных заглушек и и т.д. для ускорения процесса разработки.

Спецификация APNG была разработана Стюартом Парментером и Владимиром Вукичевичем из Mozilla Corporation для хранения элементов интерфейса, таких, как анимация загрузки.

(Источник — Википедия)


Почему не MNG?

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

(Источник — http://apng.ru/analogs.html)

Создать анимацию в MNG и внедрить ее очень сложно. Такие усилия себя не оправдают.


Почему не GIF?

В файлах GIF портится качество и поддерживается меньше цветов. Также GIF не поддерживает полупрозрачность. Так что этот формат имеет много минусов, сравнительно с APNG.

After Effects

Когда мы разобрались с форматом, можно приступать к анимации. Формат APNG состоит из последовательности файлов PNG. И для того чтобы создать анимацию, нам нужно сделать раскадровку. Это набор PNG-файлов, идущих друг за другом, так называемые «PNG Seguence». Чтобы сделать раскадровку, я использовала After Effects, просто потому что мне так удобней. В целом, можно использовать любую программу для анимации, где есть возможность выгрузки PNG Seguence. Некоторые используют Photoshop, для него есть даже плагин «Аpngasm». Лично я не люблю анимировать в Photoshop, поэтому рассматривать его не буду. В качестве примера возьмем анимацию добавления в избранное.

Анимация добавления и удаления из избранного.

В After Effects я создала довольно простую анимацию для плотности 3x, чтобы потом легко можно было уменьшить масштаб до 2x. Без особого углубления в детали, расскажу только про экспорт. Чтобы получить желаемую раскадровку, в настройках меняем только два параметра:

  • Формат «PNG Seguence»;
  • Channels «RGB + Alpha» (Alpha нужен для прозрачности, в моем случае это было необходимо).

Итог рендера — набор png-файлов. Далее рекомендую выгрузить файлы с резайзом до 2x. отметив галочкой «resize» и уменьшив значение до нужного. Зачем это делать через AF я расскажу ниже.

Настройки для выгрузки 3x + resize до 2x. Справа финальные файлы выгрузки.

APNG-maker

Существует много программ и online-сервисов для склеивания PNG. Я воспользовалась одним из них. Много времени на анализирование лучшей online-утилиты у меня не было, я взяла одну из списка рекомендаций на просторах интернета и осталась довольна выбором.

После обработки сервисом изображений надо изменить значение «Delay time» (задержка по времени) на «0». По умолчанию стоит « 20». Если это значение не изменить, анимация будет тормозить.

Скриншот сервиса

Delay time 20

Delay time 0

Вес такого файла у меня составил 54.33kb. Далее можно поработать немного над оптимизацией. В моей анимации, после появления, звездочка остается статичной на какое-то время. У раскадровки это где-то 20 изображений. Я могу удалить все эти изображения и оставить одно с «delay time 60» . Это облегчило мой файл до 49.5kb.

Нажмите “Skip” на повторяющихся кадрах

Далее можно воспользоваться помощником «Optimize» в одной из вкладок. На выходе файл иногда получается меньше. В моем случае уменьшилось лишь до 49.46kb.

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

Следует проделать то же самое для плотности 2x. Почему нельзя воспользоваться конвертером «resize» того же сервиса? Сначала я так и поступила, по после уменьшения масштаба на мое удивление файл увеличился в размере с 48.5 до 69.07. Это было неприемлемо и я вернулась в AE, чтобы выгрузить файлы с пометкой «resize». Этот файл получился весом 34.5kb. Так что вот почему лучше делать масштабирование в After Effects — размер файла уменьшится в два раза.

Resize в конвертере. Увеличение веса.
Создание APNG из повторно выгруженных файлов AF.

Браузер

Когда вы нажмете «Save», скачается файл с разрешением png. Если попытаться открыть файл через стандартные средства, то вы увидите только статичный первый кадр. Конечно, для просмотра можно скачивать какие-нибудь специальные программы, но проще всего просто перетащить в окно браузера (я использую Google Chrome). Там анимация отобразится точно так, как будет в приложении.

И в заключение

В общем, все что осталось сделать, это отправить разработчику файлы двух плотностей 2x и 3x. Создание таких анимаций занимает не так много времени у дизайнеров. Единственный минус в том, что это увеличивает вес вашего приложения (если сравнивать с программной анимацией), так что злоупотреблять такими файлами не стоит.

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

Sasha Bor

Written by

Sasha Bor

Дизайнер-проектировщик интерфейсов https://dribbble.com/sasha_bor

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade