Framer Cheat Sheet: Loops & πίνακες

Αυτό το φύλλο εξαπατήσει είναι για τους χρήστες με λίγη εμπειρία. Οι κύκλοι σάς επιτρέπουν τη δημιουργία πολλαπλών επιπέδων ενώ οι πίνακες σας επιτρέπουν να αποθηκεύετε πληροφορίες. Μαζί, μπορείτε να δημιουργήσετε πραγματικά ισχυρά και ευέλικτα πρωτότυπα.

Έγραψα αυτή τη σειρά Framer cheat sheets για ανθρώπους οι οποίοι, όπως και εγώ, δεν είναι τόσο σπουδαίοι στο γράψιμο κώδικα (αλλά αρκετά αρκετά κακό στο αντίγραφο & επικόλληση). Θα εξετάσουμε τα βασικά στοιχεία, τις απλές ιδιότητες και τα κοινά χρησιμοποιούμενα πρότυπα. Για να δείτε περισσότερα στη σειρά, ανατρέξτε στο The School of Do.

Σε αυτό το φύλλο Framer Cheat, θα δούμε τα εξής:

  1. Τι είναι ένας βρόχος
  2. Τι είναι ένας πίνακας
  3. Δημιουργία βρόχου
  4. Διαχωρισμός στρώσεων σε βρόχο
  5. Αλληλεπιδράσεις σε βρόχο
  6. Εισαγωγή τιμών από έναν πίνακα
  7. Σπρώξτε τα στρώματα σε μια συστοιχία
  8. Εκτελέστε ένα βρόχο μέσω ενός πίνακα για να αλλάξετε όλα τα επίπεδα
  9. Κοινά παραδείγματα

1. Τι είναι ένας βρόχος

Είσαι ένας τεμπέλης κώλο; και εγώ. Ευτυχώς, η τεμπελιά πληρώνει μακριά όταν πρόκειται για βρόχους. Αρχίζετε να μαθαίνετε να σκέφτεστε έξυπνα, σε αντίθεση με τα σκληρά κωδικοποιημένα πάντα.

Για να αποδείξω το σημείο μου - ας πούμε ότι πρέπει να κάνω 3 στρώματα.

Για τον σκληρό κώδικα, χρειάζονται 21 δευτερόλεπτα - αλλά φαντάζομαι ότι έπρεπε να κάνω 25 στρώματα.

Αλλά για να χρησιμοποιήσετε ένα βρόχο χρειάζονται 11 δευτερόλεπτα. Δείτε πόσο εύκολο είναι αυτό.

Απλά συγκρίνετε τα δύο δίπλα-δίπλα.

2. Τι είναι ένας πίνακας

Μια συστοιχία αποθηκεύει πληροφορίες. Αυτές οι πληροφορίες μπορούν να είναι εικόνες, ονόματα, τιμές, booleans (true / false), στρώματα και πολλά άλλα. Σκεφτείτε έναν πίνακα ως λίστα ή μια απλή βάση δεδομένων.

Μπορείτε να αναφέρετε έναν πίνακα χρησιμοποιώντας αγκύλες [].

#Αυτός είναι ένας άδειος πίνακας
ονόματα = []
# Αυτές οι συστοιχίες έχουν τιμές
ονόματα = ["Mary", "Steve", "Mike", "Jane", "Sue"]
αριθμοί = [2345, 3456, 6578, 5672, 23467]
Ισχύει = [αληθής, ψευδής, ψευδής, αληθής]
εικόνες = ["cat.jpg", "dog.jpg", "dog 2.png"]]

Μπορείτε επίσης να αναφέρετε ένα συγκεκριμένο στοιχείο σε έναν πίνακα χρησιμοποιώντας τη θέση του. ΣΗΜΕΙΩΣΗ: Η πρώτη θέση σε μια συστοιχία είναι μηδέν και όχι μία. Μη με ρωτάς γιατί, εγώ ακόμα προσπαθώ να βρω το μηδέν δάχτυλο μου όταν μετράω.

