Framer varalica: klase i moduli

Klase i moduli pomažu vam da ponovo upotrebljavate isti element iznova i iznova bez dupliciranja koda. A ako ga stavite u modul, možete ga koristiti i u različitim prototipima! Ovo se preporučuje korisnicima s više iskustva.

Sranje. Stvari su tek postale stvarne. Izgradimo klase i module. Vruće prokletstvo. Ali smiri se, nije tako teško kao što zvuči. Čak i za mene, profesionalni kopir i paster, to mogu shvatiti (dobro, nekako).

U ovom varalici ćemo pokriti:

  1. Što je klasa? A modul?
  2. Postavljanje nastave
  3. Stvaranje zadanih postavki
  4. Dodajte više slojeva u razred
  5. Dodavanje novih svojstava
  6. Funkcije i događaji
  7. Postavljanje svojstava izvan inicijalizacije (Getters i Setters)
  8. Izrada modula
  9. Primjeri
  10. Resursi koji su mi zaista pomogli

1. Što je klasa? A modul?

Znate PageComponent, ScrollComponent, SliderComponent? Pa, sve su to samo klase ugrađene u Framer.

Sjajno. Pa što to znači za vas? U osnovi, izgradnjom vlastite klase, možete ponovo i ponovo koristiti isti kod u različitim kontekstima.

To vam pomaže da zadržite dosljednost kroz prototip (ili kroz više prototipa), kao i da vas sprečava od pisanja čitavih komada koda radi funkcionalnosti.

Modul je datoteka koju koristimo za održavanje i organiziranje nastave. Zamislite da ste imali 10 satova u istoj Framer datoteci - bilo bi to očajno! Dakle, stavljanjem nastave u modul održavamo sve urednijim, a omogućava nam i lakši prelazak iste klase u buduće projekte.

2. Postavljanje nastave

Da biste postavili osnovne većine razreda, trebate učiniti tri stvari;

  1. Definirajte klasu
  2. Stvorite konstruktor
  3. Stvorite super

A onda pozovite svoj razred.

Uglavnom ćete moći kopirati i zalijepiti ovu ploču koda prije nego što počnete stvarati vlastitu. (Ali morat ćete promijeniti ime MyNewAndImprovedLayer)

klasa MyNewAndImprovedLayer produžuje sloj
   konstruktor: (@ opcije = {}) ->
      super @options
stvar = novi MyNewAndImprovedLayer

Savjet za savjet: Pogledajte kako se kaže, proširuje sloj? Ostale komponente možete proširiti samo izgovaranjem produžuje ScrollComponent ili sve drugo. Na primjer, koristim extens TextLayer kada želim stvoriti univerzalnu oznaku.

Napomena o etiketu prilikom kreiranja časova uvijek ima ime vaše klase u CamelCaseu. Na primjer, ne imenujte gumb svoje klase, nazovite ga gumbom. Ni Textfield nije dobro, nego TextField. Na taj se način ne miješaju sa drugim slojevima.

3. Izrada zadanih postavki za nadređeni sloj klase

Dakle, prije nego što započnemo - postoje dvije vrste zadanih postavki. One koje možete promijeniti izvan klase i one koje ne možete.

I sve se svodi na? = I =.

U primjeru u nastavku koristio sam an = da kažem da je boja pozadine crna. I NE MOŽETE to kasnije promijeniti. Primijetite kako u primjeru ispod te boje pozadina te boje nije plava.

klasa MyNewAndImprovedLayer produžuje sloj
   konstruktor: (@ opcije = {}) ->
      @ options.backgroundColor = "# 000"
      super @options
stvar = novi MyNewAndImprovedLayer
   backgroundColor: "plava"
thing.center ()

U ovom primjeru u nastavku, koristio sam? = Što znači da ćete biti u mogućnosti promijeniti backgroundColor izvan klase. Pogledajte kako je kod gotovo potpuno isti.

klasa MyNewAndImprovedLayer produžuje sloj
   konstruktor: (@ opcije = {}) ->
      @ options.backgroundColor? = "# 000"
      super @options
stvar = novi MyNewAndImprovedLayer
   backgroundColor: "#blue"
thing.center ()

