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

Недавно я столкнулась с необходимостью создать анимацию в формате 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 я расскажу ниже.



APNG-maker
Существует много программ и online-сервисов для склеивания PNG. Я воспользовалась одним из них. Много времени на анализирование лучшей online-утилиты у меня не было, я взяла одну из списка рекомендаций на просторах интернета и осталась довольна выбором.
После обработки сервисом изображений надо изменить значение «Delay time» (задержка по времени) на «0». По умолчанию стоит « 20». Если это значение не изменить, анимация будет тормозить.



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

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


Браузер
Когда вы нажмете «Save», скачается файл с разрешением png. Если попытаться открыть файл через стандартные средства, то вы увидите только статичный первый кадр. Конечно, для просмотра можно скачивать какие-нибудь специальные программы, но проще всего просто перетащить в окно браузера (я использую Google Chrome). Там анимация отобразится точно так, как будет в приложении.
И в заключение
В общем, все что осталось сделать, это отправить разработчику файлы двух плотностей 2x и 3x. Создание таких анимаций занимает не так много времени у дизайнеров. Единственный минус в том, что это увеличивает вес вашего приложения (если сравнивать с программной анимацией), так что злоупотреблять такими файлами не стоит.
Спасибо за чтение, надеюсь, мой способ покажется вам удобным. А как Вы создаете анимированные файлы для вашего интерфейса?
