Svg анимация android studio

Векторная анимация в Андроид (Часть первая)

Уже довольно давно в Андроиде существует возможность использовать векторные ресурсы вместо png нарезки. Такая возможность появилась с релизом Android 5.0 Lollipop и API 21. Для более ранних версий системы, мы можем использовать AppCompat (библиотека совместимости), благодаря которой статичный вектор будет работать с API 7 (Android 2.1), а анимированный с API 11 (Android 3.0 Honeycomb).

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

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

Вектор на Андроид?

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

К сожалению (или к счастью), в Андроиде нельзя использовать svg файлы напрямую, по крайней мере, без использования сторонних библиотек. Причина очень проста и состоит в том, что SVG формат очень комплексный и богатый на возможности и поддержка столь богатого функционала сложна и не целесообразна для таких простых вещей как иконки, ну и не стоит забывать о проблеме производительности и совместимости. Именно поэтому в андроиде используют более простой формат, который, тем не менее, во многом похож на svg.

Векторная графика представлена в виде двух классов VectorDrawable и AnimatedVectorDrawable. Из названия классов понятно, что первый отвечает за статичный вектор, а второй за его анимацию. Классы описываются обычным XML ресурсом.

Для начала рассмотрим VectorDrawable, который имеет следующую структуру:

В элементе содержатся параметры высоты и ширины объекта. Внутри есть элемент который может содержать в себе элементы

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

и описывают геометрию и цвет объекта.

Для того чтобы добавить анимацию мы используем класс ObjectAnimator который просто применяем на объекты VectorDrawable. Мы можем применять анимацию как к общей группе так и к конкретному

. Анимация может представлять собой простую манипуляцию параметрами объекта так и сложный морфинг.

Раньше для реализации анимации в приложении необходимо было использовать как минимум 3 xml файла: 1 файл для VectorDrawable который необходимо анимировать, другой для аниматора описывающего анимацию и последний файл — объединяющий непосредственно аниматор и VectorDrawable. Чем сложнее анимация, тем больше файлов необходимо создавать, что часто приводило к путанице.

На Google I/O 2016 был представлен новый формат — XML bundle. Он позволяет описывать векторную анимацию одним файлом.

По сути, мы всю необходимую информацию размещаем в AnimatedVectorDrawable. Собрать такой файл очень легко, на картинке выделены куски, которые просто вырезаются из соответствующих ресурсов и вставляются между специальными aapt тэгами.

Готовим вектор под андроид

Для начала нам нужен любой графический редактор, который умеет на выходе выдавать svg файл. К счастью, их великое множество: Photoshop, Illustrator, Sketch, Inkscape, Affinity Designer и т.д.

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

Для примера я сделал простую иконку замка и разделил её на два шейпа (группы) для последующей анимации. Сохраняем в svg и обязательно проверяем корректность экспорта. Очень часто проблемы возникают со stroke и от избыточной вложенности объектов. Как правило, старайтесь по максимуму объединять всё в один объект, а stroke переводить в shape(outline).

Конвертация SVG в XML

Есть несколько способов сделать конвертацию svg файла в xml.

Первый способ — это сделать всё руками. Это конечно, не очень удобно, но ничего сложного тут нет. Просто переносим куски из svg в xml используя правильные имена параметров. Ниже я выделил куски, которые практически полностью совпадают.

Второй способ — В Android Studio есть инструмент Vector Asset Studio, который позволяет автоматически выполнить перевод SVG файла в XML. Ресурсы можно выбирать из библиотеки иконок или указать свой SVG файл. Благодаря превью можно сразу оценить корректность экспорта. Есть полезные настройки.

Третий способ — это использовать онлайн инструменты, например http://inloop.github.io/svg2android/. Лично я предпочитаю именно его, так как в нем есть полезные настройки по оптимизации файла и самое главное — возможность выгрузить и забрать все пакетом. К сожалению, нет превью результата.

В первой части мы подробно рассмотрели структуру векторных ресурсов на андроид и способы конвертации ресурсов из svg в xml. В следующей части мы рассмотрим несколько способов работы с анимацией.

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

Все используемые материалы можно найти на GitHub: XML Bundle, Файлы замка.

Источник

Русские Блоги

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

SVG для новичков в Android

Эффект анимации svg, реализованный svg в Android (супер простой, в дополнение к анимации пути svg в Android, svg совместим с версиями ниже 3.0, а исходный код был загружен на github)

Что такое SVG

концепция SVG

SVG относится к Scalable Vector Graphics (Масштабируемая векторная графика)

SVG используется для определения векторной графики для Интернета.

SVG использует формат XML для определения графики

Изображения SVG не потеряют своего графического качества при увеличении или изменении размера.

SVG — стандарт Консорциума World Wide Web.

SVG интегрирован со стандартами W3C, такими как DOM и XSL.

svg история и преимущества

SVG стал рекомендованным стандартом W3C 14 января 2003 года.

SVG можно читать и изменять с помощью многих инструментов (например, Блокнота)

По сравнению с изображениями JPEG и GIF, SVG меньше по размеру и более сжимаем.

Изображения SVG можно печатать с высоким качеством при любом разрешении.

SVG можно увеличивать без ухудшения качества изображения

Текст в изображении SVG является необязательным и также доступен для поиска (очень подходит для создания карт)

SVG может работать с технологией Java

SVG — это открытый стандарт

