Animație: Jump-through

Recent, un apel de ajutor mi-a atras atenția; întrebând cum să implementați o animație de „obținere locație” fantezistă pe Android:

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

Am crezut imediat că acesta este un candidat primar pentru un AnimatedVectorDrawable (AVD în continuare), așa că a fost stabilit să demonstreze o modalitate de a pune în aplicare acest lucru. Unii s-au întrebat cum am făcut acest lucru ... așa că iată o defalcare.

Pentru o introducere în funcțiile AnimatedVectorDrawable, vă recomand cu mare drag acest post de Alex Lockwood

Contur

Privind compoziția, aceasta este formată din trei tipuri de animație:

  1. Pinul se mișcă și își schimbă forma pentru a-l face să sară; AVD susține acest lucru prin animarea formei efective a unei căi, cunoscută sub denumirea de morphing.
  2. Punctele se deplasează spre stânga, aceasta va fi o traducere simplă.
  3. Punctele se estompează / iese pe măsură ce intră / iese din scenă.

calc

Din păcate nu am avut acces la lucrările de artă sursă, doar GIF-ul din dribbble ... sperăm că nu va trebui să faceți acest lucru în animațiile voastre!

Am deschis GIF-ul în Photoshop care oferă o imagine cronologică a cadrelor animației. Am pășit prin asta și am salvat copii de cadre în care știftul se afla la extremele mișcării, adică pe punctul de a schimba direcția sau a schimba forma în mod semnificativ. Aceste „poziții” vor fi formele între care știftul se va muta între ele. În total au fost 5 poziții majore.

Am lipit fiecare dintre acestea în Sketch (instrumentul meu de desen vector preferat) și am trasat știftul în fiecare dintre poziții.

Cele 5 formează pinul „morfele” între

Unele instrumente pot urmări automat imagini raster și pot produce trasee vectoriale pentru dvs. Știind că vreau să efectuez o animație morfă de cale, însemna că aveam nevoie de „căi compatibile”; adică fiecare cale trebuie să aibă același număr și tip de puncte. Ca atare, desenând știftul cu o formă simplă (alcătuită din 8 puncte, fiecare cu 2 puncte de control) și modificându-l manual pentru a forma fiecare poză, aș putea fi sigur că mai târziu putem anima între forme.

Am exportat apoi fiecare cadru ca fișiere SVG individuale. Acum, SVG este o specifica vasta, iar VectorDrawable de pe Android acceptă doar o parte a acesteia. De asemenea, este util să ne amintim că trebuie analizate și redate pe un dispozitiv mobil restricționat; prin urmare, încerc mereu să-mi simplific SVG-urile. Pentru a face acest lucru, le-am efectuat prin SVGO (folosind SVGOMG de Jake Archibald) setând precizia la 1 zecimal.

Sari imprejur

Acum, că avem traseele fiecărei poze a acului, este timpul să le facem să se miște! Pentru a face acest lucru, am apelat la minunatul Icon Animator de Roman Nurik. Acesta este un IDE bazat pe web pentru crearea AnimatedVectorDrawables. Am renunțat la primul SVG și apoi am dat clic pe pictograma cronometru de lângă stratul de pini și am adăugat o nouă animație pathData. Aceasta produce un panou de inspector în care aș putea introduce calea pinului de la cadrul următor în toValue. Am mai repetat acest lucru de 4 ori pentru a face animația noastră (unde ultimul pas se animă de la poza finală, înapoi la cea inițială).

Pentru valorile de sincronizare m-am referit înapoi la GIF-ul inițial, unde fiecare cadru a durat 30ms, așa că dacă există 4 cadre între poze, să folosească o durată de 120ms, etc. .

obstacole

Pentru punctele care se deplasează, putem efectua o traducere simplă. Privind compoziția sursei, fiecare al treilea punct este mai mare și roșu; cum să implementăm asta într-o buclă drăguță? În timp ce puteți implementa acest lucru cu doar 3 puncte și puteți anima fiecare în parte; Am decis să includ 5 puncte în care punctele cele mai drepte se extind dincolo de vedere:

Făcând acest lucru ne permite să animăm întregul grup de puncte spre stânga toate împreună, odată ce al patrulea punct ajunge la locația inițială a primului punct, resetăm instantaneu traducerea, sărind-o înapoi la punctul de plecare. Neat!

Venind si plecand

Vrem ca punctele să se estompeze pe măsură ce intră și se estompează pe măsură ce pleacă, aceasta este o animație simplă a fillAlpha, vă las acest lucru în funcție de dvs. pentru a vedea cum se realizează!

Buclați Bucla

Acum, pentru a face acest lucru într-o animație completă cu bucle, există câteva lucruri de luat în considerare. Animația punct are triplă durata săriturii cu pini. Am luat în considerare ruperea lor în 2 AVD-uri separate și stratificarea lor ... dar am decis că repetarea saltului de 3 ori a fost mai simplă!

Am apăsat butonul magic de export din Icon Animator care mi-a dat definiția AVD, gata să mă încadrez în proiectul meu. Cu toate acestea, instrumentul este încă în „previzualizare”, așa că i-am făcut câteva modificări pentru a curăța ieșirea, și anume eliminarea oricăror atribute redundante și factorizarea tuturor valorilor repetate (cum ar fi diferitele căi de pin și unele culori) la un fișier de resurse pentru a face mai mentenabile.

Realizarea întregii bucle AVD a fost mai dificilă decât mi-am propus. Aparent, repetMode pe seturile de animații este ignorat (au fost înregistrate bug-uri). Am lucrat în jurul acestui lucru ascultând sfârșitul animației și pornind-o din nou. Din păcate, apelurile de apel invers au fost adăugate doar în API23, dar puteți obține același efect prin postDelayed etc.

Fii animat

Puteți găsi aici o listă a codului sau consultați compoziția completă din Icon Animator și puteți juca cu acesta.

Sperăm că acest post v-a arătat că AnimatedVectorDrawable este foarte puternic și că puteți crea animații bogate relativ ușor. Sper, de asemenea, că partajarea fluxului meu de lucru vă ajută să demitificați procesul și poate vă inspiră pentru a vă crea propriul dvs. Lasă-mă să știu dacă o faci!