Анимация: Прескачане

Наскоро призив за помощ ми хвърли око; питай как да внедриш фантазия „получаване на местоположение“ анимация в Android:

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

Веднага помислих, че това е основен кандидат за AnimatedVectorDravable (AVD по-долу), така че да демонстрира един начин за реализиране на това. Някои хора питаха как съм направил това ... така че има разбивка.

За запознаване с възможностите на AnimatedVectorDravable, горещо препоръчвам тази публикация от Алекс Локвуд

очертание

Гледайки композицията, тя е съставена от три вида анимация:

  1. Щифтът се движи и променя формата си, за да скочи; AVD поддържа това, като анимира действителната форма на пътека, известна като морфинг на пътя.
  2. Точките се движат наляво, това ще бъде обикновен превод.
  3. Точките избледняват / влизат / излизат, когато влизат / излизат от сцената.

проследяване

За съжаление нямах достъп до произведения на произведения на изкуството, просто GIF в дрибъл ... надяваме се, че няма да се наложи да правите това в анимациите си!

Отворих GIF във Photoshop, който предоставя времева гледка на кадрите на анимацията. Преминах през това и запазих копия на кадри, където щифтът беше в крайности на движение, т.е. на път да промени посоката или да промени формата си значително. Тези "пози" ще бъдат формите, между които щифтът ще се премества. Общо имаше 5 основни пози.

Поставих всеки от тях в Sketch (предпочитан от мен инструмент за векторно рисуване) и проследих щифта във всяка от позите.

5-те оформя щифта

Някои инструменти могат автоматично да проследяват растерни изображения и да произвеждат векторни пътеки за вас. Като знам, че искам да извърша анимация на морфа на пътя, това означава, че имам нужда от „съвместими пътеки“; това е, че всеки път трябва да има еднакъв брой и вид точки. Като такъв, като нарисувате щифта с проста форма (съставена от 8 точки, всяка с 2 контролни точки) и ръчно го промените, за да оформите всяка поза, бих могъл да съм сигурен, че по-късно можем да анимираме между фигурите.

След това експортирах всеки кадър като отделни SVG файлове. Сега SVG е огромна спецификация, а AndroidD VectorDravable поддържа само подгрупа от него. Също така е полезно да запомните, че те трябва да бъдат анализирани и изобразени на ограничено мобилно устройство; затова винаги се опитвам да опростя SVG-ите си. За целта ги прокарах през SVGO (използвайки SVGOMG от Jake Archibald), като зададох точността на 1 десетичен знак.

Подскачам

Сега, когато имаме пътеките на всяка поза на щифта, е време да ги накараме да се движат! За целта се обърнах към страхотния аниматор на Icon от Роман Нурик. Това е уеб базирана IDE за създаване на AnimatedVectorDrawables. Пуснах в първия SVG и след това щракнах върху иконата на хронометъра до пиновия слой и добавих нова анимация на pathData. Това създава панел за инспектори, където мога да вмъкна пътя на щифта от следващия кадър в toValue. Повторих това още 4 пъти, за да направим нашата анимация (където последната стъпка оживява от финалната поза, обратно към първоначалната).

За стойностите на времето се върнах към оригиналния GIF, където всеки кадър е продължил 30 ms, така че ако имаше 4 кадъра между позите, използвайте продължителност 120 ms и т.н. Избрах да използвам само стандартни материали за интерполатори, но в действителност това може да се възползва от фина настройка ,

бягане с препятствия

За точките, които се движат заедно, можем да извършим прост превод. Гледайки изходния състав, всяка трета точка е по-голяма и червена; как да се реализира това в хубав цикъл? Докато можете да реализирате това само с 3 точки и да анимирате всяка поотделно; Реших да включа 5 точки, където най-десните точки се простират извън полето за показване:

Правейки това ни позволява да анимираме цялата група точки, останали заедно, след като четвъртата точка достигне първоначалното местоположение на 1-ва точка, мигновено нулираме превода, връщайки го обратно до началната му точка. Neat!

Отивам и си отивам

Искаме точките да избледняват, когато влизат и избледняват, докато напуснат. Това е проста анимация на fillAlpha, оставям това на вас, за да видите как е постигнато!

Направете контура

Сега, за да превърнем това в пълна циклична анимация, трябва да разгледаме няколко неща. Точката анимация е утроила продължителността на скачането на щифта. Обмислих да ги разбия на 2 отделни AVD и да ги слоя ... но реших, че повторянето на скока 3 пъти е по-просто!

Натиснах магическия бутон за експортиране в Icon Animator, който ми даде определението за AVD, готов да попадна на моя проект. Инструментът обаче все още е в „визуализация“, така че направих няколко ощипвания към него, за да изчистя изхода, а именно премахване на излишни атрибути и разделяне на всички повтарящи се стойности (като различните пътеки на пинове и някои цветове) към файл с ресурси, за да направя те по-поддържани.

Всъщност правенето на пълния AVD цикъл беше по-сложно, отколкото предполагах. Очевидно се повтаряMode на анимационни набори се игнорира (грешки са били подадени). Работих около това, като слушах края на анимацията и започвах отново. За съжаление обратните обаждания бяха добавени само в API23, но можете да постигнете същия ефект чрез postDelayed и т.н.

Анимирайте се

Можете да намерите същност на кода тук или да разгледате цялата композиция в Icon Animator и да играете с него.

Дано този пост ви е показал, че AnimatedVectorDravable е много мощен и че можете да създавате богата анимация сравнително лесно. Надявам се също, че споделянето на работния ми процес помага да демистифицирате процеса и може би ви вдъхновява да създадете свой собствен. Уведомете ме, ако го направите!