Savjet stručnjaka: Da biste u jednom pokretu napravili čitav niz zadanih postavki, pogledajte dolje. Napomena: ove ćete karakteristike moći promijeniti izvan klase.

klasa MyNewAndImprovedLayer produžuje sloj
   konstruktor: (@ opcije = {}) ->
      _.defaults @options,
         backgroundColor: "# 000"
         visina: 48
         granicaRadius: 2
      super @options
stvar = novi MyNewAndImprovedLayer
   backgroundColor: "# 00aeff"

4. Dodajte više slojeva u razred

Znate kako u komponenti klizača označavate kvaku klizača kao klizač. ? Ono što ovdje radite odnosi se na sloj unutar komponente klizača.

Da biste stvorili sloj kojem možete pristupiti izvan klase, dodajte simbol @ prije naziva sloja. U ovom primjeru u nastavku stvaramo novi sloj teksta za gumb.

NAPOMENA: Roditelj definirate samo za dodani sloj NAKON super, zajedno s njegovom pozicijom.

Button klase produžava sloj
  konstruktor: (@ opcije = {}) ->
 
     @ options.backgroundColor? = "# 000"
     @ options.height = 44
    
     @label = novi TextLayer
        veličina fonta: 16
  
     super @options
  
     @ label.parent = @
     @ Label.center ()
gumb = novi gumb
button.center ()
button.label.text = "Pozdrav!"

5. Dodavanje novih svojstava

Jeste li ikad primijetili kako sliderComponents imaju svojstvo min i max, dok većina ostalih komponenti nema? Ovo je svojstvo koje je dodano.

U ovom primjeru napravit ćemo vrlo VELIKU sirovu verziju TextLayera. Svojstvo mySuperSexyFont ne znači ništa u kodu (u stvari, u ovom primjeru možete ga zamijeniti HotPantsom i ne bi ništa promijenilo).

klasa SimpleTextLayer proširuje sloj
   konstruktor: (@ opcije = {}) ->
      @ options.backgroundColor = "000"
      @ options.mySuperSexyFont? = "'Source Sans', sans serif"
      @ options.html = @ options.text
      @ options.style =
         fontFamily: @ options.mySuperSexyFont
         textAlign: "centar"
         lineHeight: "200 piksela"
   
      super @options
  
myText = novi SimpleTextLayer
   tekst: "zdravo"
   mySuperSexyFont: "'Roboto', sans serif"
myText.center ()

6. Funkcije i događaji

Dok možete graditi događaje unutar konstruktora klase, vanredno je urednije i korisnije graditi ih. Za razliku od normalne funkcije, koristite: => za razliku od = ->.

Button klase produžava sloj
   konstruktor: (@ opcije = {}) ->
      @ options.backgroundColor = "# F14676"
      super @options
      #događaj
      @ .onMouseOver @Hover
      @ .onMouseOut @HoverOff
   #funkcija
   Zadržite pokazivač: =>
      @. svijetlost = 70
   HoverOff: =>
      @. svijetlost = 100
gumb = novi gumb
button.center ()

7. Postavljanje svojstava izvan inicijalizacije (Getters i Setters)

Na taj način možete dodati nova svojstva u razred - ali kako ih kasnije promijeniti? Unesite Getters i Setters.

U ovom primjeru u nastavku postavljamo zadanu postavku za klasu koja će biti omogućena. Kasnije ćemo u prototipu možda željeti promijeniti klasu da bude onemogućena - u ovom slučaju to je onClick.

Button klase produžava sloj
   konstruktor: (@ opcije = {}) ->
       
      @ options.disabled? = false
      @ options.backgroundColor = "000"
      ako je @ options.disabled istina
         @ opcije.opacity = 0,5
      super @options
   @define 'onesposobljeno',
      dobiti: ->
         'options.disabled
      set: (vrijednost) ->
         @ options.disabled = vrijednost
         ako je @ options.disabled istina
            @ kapacitet = 0,5
         drugo
            @opacity = 1
            
            
Gumb = novi gumb
deactiveButton = novi TextLayer
   tekst: "deaktivan"
deactiveButton.onClick ->
 Gumb.disabled = true

