Razvoj Framer modula

Framer Studio izvrstan je alat za izradu prototipa za dizajnere. Ne samo da omogućuje napredne prototipove izvan okvira, već se njegove mogućnosti mogu proširiti i pomoću modula. Naći ćete puno sjajnih modula širom interneta, ali što ako želite stvoriti vlastiti?

Nažalost, postoji velika razlika između dovoljno poznavanja osnovnog jezika Framer Studio, CoffeeScript, za stvaranje interaktivnih animacija i izrade čak i jednostavnog modula. Ovdje ćemo pokušati zatvoriti taj jaz.

Napravit ćemo modul pod nazivom "GhostLayer" koji olakšava interaktivno blijeđenje slojeva. To ćemo učiniti definiranjem klase koja proširuje zadani sloj. To znači da će naša klasa imati sva uobičajena svojstva sloja - možete ga pozicionirati s x i y, dati sjenu itd. - a istovremeno će omogućiti i neke prilagođene funkcionalnosti koje pružamo.

Možete ih pratiti u željenom uređivaču teksta ili u samom Framer studiju. *

Napravite novu tekstualnu datoteku i spremite je kao "GhostLayer.coffee." Počet ćemo izjavljivanjem onoga što radimo. U svoj dokument upišite sljedeće:

klasa GhostLayer proširuje sloj

Ovdje kažemo da ćemo stvoriti novu klasu sloja, pod nazivom GhostLayer, na izvoznom objektu. Budući da je to samo vrsta sloja, naslijedit će sve uobičajene sposobnosti sloja.

Svaki put kada se stvori novi entitet tipa GhostLayer, on će se inicijalizirati u memoriji. Sve što želimo ući u početno stanje GhostLayera treba deklarirati u konstruktoru klasa. Dodajmo sljedeće.

¬ konstruktor: (@ opcije = {}) ->

Imajte na umu da je u CoffeeScriptu odstupanje bitno. Pomoću simbola ¬ koristit ću razinu uvlačenja.

Prilikom izrade ovog koda često ćete vidjeti znak @. To je prečac CoffeeScript koji znači "ovo." @Opcije su nešto međuspremnika koji rezerviramo za upotrebu u modulu.

Naš GhostLayer mora biti translucentan da bi mogao biti od koristi. Evo našeg konstruktora u cijelosti:

¬ konstruktor: (@ opcije = {}) ->
¬ ¬ @ options.translucent? = Netočno
¬ ¬ super @opcije

Dali smo našem GhostLayeru novo svojstvo koje obično nemaju slojevi: onaj koji je proziran. Ovo se svojstvo naziva boolean po tome što može biti samo istinito ili lažno. Postavili smo je? = Da ukažemo da korisnik može ili ne mora isporučiti vrijednost. false je naša zadana postavka u tom slučaju.

Sva druga svojstva klase koje dodate bila bi umetnuta u konstruktor prije super @opcija. Upravo su super @options ono što okuplja inicijalizaciju i dodaje sloj naših prilagođenih značajki. Samo se pobrinite da svako svojstvo ima svoju zasebnu liniju i slijedi istu uvlaku i sintaksu.

Trenutačno proziran ne čini ništa. Moramo utvrditi kakav učinak treba imati svojstvo unutar konstruktora - kako je određeno razinom udubljenja.

¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ @ .opacitet = 0,5

Zapamtite, @ je ekvivalentno "ovom". Budući da smo u definiciji klase, "to" znači i sam predmet klase - GhostLayer. Postavljamo neprozirnost GhostLayera na 0,5 ako je uključena prozirnost.

Ova će značajka omogućiti korisniku da postavi zadanu prozirnost pri stvaranju novog GhostLayer-a. U Framer Studio upisala je sljedeći kôd, što je ekvivalentno dodavanju je u glavnu datoteku app.coffee protokola (ne dodajte to u vaš dokument GhostLayer.coffee - ovo je za korisnika vašeg modula):

GhostLayer = zahtijevaju "GhostLayer"
myGhost = novi GhostLayer
¬ proziran: istina

