Animatsioon: hüppavad läbi

Hiljuti sattus mulle silma abipalve; küsides, kuidas Androidis kasutada väljamõeldud asukoha leidmise animatsiooni:

- http://drbl.in/2470871, autor @lekarew

Arvasin kohe, et see on AnimatedVectorDravable (edaspidi AVD) peamine kandidaat, nii et see näitas üht võimalust selle rakendamiseks. Mõni inimene küsis, kuidas ma seda tegin ... nii et siin on jaotus.

AnimatedVectorDravablei võimaluste sissejuhatuseks soovitan tungivalt seda Alex Lockwoodi postitust

Kontuur

Kompositsiooni vaadates koosneb see kolme tüüpi animatsioonist:

  1. Tüüp liigub ja muudab kuju, et muuta see hüppavaks; AVD toetab seda tee tegeliku kuju animeerimisega, mida nimetatakse raja morfiteerimiseks.
  2. Punktid liiguvad vasakule, see on lihtne tõlge.
  3. Stseenile sisenemisel / sellest väljumisel tuhmuvad punktid sisse / välja.

Jälgimine

Kahjuks ei olnud mul juurdepääsu allikateosele, lihtsalt GIF-il, mis sügeleb ... loodetavasti ei pea te seda oma animatsioonides tegema!

Avasin GIF-i Photoshopis, mis pakub animatsiooni kaadrite ajavaadet. Astusin sellest läbi ja salvestasin koopiad kaadritest, kus tihvt oli liikumise äärmuses, st muutumas suunda või kuju oluliselt. Need "poosid" on kujundid, mille vahel tihvt morfiseerib. Kokku oli 5 suuremat poosi.

Kleepisin need kõik eskiisi (minu eelistatud vektorjoonistamise tööriist) ja leidsin mõlemas poosis nööpnõelad välja.

Viis moodustab tihvti „morfide” vahel

Mõned tööriistad suudavad rasterpilte automaatselt jälgida ja teile vektoriteed luua. Teadmine, et soovin teha teede morf-animatsiooni, tähendas aga, et mul on vaja „ühilduvaid teid”; see tähendab, et igal teel peab olema sama arv ja tüüpi punkte. Selliselt joonistades lihtsa kujuga tihvti (koosneb 8 punktist, igas 2 kontrollpunkti) ja muutes seda käsitsi iga pose moodustamiseks, võin olla kindel, et saame hiljem kujundite vahel animeerida.

Seejärel eksportisin iga kaadri üksikute SVG-failidena. Nüüd on SVG ulatuslik spec ja Androidi VectorDravable toetab ainult selle alamhulka. Samuti on kasulik meeles pidada, et neid tuleb sõeluda ja renderdada piiratud mobiilseadmes; seetõttu üritan oma SVG-sid alati lihtsustada. Selleks ajasin nad läbi SVGO (kasutades SVGOMG-i Jake Archibaldit), määrates täpsuseks ühe kümnendkoha täpsusega.

Ringi hüppama

Nüüd, kui meil on iga tihvti poseerimise teed, on aeg panna need liikuma! Selleks pöördusin vinge ikoonianimaatori poole, autor on Roman Nurik. See on veebipõhine IDE AnimatedVectorDrawables loomiseks. Ma langesin sisse esimesse SVG-sse ja klõpsasin siis pin-kihi kõrval oleval stopperiikoonil ja lisasin uue animatsiooni pathData. Sellega luuakse inspektoripaneel, kuhu saaksin sisestada nööpnõela tee järgmisest kaadrist toValue'i. Kordasin seda veel neli korda, et teha meie animatsiooni (kus viimane samm animeerib viimast poosi, tagasi algsesse).

Ajastusväärtuste osas viitasin tagasi algsele GIF-ile, kus iga kaadri kestus oli 30ms, nii et kui poseerimise vahel oli 4 kaadrit, siis kasutage kestust 120ms jne. Valisin lihtsalt tavaliste materjalide interpolaatorite kasutamise, kuid tegelikult võiks sellest peenhäälestamisest kasu olla. .

Takistused

Mööda liikuvate punktide jaoks saame teha lihtsa tõlke. Allikakompositsiooni vaadates on iga kolmas punkt suurem ja punane; kuidas seda kenas silmus rakendada? Ehkki saate seda rakendada vaid kolme punktiga ja animeerida igaüks eraldi; Otsustasin lisada 5 punkti, kus kõige paremad punktid ulatuvad vaateaknast kaugemale:

See võimaldab meil animeerida kogu punktide rühma, mis jääb vasakule kõik koos, kui 4. punkt jõuab esimese punkti algpunkti, lähtestame tõlke koheselt, hüpates selle tagasi selle alguspunkti. Puhas!

Tulevad ja lähevad

Tahame, et punktid läheksid lahkudes sisse ja välja, see on lihtne animatsioon, see on fillAlfa lihtne animatsioon, ma jätan selle teie ülesandeks näha, kuidas see saavutatakse!

Loop silmus

Nüüd, kui muuta see täielikuks silmuseanimatsiooniks, tuleb kaaluda mõnda asja. Punktanimatsioon on tihvti hüppamise kestusega kolmekordistunud. Kaalusin neid kaheks eraldi AVD-ks jagada ja kihistada… kuid otsustasin, et hüppe 3 korda kordamine on lihtsam!

Ma tabasin maagilist eksportimisnuppu Icon Animatoris, mis andis mulle AVD määratluse, valmis oma projekti sisse laskma. Tööriist on siiski eelvaatena, nii et tegin väljundi puhastamiseks selle paar katset, nimelt eemaldasin kõik üleliigsed atribuudid ja kordasin väärtused (nt erinevad pin-teed ja mõned värvid) ressursifaili, millest teha neid hooldatavamaks.

Tegelikult oli täieliku AVD-ahela tegemine keerulisem, kui ma oleksin osanud arvata. Ilmselt eiratakse animatsioonide komplektides korratud režiimi (vead on esitatud). Ma töötasin selle ümber, kuulates animatsiooni lõppu ja alustades seda uuesti. Kahjuks lisati tagasihelistusi ainult API23-sse, kuid sama efekti võiksite saavutada postDelayed jne kaudu.

Hankige animeeritud

Koodide põhisisu leiate siit või saate vaadata kogu kompositsiooni Icon Animatoris ja mängida sellega.

Loodetavasti näitas see postitus teile, et AnimatedVectorDravable on väga võimas ja et saate rikkalikke animatsioone luua suhteliselt hõlpsalt. Samuti loodan, et minu töövoo jagamine aitab seda protsessi demüstifitseerida ja võib-olla innustab teid enda loomiseks. Andke mulle teada, kui teete!