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

Nikolay Kuchkarov
Jun 7, 2017 · 4 min read

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

К базовой анимации можно отнести простую манипуляцию параметрами объекта, такие как положение, масштаб, поворот и опорная точка (точка относительно которой происходит анимация). Такую анимацию мы можем применять только к 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

The UX Files

Everything about User Experience Design

Thanks to Igor Solkin

Nikolay Kuchkarov

Written by

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

The UX Files

Everything about User Experience Design

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