Освой Android играючи

Сайт Александра Климова

Шкодим

/* Моя кошка замечательно разбирается в программировании. Стоит мне объяснить проблему ей - и все становится ясно. */
John Robbins, Debugging Applications, Microsoft Press, 2000

Shape Shifter

Веб-приложение Shape Shifter позволяет создать анимацию из векторных рисунков.

Для экспериментов можете использовать стандартные значки https://material.io/icons/ или свои собственные.

Рассмотрим несколько приёмов работы с приложением для знакомства.

Меняем цвет

Выбираем Import | SVG и находим файл на диске для работы. Выбранное изображение появится как path

Shape Shifter

Для создания анимации щёлкаем по значку с часами (это можно сделать в двух местах). Я выбрал значок в верхнем правом углу.

Shape Shifter

Для изменения цвета подойдёт анимация fillColor. Значения по умолчанию будут использовать один цвет для начальной и конечной позиции. Поэтому нам нужно изменить один из них - toValue: #ff0000 (красный цвет). Выбираем продолжительность анимации через startTime и endTime, такжем можно выставить продолжительность мышкой в нижней части приложения на временной шкале. Поищите подходящий интерполятор для анимации в interpolator.

Shape Shifter

Осталось нажать на кнопку 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. Мы получим предупреждение, так как число данных контура у двух фигур не совпадает.

Shape Shifter

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

Нажимаем на кнопку 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

Реклама