ονόματα = ["Μαρία", "Steve", "Mike," Jane "," Sue "]

ονόματα [0] = "Mary"
ονόματα [1] = "Steve"
ονόματα [2] = "Mike"

3. Δημιουργία βρόχου

Ένας βρόχος σας επιτρέπει να δημιουργήσετε πολλαπλά αντικείμενα με τις ίδιες τιμές.

Για να ρυθμίσετε έναν βρόχο ή έναν βρόχο, κάντε τα εξής:

για i σε [0 ... 15]
   layer = new Layer
# Αυτό το παράδειγμα θα κάνει 15 στρώματα

Αρχίζετε πάντα έναν βρόχο με τη λέξη για. Μετά από αυτό είναι ο μετρητής σας - οι περισσότεροι άνθρωποι χρησιμοποιούν ένα i, αλλά μπορείτε να χρησιμοποιήσετε οτιδήποτε (σε περίπτωση που αναρωτιέστε, για Jacksparrow στο [0 ... 15] εξακολουθεί να λειτουργεί). Στη συνέχεια, στη συνέχεια, έχετε στη συνέχεια. Στη συνέχεια, μετά από αυτό θα δείξει από πού να όπου το πλέγμα σας θα ξεκινήσει. Παραδοσιακά ξεκινάτε από το 0 και τελειώνετε στον αριθμό της επιλογής σας. Η περιοχή σας θα είναι πάντα ανάμεσα σε αγκύλες [] και χωρίζεται από μια ελλειψία ....

ΣΥΜΒΟΥΛΟΣ PRO:
Με δύο πλήρεις στάσεις (0..3) το εύρος περιλαμβάνει τον τελευταίο αριθμό (0,1,2,3). Με τρία πλήκτρα (0 ... 3), η περιοχή αποκλείει τον τελευταίο αριθμό (0, 1, 2).
(Ευχαριστούμε Γερμανικά Bauer!)

4. Διαχωρισμός στρώσεων σε βρόχο

Μαθηματικά. Μην το χάσετε; Απλά να γελάσω, ξέρω ότι είστε σχεδιαστής. Ευτυχώς ο Framer θα σας δώσει την απάντηση, αλλά απλά πρέπει να υπολογίσετε την ερώτηση.

Για ομοιόμορφα αντικείμενα διαστήματος κάθετα σε βρόχο, πολλαπλασιάζετε το ύψος του στρώματος με το i. Επειδή το i αλλάζει τιμή με κάθε βρόχο, οι τιμές θα αλλάξουν.

για i στο [0 ... 8]
   κάρτα = νέο επίπεδο
      ύψος: 60
      y: 60 * ί

Χρησιμοποιώντας το παραπάνω παράδειγμα, το y για την πρώτη κάρτα θα είναι: 60 * [0] = 0, (πρώτη κάρτα) .y = 60 * [0] = 0
(δεύτερη κάρτα) .y = 60 * [1] = 60
(τρίτη κάρτα) .y = 60 * [2] = 120

5. Αλληλεπιδράσεις σε βρόχους

Οι αλληλεπιδράσεις σε βρόχους λειτουργούν το ίδιο με το κανονικό δικαίωμα;
Δοκιμάστε τα εξής:

για i σε [0 ... 6]
 layer = new Layer
  πλάτος: 100
  ύψος: 50
  y: Ευθυγράμμιση
  x: 110 * i + 10
 
 layer.on Events.MouseOver, ->
  layer.backgroundColor = "# 00aeff"

Κάναμε κάτι τέτοιο:

Ακόμα κι αν αιωρείτε πάνω από τα άλλα στρώματα - το τελευταίο στρώμα θα αλλάζει πάντα. Αυτό συμβαίνει επειδή λέει ακριβώς "layer.backgrou .." αναφέρεστε στο τελευταίο στρώμα που δημιουργήθηκε. Δεν είναι απαραιτήτως αυτό που πετάτε πάνω. Λοιπόν, πώς να το διορθώσουμε αυτό; Χρησιμοποιούμε τη λέξη αυτή αντί για το όνομα του στρώματος στην ενότητα του συμβάντος.

για i σε [0 ... 6]
 layer = new Layer
  πλάτος: 100
  ύψος: 50
  y: Ευθυγράμμιση
  x: 110 * i + 10
 
 layer.on Events.MouseOver, ->
  αυτό το φόντο πίσωColor = "# 00aeff"

ΣΥΜΒΟΥΛΟΣ PRO:
Μπορείτε επίσης να χρησιμοποιήσετε το @ αντί για αυτό.
Επομένως, αυτό το παράδειγμα. BackroundColor = "# 00aeff" είναι το ίδιο με το @backgroundColor = "# 00aeff"
(Σας ευχαριστώ Andrew Liebchen!)

6. Εισαγωγή τιμών από έναν πίνακα σε ένα βρόχο

Οι πίνακες μπορούν να δώσουν πληροφορίες για τους βρόχους και οι βρόχοι μπορούν να πληκτρολογήσουν συστοιχίες.

Καυτό βλασφημία - τα πράγματα πρόκειται να γίνουν πραγματικά. Θα δούμε πώς ένας πίνακας μπορεί να δώσει πληροφορίες σε έναν βρόχο. Στο παρακάτω παράδειγμα, το στρώμα της κάρτας αναφέρει τη συστοιχία ονομάτων. Το i αναφέρει ένα συγκεκριμένο τμήμα του πίνακα με κάθε βρόχο.

ονόματα = ["Μαρία", "Steve", "Anne", "Mark"]
για i στο [0 ... 4]
   κάρτα = νέο επίπεδο
      html: ονόματα [i]
      χ: 200 * ί

ΣΥΜΒΟΥΛΟΣ PRO:
Μπορείτε να χρησιμοποιήσετε το .length του πίνακα για να αλλάξετε το ποσό των επαναλήψεων στον βρόχο σας (δείτε [0 ... names.length]). Σας ευχαριστώ Rohan Shackleford για την υπενθύμιση μου!

ονόματα = ["Μαρία", "Steve", "Anne", "Mark"]
για i σε [0 ... names.length]
   κάρτα = νέο επίπεδο
      html: ονόματα [i]
      x: i * 200

7. Σπρώξτε τα στρώματα σε μια συστοιχία

Τώρα ας πληρώσουμε έναν πίνακα χρησιμοποιώντας ένα βρόχο. Στο παρακάτω παράδειγμα, μπορούμε να δούμε το πρόγραμμα που τρέχει κάθε γραμμή στον βρόχο. Όπως φτάνει στις κάρτες.push (κάρτα) ωθεί ένα νέο στρώμα στη συστοιχία.

Στο παρακάτω παράδειγμα, καθορίζουμε πρώτα ένα άδειο πίνακα και στη συνέχεια .push κάθε στρώμα που δημιουργεί ο βρόχος σε αυτό. Αλλάξα το χρώμα φόντου μιας κάρτας για να σας δείξει πώς μπορείτε να αναφέρετε ένα στρώμα μέσα στον πίνακα.

κάρτες = []
για i στο [0 ... 4]
   κάρτα = νέο επίπεδο
      x: 170 * ί
      πλάτος: 150
      html: i
   cards.push (κάρτα)
κάρτες [1] .backgroundColor = "# 558D7E"

8. Δημιουργία ενός βρόχου που είναι μόνο όσο ένας πίνακας

Ενδέχεται να συναντήσετε μια περίπτωση όπου θέλετε ο βρόχος σας να είναι μόνο όσο ένας πίνακας ή μια καθορισμένη λίστα. Κάνοντας τα παρακάτω, θα είστε σε θέση να κάνετε ακριβώς αυτό.

Μήπως το μυαλό σου έσβησε ... η δική μου.

λουλούδια = "τριαντάφυλλο", "κρίνος", "τουλίπα", "πρωτεΐνη", "λεβάντα"]
για λουλούδια, σε λουλούδια
   κάρτες = νέο επίπεδο
      html: λουλούδια [i]
      μέγεθος: 70
      x: 80 * i
      y: Ευθυγράμμιση