Файлы SVG — это чистый XML

Инструменты SVG и доступ к ресурсам SVG

Веб-сайт значков iconfont от Alibaba может загружать изображения в формате svg.

Различные инструменты дизайна также поддерживают экспорт изображений в формате svg.

Определите простой svg в html

Как использовать SVG в Android

В Android svg определяется вектором, вектор упрощает синтаксис svg и в основном рисует графическую траекторию через путьПодробности

Инструкции по поддержке

M = moveto (M X, Y): переместить перо в указанную координату

L = lineto (L X, Y): провести прямую линию до указанной координатной позиции

H = горизонтальная линия (H X): проведите горизонтальную линию до указанной позиции координаты X

V = вертикальная линия (V Y): проведите вертикальную линию до указанной позиции координаты Y

C = curveto (C X1, Y1, X2, Y2, ENDX, ENDY): кубическая кривая Бессе

S = smooth curveto(S X2,Y2,ENDX,ENDY)

Q = квадратичная кривая Бельзера (Q X, Y, ENDX, ENDY): квадратичная кривая Бельзера

T = гладкая квадратичная кривая Бельзераto (T ENDX, ENDY): отображение

A = эллиптическая дуга (A RX, RY, XROTATION, FLAG1, FLAG2, X, Y): дуга

Z = closepath (): закрыть путь

Ось координат центрируется в точке (0,0), ось X расположена горизонтально вправо, а ось Y — горизонтально вниз.

Все инструкции в верхнем и нижнем регистре. Абсолютное позиционирование в верхнем регистре относится к глобальной системе координат; относительное позиционирование в нижнем регистре относится к системе координат родительского контейнера

Пробел между инструкцией и данными можно опустить

Только одну и ту же инструкцию можно использовать несколько раз

Android Studio простое использование svg

Сначала создайте файл ресурсов в разделе drawable, выберите вектор в качестве типа и нарисуйте графику, указав цвет и траекторию через атрибут пути

ImageView устанавливает векторный ресурс через свойство app: srcCompat, а также может использоваться в качестве селектора для установки определенного svg в качестве фона для кнопки.

Определите градиентную анимацию для вектора (использование svg, конечно, не для достижения такой простой функции)

Затем определите клей (файл ресурсов, связанный с векторными ресурсами и анимацией) в разделе drawable, тип — animated-vector

Затем установите для ресурса ImageView в макете

Активировать векторную анимацию в действии

Принципы других SVG-анимаций аналогичны, за исключением того, что атрибуты анимации отличаются. Определенные анимации могут быть реализованы путем рисования контуров обрезки (trimPathEnd), цветов кисти (strokeColor) или данных контура (pathData). (Система знаний получена от учителя Сюй Ишэн )

Сравнение векторной анимации и растрового исходного изображения

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

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

Какой из них использовать в разработке, в основном рассматривается из-за сложности изображения и частоты обновления изображения, см. Следующие моменты

1. Эффективность рисования Bitmap не обязательно выше, чем у Vector. У них есть определенный баланс. Когда Vector относительно прост, его эффективность должна быть лучше, чем у Bitmap.

High, поэтому для обеспечения высокой эффективности Vector необходимо, чтобы Vector был проще, а pathData — более точным и простым. Когда Vector является сложным, ему необходимо

растровое изображение вместо

1. Вектор подходит для небольших значков, таких как ICON, Button, ImageView или необходимых эффектов анимации. Поскольку растровое изображение имеет кеш в ЦП,

Vector не работает, поэтому вектор не может часто перерисовываться

Когда векторное изображение слишком сложное, следует обращать внимание не только на эффективность рисования, но и на эффективность инициализации.

Скорость загрузки svg будет выше, чем у PNG, рендеринг будет медленнее, чем у PNG, но увеличение скорости загрузки компенсирует скорость и недостатки рисования

Источник

Векторная анимация в Андроид (часть 2)

Прежде чем приступить к анимации необходимо понять какие возможности нам предлагает Андроид. Типы анимации в андроид можно условно разделить на базовую и комплексную.

К базовой анимации можно отнести простую манипуляцию параметрами объекта, такие как положение, масштаб, поворот и опорная точка (точка относительно которой происходит анимация). Такую анимацию мы можем применять только к Group внутри VectorDrawable (кроме того такие типы анимации применимы и к любым View, например: Button, TextView и т.д, но в статье мы будем рассматривать базовую анимацию только применительно к векторным объектам).

К комплексной анимации можно отнести анимацию применяемую только к Path в VectorDrawable: манипуляция цветом заливки и обводки, альфой, толщиной обводки, тримминг обводки, и изменение геометрии (морфинг). Все эти свойства и их значения описываются внутри ObjectAnimator. ObjectAnimator предназначен для анимации только одного свойства. Для анимации нескольких свойств добавляются соответствующие аниматоры которые можно объеденить в set, но об этом позже.

Схема поможет разобраться в том, какую анимацию к чему мы можем применять.

В первом ObjectAnimator перечислены свойства: fillColor, fillAlpha, strokeColor, strokeAlpha, strokeWidth, trimPathStart, trimPathEnd, trimPathOffset, pathData, которые мы можем применять только к Path и Clip-Path. Во втором ObjectAnimator свойства применяемые только к Group: Alpha, translateX, translateY, scaleX ,scaleY, rotation, pivotX, pivotY.

Источник