Векторная анимация в Андроид (часть 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.
Простая анимация
Начнем с базовой векторной анимации. Попробуем сделать анимацию открытия и закрытия замка. Ранее мы уже подготовили файл для такой анимации, разделив иконку на 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