9. Τρέξτε μέσω ενός πίνακα για να αλλάξετε όλα τα επίπεδα

Όταν κάνετε καρτέλες ή κάτι παρόμοιο, πρέπει να κάνετε όλα τα επίπεδα ανενεργά, εξαιρουμένων των επιλεγμένων.

Η πρώτη επιλογή είναι να κάνουμε hardcode τα πάντα. Είμαι λίγο ντροπιασμένος να πω ότι το έκανα για πολύ καιρό.

Η δεύτερη επιλογή είναι να εκτελέσετε ένα βρόχο για να περάσετε από τη συστοιχία για να αλλάξετε κάθε στρώμα με ένα πάτημα - και έπειτα να ορίσετε το ενεργό επιλεγμένο στρώμα.

#empty array
bttns = []
#βρόχος
για i σε [0 ... 6]
  #create button
  bttn = νέο επίπεδο
    πλάτος: 100
    ύψος: 60
    backgroundColor: "# 555"
    borderRadius: 5
    x: 110 * i
    αδιαφάνεια: 0,5
 
  #pushing το στρώμα bttn στον πίνακα bttns
  bttns.push (bttn)
   #Εκδήλωση
   bttn.onTap ->
      #create βρόχο για να τρέξει μέσω bttns
      για το bttn στα bttns
          #What θα στρίψουν όλα τα στρώματα
          bttn.opacity = 0,5
      #making ενεργή την επιλεγμένη καρτέλα
      this.opactiy = 1

