Animaatio: Hyppää läpi

Äskettäin avunpyyntö sai huomioni; kysytään kuinka saada aikaan kuvitteellinen sijaintipaikan animaatio Androidilla:

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

Ajattelin heti, että tämä oli ensisijainen ehdokas AnimatedVectorDravable-ohjelmaan (jäljempänä AVD), joten tarkoituksena oli osoittaa yksi tapa toteuttaa tämä. Jotkut kysyivät, kuinka tein tämän ... joten tässä on erittely.

Suosittelen Alex Lockwoodin tätä viestiä AnimatedVectorDrawingun ominaisuuksiin

ääriviivat

Sävellystä tarkasteltaessa tämä koostuu kolmesta animaatiosta:

  1. Tappi liikkuu ja muuttaa muotoaan, jotta se hyppää; AVD tukee tätä animoimalla polun todellista muotoa, joka tunnetaan polun morfisointina.
  2. Pisteet siirtyvät vasemmalle, tästä tulee yksinkertainen käännös.
  3. Pisteet häipyvät sisään / ulos, kun kohtaus tapahtuu / poistu.

jäljitys

Valitettavasti minulla ei ollut pääsyä lähdeteoksiin, pelkästään GIF: llä, joka on juurtunut ... toivottavasti sinun ei tarvitse tehdä tätä animaatioissa!

Avasin GIF-kuvan Photoshopissa, joka tarjoaa aikajanan näkymän animaation kehyksistä. Astuin läpi ja tallensin kopiot kehyksistä, joissa tappi oli liikkeen ääripäissä, ts. Muuttamassa suuntaa tai muuttamassa muotoaan merkittävästi. Nämä "asennot" ovat muotoja, joiden välillä tappi morfioi. Kaikkiaan oli 5 suurta asentoa.

Liitin kaikki nämä luonnokseen (suositeltava vektorin piirtotyökalu) ja jäljitin nastat jokaiseen asentoon.

Viisi muotoilee nastaa

Jotkut työkalut voivat jäljittää automaattisesti rasterikuvia ja tuottaa vektoripolkuja sinulle. Tietäminen, että halusin suorittaa polkumorfisen animaation, tarkoitti kuitenkin "yhteensopivia polkuja"; toisin sanoen jokaisella polulla täytyy olla sama määrä ja tyyppiä pisteitä. Sellaisenaan piirtämällä tappi yksinkertaisella muodolla (koostuu 8 pisteestä, jokaisessa 2 ohjauspistettä) ja muokkaamalla sitä manuaalisesti kunkin poseerin muodostamiseksi, voin olla varma, että voimme myöhemmin animoida muotojen välillä.

Sitten vietin jokaisen kehyksen erillisinä SVG-tiedostoina. Nyt SVG on laaja spec, ja Androidin VectorDravable tukee vain osaa siitä. On myös hyödyllistä muistaa, että ne täytyy jäsentää ja tuottaa rajoitetulla mobiililaitteella; siksi yritän aina yksinkertaistaa SVG-tietojani. Jotta tätä voisin suorittaa heidät SVGO: n läpi (Jake Archibaldin SVGOMG: llä) asettamalla tarkkuus yhden desimaalin tarkkuudella.

Hyppiä ympäriinsä

Nyt kun meillä on polunumerot jokaiseen nastaan, on aika saada ne liikkumaan! Tämän vuoksi käännyin Roman Nurikin mahtavaan Icon Animatoriin. Tämä on verkkopohjainen IDE AnimatedVectorDrawables -sovelluksen luomiseen. Laskusin ensimmäisessä SVG: ssä ja napsautin sitten sekuntikellokuvaketta pin-kerroksen vieressä ja lisäsin uuden pathData-animaation. Tämä tuottaa tarkastuspaneelin, johon voin lisätä tapin polun seuraavasta kehyksestä toValue-arvoon. Toistin tämän vielä neljä kertaa animaatiomme tekemiseksi (missä viimeinen vaihe animoi viimeisestä poseesta, takaisin alkuperäiseen).

Ajoitusarvoille viittasin takaisin alkuperäiseen GIF-tiedostoon, jossa kukin kehys kesti 30 ms, joten jos asennusten välillä oli 4 kehystä, käytä kestoa 120ms jne. Päätin käyttää vain tavallisia materiaalien interpolaattoreita, mutta todellisuudessa tästä voisi olla hyötyä hienosäätöstä .

Aitajuoksu

Pisteille, jotka liikkuvat pitkin, voimme suorittaa yksinkertaisen käännöksen. Lähdekoostumusta tarkasteltaessa joka kolmas piste on suurempi ja punainen; kuinka toteuttaa tämä mukava silmukka? Vaikka voisit toteuttaa tämän vain 3 pisteellä ja animoida jokaisen erikseen; Päätin sisällyttää 5 pistettä, joissa oikeimmat pisteet ulottuvat näyttökentän ulkopuolelle:

Tämän avulla voimme animoida koko pisteryhmän vasemmalle yhdessä, kun 4. piste saavuttaa ensimmäisen pisteen alkuperäisen sijainnin, palautamme käännöksen heti, hyppäämällä sen takaisin lähtöpisteeseen. Siisti!

Tulee ja menee

Haluamme pisteiden haalistuvan sisään tullessaan ja haalistuessaan poistuessaan. Tämä on yksinkertainen fillAlpha-animaatio, jätän sen sinun nähdäksesi, kuinka se saavutetaan!

Silmukka silmukka

Nyt, jotta tästä tulisi täydellinen silmukkaanimaatio, on harkittava joitain asioita. Pisteanimaatiolla on kolminkertainen nastahypyn kesto. Harkitsin niiden jakamista kahdeksi erilliseksi AVD: ksi ja kerrosta niitä ... mutta päätin, että hypyn toistaminen 3 kertaa oli yksinkertaisempaa!

Painosin maagista vientipainiketta Icon Animatorissa, joka antoi minulle AVD-määritelmän, valmis pudota projektiini. Työkalu on kuitenkin edelleen "esikatselussa", joten tein siihen muutaman tarkistuksen tulosteen puhdistamiseksi, nimittäin poistaen tarpeettomat määritteet ja faktoroimalla toistuvat arvot (kuten erilaiset pin-polut ja jotkut värit) resurssitiedostoon ne ovat ylläpidettäviä.

Itse asiassa koko AVD-silmukan tekeminen oli vaikeampaa kuin olin ajatellut. Todennäköisesti animaatiojoukkojen repeMode jätetään huomioimatta (vikoja on tehty). Työskentelin tämän ympärillä kuuntelemalla animaation loppua ja käynnistämällä sen uudelleen. Valitettavasti takaisinsoittoja lisättiin vain sovellusliittymään23, mutta voit saavuttaa saman vaikutuksen postDelayed-sovelluksen jne. Avulla.

Hanki animoitu

Löydät koodin luettelon tästä tai tutustu koko kokoonpanoon Icon Animatorissa ja pelaat sitä.

Toivottavasti tämä viesti on osoittanut sinulle, että AnimatedVectorDravable on erittäin tehokas ja että voit luoda rikkaita animaatioita suhteellisen helposti. Toivon myös, että työnkulun jakaminen auttaa määrittelemään prosessin ja ehkä inspiroi sinua luomaan oman. Kerro minulle, jos teet!