8. Izrada modula

Izraditi modul bilo bi jednostavno - ako nije bilo za sve pokretne dijelove. Postoje dva načina za postavljanje modula, a to ovisi o količini predavanja koje imate. Ako imate samo jednu klasu, odaberite metodu 1, ako imate više odaberite metodu 2.

Ali prvo preuzmite Sublime.

1. Ako u modulu imate samo jednu klasu

U ovom ćemo primjeru napraviti modul s gumbom. Molimo za Ljubav prema svim stvarima čokoladnim i svetim, promijenite ga u ime vlastitog modula.

  1. Nakon što preuzmete Sublime, kopirajte i zalijepite razred iz Framera u prazan Sublime dokument.
  2. Ako imate klasu, tipka proširuje sloj ili nešto drugo, promijenite ga u klasu izvoza.Button proširuje sloj
  3. Spremite Sublime datoteku kao SAME (točno isto) ime kao svoju klasu. npr ako je ime klase Button, spremite ime modula kao gumb.
  4. Zatim stvorite novu datoteku s framerom i ispustite modul u mapu modula.
  5. Sada provjerite je li format vašeg modula u skripti za kavu. To radite desnim klikom na datoteku i preimenovanjem u npr. Button.coffee
  6. Sada prebacite na svoju Framer datoteku i dodajte {Button} = zahtijevajte "gumb" na vrhu vaše datoteke.
  7. Zatim nazovite svoju klasu samo govoreći gumb = novi gumb

2. Ako u vašem modulu imate dvije ili više klasa

U ovom ćemo primjeru napraviti modul s nekoliko različitih polja polja oblika. Kao nešto što će vam pomoći održati dosljednost u različitim prototipima kroz tvrtku.

  1. Nakon što preuzmete Sublime, kopirajte i zalijepite classES na uzvišenu praznu stranicu.
  2. Za svaku primjeru u kojoj imate class textField proširuje sloj ili nešto drugo, promijenite ga u class export.textField proširuje sloj. Učinite to za SVAKU klasu koju želite uvesti.
  3. Spremite svoju uzvišenu datoteku kao nešto što se ne odnosi na nijednu klasu u vašoj datoteci. Za ovaj primjer koristit ćemo MaterialComponents.
  4. Zatim kreirajte novu datoteku framera i ispustite modul u mapu modula.
  5. Sada provjerite je li format vašeg modula u skripti za kavu. To radite desnim klikom na datoteku i preimenovanjem u npr. MaterialComponents.coffee
  6. Sada prebacite na svoju Framer datoteku i dodajte MaterialComponents = zahtijevaju 'MaterialComponents' na vrhu vaše datoteke. Primijetite kako je to drugačije nego ako ste samo uvozili jedan razred
  7. Sada za poziv na predavanje, tipka = novi MaterialComponents.Button ili formField = novi MaterialComponents.TextField. Primjetite kako morate nazvati modul I klasu.

9. Primjeri

Klasa tipki

Ovo je samo klasa gumba. Razred je unutar Framer koda - nije zagušen u modulu.

https://framer.cloud/NQIYw

Modul gumba

Vidite dvostruko? Da, to izgleda točno kao gornji primjer - jer nekako je. Osim što je klasa sadržan u modulu.

https://framer.cloud/lWKTD

Modul MaterialComponents

Ovo je masivni modul koji sam napravio s više grešaka nego mravinjak - posebno oko polja obrasca. No, to je dobar primjer kako možete učitati mnoštvo klasa u jedan modul. Više o tome pročitajte ovdje.

https://framer.cloud/JJGwi

10. Resursi koji su mi zaista pomogli

Promišljati stvari za sebe nije lako. Ove dvije priče su mi zaista pomogle na putu, i nadam se da će i vama pomoći.

Razvoj Framer modula

Ovaj članak koji je napisao John Marstall zaista mi je pomogao kad sam pokušavao shvatiti stvari. Idi i daj mu 50 pljeska, zar ne?

Klase, petlje i nizovi u Frameru

Øyvind Nordbø-ov članak imao je nekoliko sjajnih primjera nastave i kako oni mogu praktično raditi. Idi, daj mu malo ljubavi.