Framer varalica: petlje i nizovi

Ovaj cheat list namijenjen je korisnicima s malo iskustva. Petlje vam omogućuju stvaranje više slojeva, dok nizovi omogućuju pohranu podataka. Zajedno možete stvoriti stvarno snažne i fleksibilne prototipove.

Napisao sam ovu seriju Framer cheats listova za ljude koji, poput mene, nisu baš sjajni u pisanju koda (ali su prilično prilično dobri u kopiranju i lijepljenju). Pogledat ćemo same osnove, jednostavna svojstva i najčešće korištene uzorke. Da biste vidjeli više u seriji, pogledajte The School of Do.

U ovom Framer Cheat listu potražit ćemo sljedeće:

  1. Što je petlja
  2. Što je niz
  3. Izrada petlje
  4. Razmaknuti slojevi u petlji
  5. Interakcije u petlji
  6. Uvoz vrijednosti iz niza
  7. Guranje slojeva u niz
  8. Pokrenite petlju kroz niz da biste promijenili sve slojeve
  9. Uobičajeni primjeri

1. Što je petlja

Jeste li lijeni magarci? ja isto. Srećom, lijenost se isplati kad su u pitanju petlje. Počinjete učiti pametno razmišljati za razliku od tvrdog kodiranja svega.

Da dokažem svoje mišljenje - recimo da moram napraviti 3 sloja.

Za tvrdo kodiranje potrebno vam je 21 sekunda - ali zamislite da mi je potrebno napraviti 25 slojeva.

Ali za korištenje petlje potrebno je 11 sekundi. Pogledajte kako je to lako.

Samo usporedite ove dvije strane.

2. Što je niz

Niz pohranjuje informacije. Te informacije mogu biti slike, imena, vrijednosti, logički podaci (istiniti / lažni), slojevi i još mnogo toga. Mislite na niz kao na popis ili na jednostavnu bazu podataka.

Niz se možete uputiti pomoću uglatih zagrada [].

#Ovo je prazan niz
imena = []
#Ovi nizovi imaju vrijednosti
name = ["Mary", "Steve", "Mike", "Jane", "Sue"]
brojevi = [2345, 3456, 6578, 5672, 23467]
Vrijedi = [istina, laž, laž, laž, istina]
images = ["cat.jpg", "dog.jpg", "dog 2.png"]

Možete se uputiti i na određenu stavku u nizu koristeći se njenom pozicijom. NAPOMENA: Prvi položaj u nizu je nula, a ne jedan. Nemojte me pitati zašto, još uvijek pokušavam pronaći nulti prst kad brojim.

name = ["Mary", "Steve", "Mike," Jane "," Sue "]

imena [0] = "Marija"
imena [1] = "Steve"
imena [2] = "Mike"

3. Izrada petlje

Petlja vam omogućuje da stvorite više objekata s istim vrijednostima.

Da biste postavili petlju ili petlju, napravite sljedeće:

za i u [0 ... 15]
   sloj = novi sloj
#Ovim primjerom napravit ćete 15 slojeva

Uvijek započnete petlju s riječi za. Slijedite ovo je vaš brojač - većina ljudi koristi i, ali možete koristiti bilo što (u slučaju da se pitate, jer Jacksparrow u [0 ... 15] i dalje radi). Nakon toga ćete se prijaviti. Nakon toga pokazujete odakle će započeti niz. Tradicionalno započinjete od 0, a završavate na broju po vašem izboru. Vaš raspon će uvijek biti između uglatih zagrada [] i razdvojen elipsom ....

PRO SAVJET:
S dva puna vrha (0..3) raspon uključuje posljednji broj (0,1,2,3). S tri puna vrha (0 ... 3), raspon isključuje zadnji broj (0, 1, 2).
(Hvala njemački Bauer!)

4. Razmaknuti slojevi u petlji

Matematika. Ne nedostajete? Šalim se, znam da ste dizajner. Srećom, Framer će vam dati odgovor, ali samo morate smisliti pitanje.

Za ravnomjerno raspoređivanje predmeta okomito u petlju, vi množite sloj s i. Budući da i mijenja vrijednost sa svakom petljom, vrijednosti će se mijenjati.

za i u [0 ... 8]
   kartica = novi sloj
      visina: 60
      y: 60 * i

Korištenjem gornjeg primjera, y za prvu karticu bit će: 60 * [0] = 0, (prva karta) .y = 60 * [0] = 0
(druga karta) .y = 60 * [1] = 60
(treća karta) .y = 60 * [2] = 120

5. Interakcije u petlji

Interakcije u petlji djeluju isto kao i normalno?
Pokušajte sljedeće:

za i u [0 ... 6]
 sloj = novi sloj
  širina: 100
  visina: 50
  y: Poravnaj.centar
  x: 110 * i + 10
 
 sloj.on događanja.MouseOver, ->
  layer.backgroundColor = "# 00aeff"

Je li se dogodilo nešto slično:

Iako se pomaknete iznad drugih slojeva - posljednji sloj će se uvijek promijeniti. To je zato što samo kažete "layer.backgrou .." vi mislite na zadnji stvoreni sloj. Ne nužno onaj nad kojim lebdiš. Pa kako to popraviti? Koristimo riječ ovo umjesto naziva sloja u odjeljku događaja.

za i u [0 ... 6]
 sloj = novi sloj
  širina: 100
  visina: 50
  y: Poravnaj.centar
  x: 110 * i + 10
 
 sloj.on događanja.MouseOver, ->
  this.backgroundColor = "# 00aeff"

PRO SAVJET:
Također možete upotrijebiti @ umjesto ovoga.
Dakle, ovo.backgroundColor = "# 00aeff" je isto što i @backgroundColor = "# 00aeff"
(Hvala Andrew Liebchen!)

6. Uvoz vrijednosti iz niza u petlju

Nizovi mogu dati informacije o petlji, a petlje mogu naseliti nizove.

Dovraga - stvari će uskoro postati stvarne. Otkrit ćemo kako niz može dati informacije petlji. U primjeru u nastavku, sloj kartice odnosi se na niz imena. Uz svaku petlju referenciram određeni dio matrice.

name = ["Mary", "Steve", "Anne", "Mark"]
za i u [0 ... 4]
   kartica = novi sloj
      html: imena [i]
      x: 200 * i

PRO SAVJET:
Možete upotrebljavati .length polja kako biste promijenili količinu ponavljanja u svojoj petlji (pogledajte [0 ... names.length]). Hvala Rohan Shackleford što ste me podsjetili!

name = ["Mary", "Steve", "Anne", "Mark"]
za i u [0 ... names.length]
   kartica = novi sloj
      html: imena [i]
      x: i * 200

7. Guranje slojeva u niz

Sad napunimo niz pomoću petlje. U primjeru u nastavku možemo vidjeti program koji pokreće svaki redak u petlji. Kad stigne do cards.push (kartice), gura novi sloj u niz.

U primjeru u nastavku prvo definiramo prazan niz, a zatim u njega gurnemo svaki sloj koji petlja stvara. Promijenio sam boju pozadine jedne od kartica kako bih vam pokazao kako možete uputiti sloj u nizu.

kartice = []
za i u [0 ... 4]
   kartica = novi sloj
      x: 170 * i
      širina: 150
      html: i
   cards.push (kartica)
kartice [1] .backgroundColor = "# 558D7E"

8. Stvaranje petlje koja je dugačka samo kao niz

Možete naići na instancu u kojoj želite da vam petlja bude samo jednaka matrici ili navedenom popisu. Provodeći niže, moći ćete učiniti upravo to.

Je li vam se samo raznio um ... moj je.

cvijeće = ["ruža", "ljiljan", "tulipan", "protea", "lavanda"]
za cvijet, ja u cvijeće
   kartice = novi sloj
      html: cvijeće [i]
      veličina: 70
      x: 80 * i
      y: Poravnaj.centar

9. Prođite kroz niz da biste promijenili sve slojeve

Kada pravite jezičke ili nešto slično, trebate učiniti sve slojeve neaktivnim, isključujući odabrane na.

Prva je mogućnost tvrdo kodiranje svega. Malo me je sram reći da sam to predugo radila.

Druga je mogućnost pokrenuti petlju koja će proći kroz niz kako biste promijenili svaki sloj jednim potezom - i zatim odabrani sloj postavili na aktivan.

#prazni niz
bttns = []
#petlja
za i u [0 ... 6]
  #creating gumb
  bttn = novi sloj
    širina: 100
    visina: 60
    backgroundColor: "# 555"
    granicaRadius: 5
    x: 110 * i
    neprozirnost: 0,5
 
  #pushing bttn sloj u bttns niz
  bttns.push (bttn)
   #događaj
   bttn.onTap ->
      #creating petlja za kretanje kroz bttns
      za bttn u bttns
          # Čemu će se svi slojevi okrenuti
          bttn.opacity = 0,5
      #aktivacija odabrane kartice
      ovaj.opactiy = 1

11. Uobičajeni primjeri

1. Rešetka

Možete stvoriti mrežu koristeći petlju unutar petlje (poput filma Inception ..., ali s petljicama).

Prva petlja stvara red (ili stupac - do vas). Tada stvorite još jednu petlju unutar izvorne - ova je za stanice. U primjeru u nastavku možete vidjeti da su redovi jedna petlja, a da su ćelije drugi na vrhovima.

Isprobajte donji primjer da se u potpunosti riješite rešetki.

https://framer.cloud/ILhXw/

2. Izrada stranica

Stvaranje više stranica pomoću petlje značajno je jednostavnije od stvaranja svake pojedinačno.

https://framer.cloud/GAXYu/

3. Pomičite se

Stvorite više slojeva kroz koje se možete pomicati. Ovo je korisno ako pravite popise kontakata.

https://framer.cloud/btXcY/

4. Stvaranje više stvari u pokretu

Trebate napraviti puno kišnih kapi? Pahuljice? slučajne točke? Ovaj bi vam primjer mogao pomoći.

https://framer.cloud/ZMbMX

5. harmonika

U ovom primjeru, petlju prolazimo kroz JSON. To je korisno ako želite uvesti popis kontakata itd.

Harmonika može biti vrlo korisna za otvaranje kontaktnih kartica i slično. Bio sam nadahnut ovim prototipom - ne znam tko ga je stvorio, pa ako ovo čitate, javite mi kako bih vas mogao uputiti!

https://framer.cloud/AnszR/
Nadam se da vam je ovaj varalica pomogao, a ako niste ili želite saznati više o nečem drugom, ostavite komentar ispod, a ja ću ažurirati :)