Međutim, možda ćemo htjeti dopustiti da korisnik prelazi prozirnost u vrijeme koje nije inicijalizacija. Da bismo to učinili, moramo definirati getter i setter za naše prozirno svojstvo. To se također radi izvan konstruktora, ali još uvijek unutar definicije klase.

¬ @define 'proziran',
¬ dobiti: ->
¬ ¬ ¬ @ options.translucent
¬ ¬ postavljeno: (vrijednost) ->
¬ ¬ ¬ @ options.translucent = vrijednost

Ovo je tipičan obrazac za osobe koje dobivaju životinje i setore. Imajte na umu da niz u izrazu @define mora točno odgovarati nazivu opcije na koju utječu getter i setter.

Naš getter i setter omogućit će korisniku da čita trenutno stanje prozirnog svojstva koristeći

ispis mojGhost.translucent

ili ga promijeniti pomoću

myGhost.translucent = istina

No, iako će se svojstvo ažurirati vrijednošću true, to neće imati vidljiv učinak na GhostLayer. Moramo dodati više koda u setter kako bismo bili sigurni da su vizualni rezultati uvijek sinkronizirani s vrijednošću svojstva.

¬ @define 'proziran',
¬ dobiti: ->
¬ ¬ ¬ @ options.translucent
¬ ¬ postavljeno: (vrijednost) ->
¬ ¬ ¬ @ options.translucent = vrijednost
¬ ¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ ¬ @ .opacitet = 0,5
¬ ¬ ¬ drugo
¬ ¬ ¬ ¬ @ .opacity = 1,0

"Ovo" (@) u leksičkom području našeg modula još je uvijek sloj objekta GhostLayer. Postavljamo neprozirnost GhostLayera na 50% ako je prozračna istina ili 100% ako nije.

Leksički opseg može biti pojmljiv. Da bismo ga malo više pogledali, učinimo naš GhostLayer malo interaktivnijim. Kada kliknemo na GhostLayer, želimo da on prođe do svog prozirnog ili neprozirnog stanja, ovisno.

Vratite se konstruktoru i dodajte onClick aparat za obradu događaja koji će pokrenuti funkciju koja se zove fade (). (Ovdje nam nisu potrebne zagrade, ali one će vam trebati ako ikad nazovete funkciju izvan modula.)

¬ konstruktor: (@ opcije = {}) ->
¬ ¬ @ options.translucent? = Netočno
¬ ¬ super @opcije
¬ ¬ @ .onClick @fade

@ .onClick znači "kad se na to klikne" - "ovo" što znači i sam GhostLayer.

Ispod izjave @define i unutar klase (tj. Uvlačenje jednom) definirat ćemo funkciju fade ().

¬ izblijediti: ->

Sadržaj fade () nalikuje onome što smo naveli za setter, osim obrnutog; mi se prelazimo između prozirnih i neprozirnih stanja. Isto tako, trebali bismo zadržati boolean svojstva u sinkronizaciji s vizualnim rezultatom dok to radimo.

¬ izblijediti: ->
¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ @ options.translucent = netočno
¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ neprozirnost: 1.0
¬ ¬ drugo
¬ ¬ ¬ @ options.translucent = istina
¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ neprozirnost: 0,5

Ovo će raditi dovoljno dobro i proizvest će lijep animirani efekt. Ali što ako bismo postali malo složeniji? Možda želimo biti sigurni da se sloj ne nalazi usred animacije već kada pokrenemo promjenu neprozirnosti. Uostalom, to bi moglo proizvesti neželjeni treperi efekt. Framer upravo u tu svrhu osigurava mehanizam koji se naziva debounce. To izgleda tako:

Utils.debounce 0,5, ->

Vremenski interval (0,5 ovdje u trajanju od pola sekunde) je neka vrsta "cooldown". Funkcija se neće ponovo pokretati dok istekne vrijeme rashlađivanja, čak i ako se pokrene u međuvremenu.

Dodavanje toga da izblijedi () izgleda ovako:

