Oponašanje animacije srednjeg klapa s skicom i haikuom

Izvoz u React, nakon dizajniranja u Sketch-u, te podešavanja ključnih okvira u Haiku-u.

Čineći animaciju pristupačnom

Kao ugledni guru CSS-a nekada je predstavljao prepreku ulasku u dizajn složenih animacija pokreta. Knjižnice poput Lottie by AirBnb pojavile su se da bi mobilnim olakšale stvari, prikazivanjem animacija iz Adobe After Effects na iOS-u, Androidu i React Native.

Haiku je novi hibridni alat / alat za dizajn koji ima za cilj pojednostaviti animaciju pokreta. Omogućuje vam uvoz datoteka Sketch datoteka koje se tada mogu animirati na vremenskoj traci sličnoj onoj za After Effects. Besplatno je (za sada) dok je u pretpregledu, kao i After Effects, kompatibilno s Lottie. Ne morate upotrebljavati Lottie, a ja sam odlučio isprobati njegove značajke izradom rekreacije jednostavne, simpatične animacije: medij pljeskati.

Moj doppleganger voljenog klasika

Haiku čak omogućuje objavljivanje vašeg paketa putem npm registra kako biste mogli instalirati svoju animaciju u svoju datoteku nakon inicijalizacije projekta pomoću haiku init naredbe (o tome više o tome kasnije). Slobodno pogledajte ugrađenu Haiku komponentu na Codepenu:

Što se tiče pljeskanja, nikad nisam bio toliko za ovacijama. Međutim, kad je Medium zamijenio njihovo preporučeno srce funkcijom pljeskanja, našao sam se kako plješću nakon što dođe post u kraljevstvo, ponekad plješćući više na moje zadovoljstvo nego stvarni sadržaj. Animacija je izvrsno zadovoljavajuća, a jedan od rijetko pažljivo odabranih vizualnih elemenata koji Medium odlučuje uvrstiti u odjeljak sa sadržajima blogova, pa koja je bolja animacija za rekreiranje?

Početak rada

Da biste se to dogodili, potrebni su vam Sketch i Haiku.

Ako otvorite novi Haiku, prikazat će vam se vremenska linija na dnu, područje pozornice u gornjem desnom kutu i stablo datoteka u gornjem lijevom dijelu:

Platno koje ne koristi svijet

Uz prikaz knjižnice koji je stvarno samo stablo datoteka vašeg projekta, možete se prebaciti na prikaz državnog inspektora gdje možete vidjeti koje su spremljene varijable koje se mogu koristiti u izrazima na vremenskoj traci.

varijable spremljene u stanju koje se mogu upotrijebiti s radnjama ili izrazima na vremenskoj traci

Ako se vratite na prikaz u biblioteci, vidjet ćete da novi projekt generira datoteku skice koju dvokliknite da biste otvorili vodeći vas malim vodičem o tome kako započeti uvoz imovine s Skice u Haiku.

Nekoliko platno platno

Crtajte sa skicom, animirajte sa Haikuom

Otvorio sam novu stranicu i nacrtao jednostavan palčić gore oblika s vektorskim alatom u Sketch-u. Umnožirao sam je kako bi imao obris boje koja bi ležala na vrhu mog sive tipke.

Čitajući dokumente tražio sam način da manipuliram stilovima svojih kriški kako bih programsko izblijedio boju ikone od sive do plave unutar Haikua, ali našao sam malo referenci na styling, a uglavnom reference na pitanja od važnijeg značaja poput objavljivanja projekata i bavljenje državom (slično kao što biste željeli u redovnoj React aplikaciji).

Nacrtao sam konfeti da ga uzmem i pritisnuo tipku "Make Exportable" iz Sketch-a na svaki od oblika koje sam želio uključene u moj Haiku projekt.

uvezite imovinu programa Sketch čineći ih izvoznim, a zatim štedite

Sa svim mojim Sketch sredstvima u Haikuu, povukao sam ih na scensko područje kako bih počeo stvarati svoju animaciju.

prikaz knjižnice i pozornica

Sa svim dijelovima na svom mjestu, došlo je vrijeme da se osmisli kako će animacija zapravo teći.

Haiku vam omogućuje postavljanje dvije vrste radnji koje pokreću Javascript kada se aktiviraju, radnje događaja i okvira, a potrebne su mi obje.

Radnje događaja vezane su za određeni objekt na vremenskoj traci i konfiguriraju se klikom na ikonu ️ pored naziva objekta na vremenskoj traci. Oni su u osnovi slušatelji događaja za uobičajene radnje poput klika, ulaska mišem, fokus obrasca, a neke dodatne metode poput komponenti životnog ciklusa su se postavile ili će se montirati, koje se pokreću za pomicanje na drugu točku vremenske trake ili za promjenu stanja projekta.

plavi rasvjetni vijak označava definirane radnje na ovom sredstvu

