Анимация: Прыжок

Недавно мой взгляд привлек помощь; спрашивая, как реализовать необычную анимацию «получения местоположения» на Android:

- http://drbl.in/2470871 от @lekarew

Я сразу подумал, что это главный кандидат на AnimatedVectorDrawable (AVD далее), поэтому намеревался продемонстрировать один из способов реализации этого. Некоторые люди спрашивали, как я это сделал ... так что вот разбивка.

Для знакомства с возможностями AnimatedVectorDrawable я настоятельно рекомендую этот пост Алекса Локвуда

Контур

Если посмотреть на композицию, она состоит из трех типов анимации:

  1. Булавка перемещается и меняет форму, чтобы заставить ее прыгать; AVD поддерживает это, анимируя фактическую форму пути, известную как изменение пути.
  2. Точки движутся влево, это будет простой перевод.
  3. Точки исчезают как вход / выход из сцены.

трассировка

К сожалению, у меня не было доступа к исходной обложке, только GIF на дриббле… надеюсь, вам не придется делать это в ваших анимациях!

Я открыл GIF в Photoshop, который обеспечивает представление кадров анимации по временной шкале. Я прошел через это и сохранил копии фреймов, в которых штифт находился на крайних точках движения, то есть собирался значительно изменить направление или форму. Эти «позы» будут формами, между которыми булавка будет трансформироваться. Всего было 5 основных поз.

Я вставил каждый из них в Sketch (мой любимый инструмент для векторного рисования) и проследил булавку в каждой из поз.

5 формирует булавку

Некоторые инструменты могут автоматически отслеживать растровые изображения и создавать для вас векторные пути. Однако, зная, что я хочу выполнить анимацию морфинга пути, мне понадобились «совместимые пути»; то есть каждый путь должен иметь одинаковое количество и тип точек. Таким образом, рисуя булавку с простой формой (состоящей из 8 точек, каждая с 2 контрольными точками) и вручную изменяя ее, чтобы сформировать каждую позу, я мог быть уверен, что позже мы сможем анимировать между фигурами.

Затем я экспортировал каждый кадр как отдельные файлы SVG. Теперь SVG - это обширная спецификация, а Android VectorDrawable поддерживает только ее часть. Также полезно помнить, что их нужно анализировать и обрабатывать на ограниченном мобильном устройстве; поэтому я всегда стараюсь упростить свои SVG. Для этого я провел их через SVGO (используя SVGOMG Джейка Арчибальда), установив точность до 1 десятичного знака.

Прыгать вокруг

Теперь, когда у нас есть пути каждой позы булавки, пришло время заставить их двигаться! Для этого я обратился к потрясающему Icon Animator от Романа Нурика. Это веб-IDE для создания AnimatedVectorDrawables. Я поместил первый SVG-файл, затем щелкнул значок секундомера рядом со слоем булавки и добавил новую анимацию pathData. Это создает панель инспектора, где я мог бы вставить путь вывода из следующего кадра в значение toValue. Я повторил это еще 4 раза, чтобы сделать нашу анимацию (где последний шаг оживляет от финальной позы до исходной).

Для значений синхронизации я сослался на исходный GIF, где каждый кадр длился 30 мс, поэтому, если между позами было 4 кадра, используйте длительность 120 мс и т. Д. Я решил просто использовать стандартные интерполяторы материала, но в действительности это может выиграть от тонкой настройки. ,

барьерный бег

Для движущихся точек мы можем выполнить простой перевод. Глядя на исходную композицию, каждая третья точка больше и красная; как реализовать это в хорошем цикле? Хотя вы можете реализовать это всего за 3 точки и анимировать каждую по отдельности; Я решил включить 5 точек, где самые правые точки выходят за пределы области просмотра:

Это позволяет нам анимировать всю группу точек влево все вместе, как только 4-я точка достигает начального положения 1-й точки, мы мгновенно сбрасываем перевод, возвращая его обратно в исходную точку. Ухоженная!

Приходит и уходит

Мы хотим, чтобы точки появлялись и исчезали, когда они уходили, это простая анимация fillAlpha, я оставляю это на ваше усмотрение, чтобы увидеть, как это достигается!

Петля петля

Теперь, чтобы превратить это в полную циклическую анимацию, есть несколько вещей, которые необходимо учитывать. Точечная анимация имеет тройную продолжительность прыжка. Я решил разбить их на 2 отдельных AVD и распределить по слоям… но решил, что повторить прыжок 3 раза проще!

Я нажал волшебную кнопку экспорта в Icon Animator, которая дала мне определение AVD, готовое войти в мой проект. Однако инструмент все еще находится в режиме «предварительного просмотра», поэтому я сделал несколько настроек, чтобы очистить вывод, а именно удалить все лишние атрибуты и выделить любые повторяющиеся значения (например, различные пути выводов и некоторые цвета) в файл ресурсов, чтобы сделать их более ремонтопригодны.

На самом деле сделать полный цикл AVD оказалось сложнее, чем я предполагал. По-видимому, repeatMode для наборов анимаций игнорируется (ошибки были зарегистрированы). Я работал над этим, прислушиваясь к концу анимации и запуская его снова. К сожалению, обратные вызовы были добавлены только в API23, но вы можете добиться того же эффекта с помощью postDelayed и т. Д.

Получить анимацию

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

Надеемся, что этот пост показал вам, что AnimatedVectorDrawable очень мощный и что вы можете создавать анимации относительно легко. Я также надеюсь, что совместное использование моего рабочего процесса поможет демистифицировать процесс и, возможно, вдохновит вас на создание собственного. Дайте мне знать, если вы делаете!