¬ izblijediti: Utils.debounce 0,5, ->
¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ @ options.translucent = netočno
¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ neprozirnost: 1.0
¬ ¬ drugo
¬ ¬ ¬ @ options.translucent = istina
¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ neprozirnost: 0,5

Sjajno. No, bacimo se krivudavom kuglicom leksičkog okvira. Pokušajte uvesti malo odgađanje funkcije:

¬ izblijediti: Utils.debounce 0,5, ->
¬ ¬ Utils.delay 0,5, ->
¬ ¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ ¬ neprozirnost: 1.0
¬ ¬ ¬ drugo
¬ ¬ ¬ ¬ @ options.translucent = istina
¬ ¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ ¬ neprozirnost: 0,5

Sada imamo problem. Pozivom globalnom kontekstu Utils u funkciji promijenili smo svoj trenutni leksički opseg. Nismo više u opsegu funkcija. Umjesto toga, skočili smo na globalni opseg koji ne zna za stvari poput @ options.translucent. Ako modul ostavite ovako i pokušate ga koristiti u Framer Studio-u, dobit ćete pogreške oko toga što stvari nisu definirane.

Srećom, rješenje je jednostavno. Prisiljavamo Framera da zadrži leksički opseg prebacivanjem jedne od naših strelica na strelicu koja zadržava opseg „masnoća“. Potražite => u nastavku:

¬ izblijediti: Utils.debounce 0,5, ->
¬ ¬ Utils.delay 0,5, =>
¬ ¬ ¬ ako je točna opcija @ options.translucent
¬ ¬ ¬ ¬ @ options.translucent = false
¬ ¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ ¬ neprozirnost: 1.0
¬ ¬ ¬ drugo
¬ ¬ ¬ ¬ @ options.translucent = istina
¬ ¬ ¬ ¬ @ .animate
Svojstva ¬ ¬ ¬ ¬ ¬:
¬ ¬ ¬ ¬ ¬ ¬ neprozirnost: 0,5

Naša mogućnost izblijedjenja ponovno će raditi kako se očekuje.

Sada dodajte sljedeći redak do samog kraja da biste sve zaključili:

module.exports = GhostLayer

Izvoz je druga vrsta zajedničkog međuspremnika, ali prototipu u kojem je smješten modul također može pristupiti. Bilo koje varijable ili funkcije koje žive u izvozu bit će dostupne prototipu. Želimo biti u mogućnosti koristiti klasu GhostLayer, pa se ovdje svakako uputimo.

To je dovoljno za radni modul. Da biste ga koristili u prototipu, izradite novi dokument u Framer Studio. Spremite dokument u lokalni direktorij i tamo otvorite .framer mapu. Potražite mapu "moduli" unutar. Tu morate kopirati naš GhostLayer.coffee modul. Nakon što to učinite, dodajte sljedeći kôd u svoj prototip:

GhostLayer = zahtijevaju "GhostLayer"
myGhost = novi GhostLayer
Prozirno: lažno

(Ako želite, možete koristiti prozirni: true. Sloj će biti samo teže vidljiv.)

Pokušajte nekoliko puta kliknuti na GhostLayer i provjerite animaciju. Zapamtite, GhostLayer je samo vrsta sloja. Možete učiniti sve što biste učinili u normalnom sloju. Slobodno dodijelite pozadinskoj boji, premjestite je itd.

Ovdje možete preuzeti kopiju modula ili cijeli prototip.

Također, ako kreirate prototipove za Apple TV, imamo sjajan modul RemoteLayer koji biste trebali provjeriti.

* Framer Studio posrće oko ključne riječi za izvoz. Ako to ne ostavite, svoj modul možete napisati u Framer Studio i iskoristiti njegovu auto dovršavanje i provjeru pogrešaka. Morat ćete ga ponovo dodati kako biste dovršili modul. Uobičajeno sam komentirati izvoznu liniju tijekom razvoja, a zatim komentirati prije nego što sam zalijepio modul u njegovu .coffee datoteku.

Za više uvida u dizajn i razvoj, pretplatite se na BPXL Craft i pratite Black Pixel na Twitteru.