Radnje kadra su prirodno vezane za okvir na vremenskoj traci, a aktiviraju se kad dođe do tog okvira. Čini se da su najučinkovitije za postavljanje petljastih odjeljaka animacije. Postavljao sam radnju okvira u okviru 40 kako bi moja animacija ostala u prvih 40 okvira moje vremenske trake u statičkom stanju, resetirao vremensku traku na vrijeme 0 svaki put kad je dobio u okvir 40 ovako:

this.getDefaultTimeline () hvata objekt vremenske trake, a zatim poziva metodu .gotoAndPlay () koja vremenskoj traci postavlja broj milisekundi naveden u argumentu, u mom slučaju 0. Radeći to mogu postaviti druge ključne okvire dalje na mom vremensku traku koja se neće pokrenuti sve dok ne preskočim okvir 40 iz rezultata akcije poput pritiska na gumb.

Nakon kreiranja 2 okvira ključeva, možete desnom tipkom miša kliknuti / kliknuti Ctrl i odabrati Make Tween da biste odredili kako će se prijelaz odvijati između ključnih okvira. Postavio sam okvire ključeva na ostatku vremenske trake kako bih animirao neprozirnost i razmjere gumba i konfeta u 3 različita dijela.

  • Okviri 0–40: nema tweesa, samo moj statički sivi gumb. Događaj okvira na okviru 40 vraća se na okvir 0.
  • Okviri 41–60: između povećanja neprozirnosti obrisa oko gumba. Kad se dogodi moj gumb miša, vremenska traka skače na to mjesto gdje svijetli plavi prsten oko gumba, a zatim zastaje na okviru 60, a gumb zadržava plavim. Mouse Leave događaj vraća vremensku traku natrag u kadar 0 vraćajući je natrag u sivu.
  • Okviri 61–120: događaj klikom na gumb preskače do okvira 61 gdje se pojavljuje tvorenje koje aktivira sve plave obrise i konfetke, polako izumire. Događaj u kadru 120 skače natrag u kadar 0 i cijeli se ciklus može ponoviti.
Confetti Group, Outline i prigodno skraćeni Butt Outline i odgovarajući tweens

Završetak

Svoju animaciju možete pregledati pritiskom na ikonu oka u gornjem desnom kutu aplikacije.

Važna napomena: radnje će se izvoditi samo u načinu pregleda, udaranje u razmaknicu i provlačenje stružnice kroz vremensku traku bez prethodnog pregleda neće pokrenuti događaje ili radnje okvira.

Jednom kad sam bio zadovoljan svojom animacijom, pritisnuo sam gumb za objavljivanje i otvorit će se novi prozor koji vam daje poveznicu s javnim dijeljenjem i upute za instalaciju za različite projekte. Ovo su upute za instalaciju koje sam odabrao za uključivanje animacije unutar React aplikacije.

Sada unutar React projekta, možete pokrenuti naredbe:

haiku init
npm i --save @ haiku /  - 

Da biste instalirali paket sa svojom animacijom kao i svaki drugi paket!

Budući da želim moj u aplikaciji React, nakon uvoza mogu jednostavno uključiti komponentu gdje god želim:

uvesti MediumClone iz '@ haiku / kylegill-mediumclone / reagirati';

/*...*/

render () {
  povratak (
    
              ); }

Ako kasnije želite promijeniti promjene u svojoj animaciji, idite na uređivanje Sketch datoteka koje će se odmah ažurirati u Haikuu, a zatim ponovno objavite i ažurirajte svoju animaciju na npm. Tada je samo stvar pokretanja ažuriranja haikua iz vašeg projekta i promjene će se odraziti na vaš projekt.

Ako želite vidjeti kôd koji je stvorio Haiku, zaronite u mapu koda u svom Haiku projektu i ugađajte sirovi Javascript.

Dakle, isplati li se?

Osjetio sam moć da svoje jednostavne crteže Sketch pretvorim u animaciju u samo nekoliko sati, a tu je još puno toga za Haiku u koji još nisam zaronio. Čitav je projekt još uvijek u pregledu i stoga još uvijek nije u tijeku, a nedostaju neke male značajke poput povlačenja za odabir ključnih okvira ili skupnog brisanja kriški ili grafičke ploče s prikaza knjižnice koji će se zasigurno pojaviti u budućim ažuriranjima.

Kao i Sketch-u Illustratoru, Haiku je uklopljen od After Effects-a do jednostavnih alata koji biste željeli dizajnirati za animacije pokreta, a to je mnogo lakše pokupiti i započeti s radom.

Skica + Haiku =

Hvala na čitanju!…

Ako ste mislili da je ovo zanimljivo, ostavite pljeskavicu ili dva, pretplatite se za buduća ažuriranja, tvitovite mi svoje misli ili retitirajte / podijelite ovaj tweet: