Framer Cheat Sheet: Loops & arrays

Dette snyderi er til brugere med lidt erfaring. Loops giver dig mulighed for at oprette flere lag, mens matriser giver dig mulighed for at gemme information. Sammen kan du skabe virkelig kraftfulde og fleksible prototyper.

Jeg skrev denne serie med Framer-snyderik til folk, der ligesom mig ikke er så gode til at skrive kode (men temmelig temmelig dårlige til at kopiere og indsætte). Vi vil se på de grundlæggende elementer, enkle egenskaber og ofte anvendte mønstre. Se The School of Do for at se mere i serien.

I dette Framer Cheat-ark vil vi se på følgende:

  1. Hvad er en løkke
  2. Hvad er en matrix
  3. Oprettelse af en løkke
  4. Afstand lag i en løkke
  5. Interaktioner i en løkke
  6. Importerer værdier fra en matrix
  7. Skubbe lag ind i en matrix
  8. Kør en løkke gennem en matrix for at ændre alle lag
  9. Almindelige eksempler

1. Hvad er en løkke

Er du en doven røv? også mig. Heldigvis lønninger betaler sig, når det kommer til løkker. Du begynder at lære at tænke smart i modsætning til hardkodning af alt.

For at bevise min pointe - lad os sige, at jeg er nødt til at lave 3 lag.

Det tager 21 sekunder at hardkode det - men forestil dig, at jeg havde brug for at lave 25 lag.

Men at bruge en løkke tager det 11 sekunder. Se hvor let det er.

Bare sammenlign disse to side om side.

2. Hvad er en matrix

En matrix gemmer information. Denne information kan være billeder, navne, værdier, booleanere (sand / falsk), lag og mere. Tænk på en matrix som en liste eller en simpel database.

Du kan referere til en matrix ved hjælp af firkantede parenteser [].

# Dette er en tom matrix
navne = []
# Disse arrays har værdier
names = ["Mary", "Steve", "Mike", "Jane", "Sue"]
numre = [2345, 3456, 6578, 5672, 23467]
Gyldig = [sand, falsk, falsk, falsk, sand]
images = ["cat.jpg", "dog.jpg", "dog 2.png"]

Du kan også henvise til et specifikt emne i en matrix ved at bruge dets position. BEMÆRK: Den første position i en matrix er en nul og ikke en. Spørg mig ikke hvorfor, jeg prøver stadig at finde min nulfinger, når jeg tæller.

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

names [0] = "Mary"
names [1] = "Steve"
names [2] = "Mike"

3. Oprettelse af en løkke

En løkke giver dig mulighed for at oprette flere objekter med de samme værdier.

For at opsætte en løkke eller en for-løkke skal du blot gøre følgende:

for i i [0 ... 15]
   lag = nyt lag
# Dette eksempel vil gøre 15 lag

Du starter altid en løkke med ordet for. Efter dette er din tæller - de fleste mennesker bruger et i, men du kan bruge hvad som helst (i tilfælde af at du spekulerer på, for Jacksparrow i [0 ... 15] fungerer stadig). Derefter har du så plads. Herefter viser du, hvorfra dit array starter. Traditionelt starter du ved 0 og slutter ved det ønskede antal. Dit interval vil altid være mellem firkantede parenteser [] og adskilt af en ellipsis ...

PRO TIP:
Med to fuldstop (0..3) inkluderer området det sidste nummer (0,1,2,3). Med tre fuldstop (0 ... 3) udelukker rækkevidden det sidste nummer (0, 1, 2).
(Tak, tyske Bauer!)

4. Mellemlag i en løkke

Matematik. Gå du ikke glip af det? Bare sjov, jeg ved, at du er en designer. Heldigvis giver Framer dig svaret, men du skal bare finde ud af spørgsmålet.

For at jævne placere emner lodret i en løkke multiplicerer du lagets højde med i. Da i ændrer værdien med hver løkke, ændres værdierne.

for i i [0 ... 8]
   kort = nyt lag
      højde: 60
      y: 60 * i

Ved anvendelse af ovenstående eksempel vil y for det første kort være: 60 * [0] = 0, (første kort) .y = 60 * [0] = 0
(andet kort) .y = 60 * [1] = 60
(tredje kort) .y = 60 * [2] = 120

5. Interaktion i sløjfer

Interaktioner i sløjfer fungerer det samme som normalt, ikke?
Prøv følgende:

for i i [0 ... 6]
 lag = nyt lag
  bredde: 100
  højde: 50
  y: Align.center
  x: 110 * i + 10
 
 layer.on Events.MouseOver, ->
  layer.backgroundColor = "# 00aeff"

Skete der noget lignende:

Selvom du holder musepekeren over de andre lag - vil det sidste lag altid ændre sig. Dette skyldes, at du bare siger “lag.backgrou ..”, du henviser til det sidste lag, der blev oprettet. Ikke nødvendigvis den, du svæver over. Så hvordan løser vi dette? Vi bruger ordet dette i stedet for lagnavnet i begivenhedens afsnit.

for i i [0 ... 6]
 lag = nyt lag
  bredde: 100
  højde: 50
  y: Align.center
  x: 110 * i + 10
 
 layer.on Events.MouseOver, ->
  this.backgroundColor = "# 00aeff"

PRO TIP:
Du kan også bruge @ i stedet for dette.
Så this.backgroundColor = "# 00aeff" er det samme som @backgroundColor = "# 00aeff"
(Tak Andrew Liebchen!)

6. Importerer værdier fra en matrix til en løkke

Arrays kan give sløjfer information, og sløjfer kan udfylde arrays.

Hot damn - tingene er ved at blive virkelige. Vi vil finde ud af, hvordan en matrix kan give information til en løkke. I det nedenstående eksempel henviser kortlaget til navneopstillingen. I refererer til en bestemt del af arrayet med hver løkke.

names = ["Mary", "Steve", "Anne", "Mark"]
for i i [0 ... 4]
   kort = nyt lag
      html: names [i]
      x: 200 * i

PRO TIP:
Du kan bruge .længden på matrixen til at ændre mængden af ​​iterationer i din loop (se [0 ... navne.længde]). Tak Rohan Shackleford for at have mindet mig!

names = ["Mary", "Steve", "Anne", "Mark"]
for i i [0 ... navne.længde]
   kort = nyt lag
      html: names [i]
      x: i * 200

7. Skub lag ind i en matrix

Lad os udfylde en matrix ved hjælp af en løkke. I nedenstående eksempel kan vi se programmet, der kører hver linje i løkken. Når det kommer til kort. Skub (kort) skubber det et nyt lag ind i matrixen.

I nedenstående eksempel definerer vi først en tom matrix og derefter. Skub hvert lag, som loopen opretter, ind i det. Jeg ændrede baggrundsfarven på et af kortene for at vise dig, hvordan du kan referere til et lag i matrixen.

kort = []
for i i [0 ... 4]
   kort = nyt lag
      x: 170 * i
      bredde: 150
      html: i
   cards.push (kort)
kort [1] .backgroundColor = "# 558D7E"

8. Oprettelse af en løkke, der kun er så lang som en matrix

Du kan støde på et tilfælde, hvor du vil have, at din løkke kun skal være så lang som en matrix eller en specificeret liste. Ved at gøre nedenstående vil du være i stand til at gøre netop det.

Blev dit sind bare sprængt ... min gjorde det.

blomster = ["rose", "lilje", "tulipan", "protea", "lavendel"]
til blomst, i i blomster
   kort = nyt lag
      html: blomster [i]
      størrelse: 70
      x: 80 * i
      y: Align.center

9. Kør gennem en matrix for at ændre alle lag

Når du opretter faner eller noget lignende, skal du gøre alle lagene inaktive, undtagen det valgte på.

Den første mulighed er at hardkode alt. Jeg skammer mig lidt over at sige, at jeg gjorde det alt for længe.

Den anden mulighed er at køre en løkke for at gå gennem matrixen for at ændre hvert lag på én gang - og derefter indstille det valgte lag til aktivt.

#empty array
bttns = []
#loop
for i i [0 ... 6]
  # skaberknap
  bttn = nyt lag
    bredde: 100
    højde: 60
    baggrund Farve: "# 555"
    borderRadius: 5
    x: 110 * i
    opacitet: 0,5
 
  # skubbe bttn-lag ind i bttns-array
  bttns.push (bttn)
   #begivenhed
   bttn.onTap ->
      #creating loop til at køre gennem bttns
      til bttn i bttns
          #Hvad vil alle lag vende sig mod
          bttn.kapacitet = 0,5
      # gør den valgte fane aktiv
      this.opactiy = 1

11. Almindelige eksempler

1. Gitter

Du kan oprette et gitter ved hjælp af en løkke i en løkke (som filmen Inception ... men med sløjfer).

Den første sløjfe opretter en række (eller en kolonne - op til dig). Derefter opretter du en anden løkke i den originale - denne er til cellerne. I nedenstående eksempel kan du se, at rækkerne er en sløjfe, og at celler er en anden oven på rækkerne.

Prøv nedenstående eksempel for fuldt ud at gribe fat i gitter.

https://framer.cloud/ILhXw/

2. Oprettelse af sider

Oprettelse af flere sider med en løkke er betydeligt lettere end at gøre hver enkelt for sig.

https://framer.cloud/GAXYu/

3. Rul

Opret flere lag, som du kan rulle igennem. Dette er nyttigt, hvis du opretter kontaktlister.

https://framer.cloud/btXcY/

4. Oprettelse af flere bevægelige ting

Brug for at lave mange regndråber? Snefnug? tilfældige prikker? Dette eksempel kan hjælpe dig.

https://framer.cloud/ZMbMX

5. Trekord

I dette eksempel kører vi løkken gennem en JSON. Dette er praktisk, hvis du vil importere en kontaktliste osv.

Akkordeon kan være super nyttige til åbning af kontaktkort og lignende. Jeg blev stort set inspireret af denne prototype - jeg ved ikke, hvem der har oprettet den, så hvis du læser dette, så lad mig det vide, så jeg kan henvise til dig!

https://framer.cloud/AnszR/
Forhåbentlig hjalp dette snyderi dig, og hvis det ikke gjorde det, eller vil du lære mere om noget andet, så lad en kommentar bælge, så opdaterer jeg :)