Освой Android играючи
/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000
Веб-приложение Shape Shifter позволяет создать анимацию из векторных рисунков.
Для экспериментов можете использовать стандартные значки https://material.io/icons/ или свои собственные.
Рассмотрим несколько приёмов работы с приложением для знакомства.
Выбираем Import | SVG и находим файл на диске для работы. Выбранное изображение появится как path
Для создания анимации щёлкаем по значку с часами (это можно сделать в двух местах). Я выбрал значок в верхнем правом углу.
Для изменения цвета подойдёт анимация fillColor. Значения по умолчанию будут использовать один цвет для начальной и конечной позиции. Поэтому нам нужно изменить один из них - toValue: #ff0000 (красный цвет). Выбираем продолжительность анимации через startTime и endTime, такжем можно выставить продолжительность мышкой в нижней части приложения на временной шкале. Поищите подходящий интерполятор для анимации в interpolator.
Осталось нажать на кнопку Play и посмотреть на созданную анимацию. Слева есть вспомогательный переключатель Slow motion (S), который поможет просмотреть сложную анимацию в замедленном режиме для отладки. Справа - переключатель Repeat (R) для бесконечной анимации.
Для сохранения экспериментов используйте File | Save, чтобы потом можно вернуться и продолжить работу.
Для сохранения анимации используйте Export, который предложит три варианта экспорта. Если выбрать Animated Vector Drawable, то сохранённый файл можно скопировать в папку res/drawable проекта в студии и использовать в работе. Возможно, потребуется немного отредактировать файл для дополнительных настроек. Например, я добавил в файл две строчки.
android:repeatMode="reverse"
android:repeatCount="infinite"
Это позволило увидеть созданную анимацию в бесконечном режиме. Пример с анимированными векторными изображениями есть в статье о AnimatedVectorDrawable.
Сделаем превращение одной фигуры в другую. Нам понадобятся две картинки - Play и Pause. Импортируем их.
Для значка Play зададим анимацию pathData. Для toValue следует задать контур новой фигуры. Для этого выберем значок Pause и скопируем данные из pathData. Мы получим предупреждение, так как число данных контура у двух фигур не совпадает.
Значок паузы нам больше не понадобится, данные мы из него скопировали. Поэтому удаляем.
Нажимаем на кнопку Auto fix, чтобы приложение само исправило ситуацию. Но скорее всего результат вас не устроит. Поэтому нажимаем на значок редактирования и смотрим, что можно исправить.
Треугольник разбит на две группы по пять точек, некоторые из них совпадают. Число точек избыточно, упростим их. Выберем оранжевый кружочек под номером 2 и перетащим на кружочек под номером 1. После каждого редактирования можете запускать анимацию, чтобы увидеть изменения (включайте замедленный режим). По такому же принципу отредактируйте остальные кружочки.
Можно добавить группу, к которой применим поворот и другие виды анимации.
У приложения есть несколько демо-примеров (File | Demo).
Для работы с приложением рекомендую посмотреть несколько видео.
Creating a play-to-pause icon animation w/ Shape Shifter
Quick Tip: Easily Morph SVGs Using Shape Shifter
Shape Shifter split stroked subpath demo
Advanced Vector Path Animation with Shape Shifter
Nick Butcher & Doris Liu - Learn Some New Moves: Advanced Android Animation
In-depth path morphing w/ Shape Shifter
droidcon SF 2017 - ShapeShifting: Creating delightful icon animations
Check Mark Animation | Android Studio & Shapeshifter Tutorial
INSTAGRAM Like Animation | Android Studio & Shapeshifter
An Introduction to Icon Animation Techniques | Android Design Patterns