11. Συνήθη παραδείγματα

1. Πλέγμα

Μπορείτε να δημιουργήσετε ένα πλέγμα χρησιμοποιώντας ένα βρόχο μέσα σε ένα βρόχο (όπως η ταινία Inception ... αλλά με βρόχους).

Ο πρώτος βρόχος δημιουργεί μια σειρά (ή μια στήλη - μέχρι εσάς). Στη συνέχεια, δημιουργείτε έναν άλλο βρόχο εντός του αρχικού - αυτό είναι για τα κελιά. Στο παρακάτω παράδειγμα μπορείτε να δείτε ότι οι σειρές είναι ένας βρόχος και ότι τα κελιά είναι ένα άλλο στην κορυφή των γραμμών.

Δοκιμάστε το παράδειγμα που ακολουθεί για να ολοκληρώσετε πλήρως το πλέγμα με τα πλέγματα.

https://framer.cloud/ILhXw/

2. Δημιουργία σελίδων

Η δημιουργία πολλαπλών σελίδων με βρόχο είναι πολύ πιο εύκολη από την πραγματοποίηση καθεμιάς από αυτές μεμονωμένα.

https://framer.cloud/GAXYu/

3. Μετακινηθείτε

Δημιουργήστε πολλαπλά επίπεδα στα οποία μπορείτε να μετακινηθείτε. Αυτό είναι χρήσιμο εάν δημιουργείτε λίστες επαφών.

https://framer.cloud/btXcY/

4. Δημιουργία πολλαπλών κινούμενων πραγμάτων

Ανάγκη να κάνετε φορτία σταγόνων βροχής; Νιφάδες χιονιού; τυχαίες κουκκίδες; Αυτό το παράδειγμα μπορεί να σας βοηθήσει.

https://framer.cloud/ZMbMX

5. Ακορντεόν

Σε αυτό το παράδειγμα, τρέχουμε το βρόχο μέσω ενός JSON. Αυτό είναι χρήσιμο εάν θέλετε να εισαγάγετε μια λίστα επαφών, κ.λπ.

Το ακορντεόν μπορεί να είναι εξαιρετικά χρήσιμο για το άνοιγμα των καρτών επαφής και τα παρόμοια. Ήμουν εν πολλοίς εμπνευσμένος από αυτό το πρωτότυπο - δεν ξέρω ποιος το δημιούργησε, οπότε αν διαβάζετε αυτό, παρακαλώ με ενημερώστε για να μπορώ να σας αναφέρω!

https://framer.cloud/AnszR/
Ας ελπίσουμε ότι αυτό το εξαπατήσει φύλλο σας βοήθησε, και αν δεν ή θέλετε να μάθετε περισσότερα για κάτι άλλο, παρακαλώ αφήστε ένα σχόλιο κάτω, και θα ενημερώσω :)