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

Nikolay Kuchkarov
The UX Files
Published in
4 min readJun 7, 2017

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

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

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

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

Условная структура XML Bundle

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

Свойства применяемые к Path и Clip-Path
Свойства применяемые к Group

Простая анимация

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

Исходный lock.xml выглядит так:

Сначала переведем статичный вектор в анимированный, обернув все в тэг animated-vector и добавив appt:attr тэги для того чтобы собрать xml bundle. Чтобы анимировать дужку замка, необходимо первый path обернуть в group и присвоить ему уникальное имя (например shackle).

Затем создадим target внутри animated-vector, в котором укажем название группы, которую будем анимировать: shakle. Внутри него создадим ObjectAnimator, который будет отвечать за анимацию открытия дужки, используя свойство translateY. В propertyName указывается свойство которое мы собираемся анимировать. В нашем случае это translateY. Свойство duration — время выполнения анимации в миллисекундах. В valueFrom и valueTo указываются начальные и конечные значения в dp соответственно. valueType в нашем случае имеет значение floatType, а если бы мы анимировали значения цвета то был бы colorType, а для морфинга использовался бы pathType.

В результате у нас получилась простая анимация открытия замка. Для того чтобы добавить анимацию закрытия, необходимо создать новый objectAnimator. Для применения нескольких анимаций к одному target лучше всего использовать set.

Пример другой анимации с использованием set.

Свойство ordering отвечает за порядок воспроизведения анимации в set. Может принимать два значения: together (одновременное воспроизведение — значение по умолчанию), sequentially (последовательное воспроизведение). Помимо этого можно использовать свойство repeatMode для указания типа повтора анимации, а repeatCount указывает количество повторов. Стоит учитывать, что если в set используется последовательное воспроизведение, то repeatCount=infinite будет работать только в первом objectAnimator, так как очередь до остальных никогда не дойдёт.

В следующей части мы рассмотрим как создавать сложные комплексные анимации и какие инструменты могут нам в этом помочь.

Все приведенные примеры доступны для самостоятельного изучения в проекте на gitHub.

SPOILER: В ожидании следующей части статьи, можете самостоятельно поиграться вот с этим инструментом https://romannurik.github.io/AndroidIconAnimator/

Над статьей работали Nikolay Kuchkarov & Igor Solkin

--

--

Nikolay Kuchkarov
Nikolay Kuchkarov

Written by Nikolay Kuchkarov

Lead Product Designer at Avito; Former Lead UX & UI Designer at Mail.ru Group

Responses (1)