Animation: Jump-through

For nylig fangede et opkald om hjælp mig; spørger hvordan man implementerer en fancy 'få placering'-animation på Android:

- http://drbl.in/2470871 af @lekarew

Jeg troede straks, at dette var en førstekandidat for en AnimatedVectorDrawable (AVD i det følgende), så jeg skulle demonstrere en måde at implementere dette på. Nogle mennesker spurgte, hvordan jeg gjorde det ... så her er en oversigt.

For en introduktion til AnimatedVectorDrawables funktioner, kan jeg varmt anbefale dette indlæg af Alex Lockwood

Omrids

Ser man på kompositionen, består dette af tre typer animationer:

  1. Stiften flytter & ændrer form for at få den til at hoppe; AVD understøtter dette ved at animere den faktiske form på en sti, kendt som sti morphing.
  2. Prikkerne bevæger sig tilbage, dette vil være en enkel oversættelse.
  3. Prikkerne falder ind / ud, når scenen kommer ind / ud.

Sporing

Desværre havde jeg ikke adgang til kildekunstværket, bare GIF på dribler ... forhåbentlig behøver du ikke gøre dette i dine animationer!

Jeg åbnede GIF i Photoshop, som giver en tidslinjevisning af animationens rammer. Jeg gik igennem dette og gemte kopier af rammer, hvor stiften var i ekstreme bevægelser, dvs. ved at ændre retning eller ændre form markant. Disse 'poseringer' vil være de former, som stiften vil formes imellem. I alt var der 5 større positioner.

Jeg indsatte hver af disse i Sketch (mit foretrukne vektortegningsværktøj) og sporet ud stiften i hver af poserne.

De 5 former pin 'morphs' imellem

Nogle værktøjer kan automatisk spore rasterbilleder og producere vektorstier til dig. Når jeg vidste, at jeg ville udføre en sti-morf-animation, betød det imidlertid, at jeg havde brug for 'kompatible stier'; det er hver sti, der skal have det samme antal og typen af ​​punkter. Som sådan ved at tegne stiften med en enkel form (bestående af 8 punkter, hver med 2 kontrolpunkter) og manuelt ændre den til at danne hver posering, kunne jeg være sikker på, at vi senere kan animere mellem figurerne.

Derefter eksporterede jeg hver ramme som individuelle SVG-filer. Nu er SVG en enorm spec, og Android's VectorDrawable understøtter kun en undergruppe af den. Det er også nyttigt at huske, at de skal analyseres og gengives på en begrænset mobil enhed; derfor forsøger jeg altid at forenkle mine SVG'er. For at gøre dette løb jeg dem gennem SVGO (ved hjælp af SVGOMG af Jake Archibald) og indstillede præcisionen til 1 decimal.

Hop rundt

Nu hvor vi har stierne for hver pose i tappen, er det tid til at få dem til at flytte! For at gøre dette vendte jeg mig til den fantastiske Icon Animator af Roman Nurik. Dette er en webbaseret IDE til oprettelse af AnimatedVectorDrawables. Jeg faldt i det første SVG og klikkede derefter på stopur-ikonet ved siden af ​​pin-laget og tilføjede en ny pathData-animation. Dette producerer et inspektionspanel, hvor jeg kunne indsætte stiften fra stiften fra den næste ramme til toValue. Jeg gentog dette fire gange mere for at lave vores animation (hvor det sidste trin animeres fra det endelige positivt, tilbage til det første).

For tidsværdierne henviste jeg tilbage til den originale GIF, hvor hver ramme varede 30ms, så hvis der var 4 rammer mellem poser, brug en varighed på 120ms osv. Valgte jeg bare at bruge standardmateriale interpolatorer, men i virkeligheden kunne dette drage fordel af finjustering .

Hurdles

For de prikker, der bevæger sig, kan vi udføre en enkel oversættelse. Ser man på kildesammensætningen, er hver tredje prik større og rød; hvordan implementeres dette i en dejlig løkke? Mens du kunne implementere dette med kun 3 prikker og animere hver enkelt; Jeg besluttede at inkludere 5 prikker, hvor de højre prikker strækker sig ud over visningen:

Dette gør det muligt for os at animere hele gruppen af ​​prikker, der er tilbage alle sammen, når den fjerde prik når den første placering af den første prik, nulstiller vi øjeblikkeligt oversættelsen og hopper den tilbage til dets startpunkt. Neat!

Kommer og går

Vi vil have, at prikkerne falmer ind, når de kommer ind og falmer ud, når de forlader, dette er en simpel animation af fyldet Alpha, det overlader jeg dig at se, hvordan det er opnået!

Slyng løkken

For at gøre dette til en komplet looping-animation er der et par ting at overveje. Punktanimationen har tredobbelt varigheden af ​​pin-jumping. Jeg overvejede at opdele dem i 2 separate AVD'er og lagde dem ... men besluttede, at gentagelse af hoppet 3 gange var enklere!

Jeg ramte den magiske eksportknap i Icon Animator, som gav mig AVD-definitionen, klar til at komme ind i mit projekt. Værktøjet er dog stadig i 'preview', så jeg lavede et par justeringer til det for at rydde op i output, nemlig fjerne eventuelle overflødige attributter og udarbejde eventuelle gentagne værdier (som de forskellige pin-stier og nogle farver) til en ressourcefil til at lave dem mere vedligeholdelige.

Det var vanskeligere at fremstille den fulde AVD-loop, end jeg havde forestillet mig. Tilsyneladende ignoreres repeatMode på animationssæt (der er indgivet fejl). Jeg arbejdede omkring dette ved at lytte til slutningen af ​​animationen og starte den igen. Desværre blev tilbagekald kun tilføjet i API23, men du kunne opnå den samme effekt via postDelayed osv.

Bliv animeret

Du kan finde en kerne af koden her eller tjek den fulde komposition i Icon Animator og spille med den.

Forhåbentlig har dette indlæg vist dig, at AnimatedVectorDrawable er meget magtfuld, og at du relativt let kan oprette rige animationer. Jeg håber også, at deling af min arbejdsgang hjælper med at afmystificere processen og måske inspirerer dig til at oprette din egen. Fortæl mig det, hvis du gør det!