JavaScript pentru Framer: Aliniere

Sunt unul dintre acei oameni care se luptă cu codificarea ca designer. Mereu am fost interesat de interaction design, în special de web. Așa că nu am mai putut evita să învăț JavaScript (Framer) și apoi am decis să înregistrez ceea ce nu știam și cum mi-am dat seama.

Pentru incepator

Aș dori să scriu pentru începători sau pentru cei care nu sunt familiarizați cu codificarea ca mine.

Înainte de a începe să vorbesc despre aliniere, aș dori să examinez rapid cum se scriu proprietăți în strat.

Există două moduri diferite de a da proprietăți ca mai jos;

layer = new Layer 
    backgroundColor: "darkblue"
#or
layer = new Layer
layer.backgroundColor = "darkblue"

Să începem Alinierea

Alinierea este

„Funcțiile de aliniere vă ajută să poziționați rapid un obiect pe ecran față de părintele său. Folosiți-le pentru a plasa un Layer în partea de sus, jos, stânga, dreapta sau centrul părintelui său. Ele pot fi folosite ca proprietăți de strat, în stări și animații.»

• poziționați un obiect pe ecran
• funcții
• Poate fi folosit ca proprietate, în stări și în animații

X: left, right, center 
Y: top, bottom, center

#Also, you can use like below:
   layer.center()
   layer.centerX(offset)
   layer.centerY(offset)

• align.bottom(offset)

offseteste unnumăr și este opțional.

S-ar putea să nu fie legat de secțiunea de aliniere, dar a trebuit să înțeleg despre coordonatele x, y pentru a utiliza offset. La început, nu aveam idee cum să scriu sau să calculez valorile lui x și y în framer sau JS. Pentru că m-am gândit la coordonate ca imaginea din stânga de mai jos. În cele din urmă, am descoperit cum funcționează valoarea coordonatelor x și y pe DOM (ecran) ca imaginea din dreapta.

Dacă dreptunghiul albastru este un singur strat, punctul roșu este valoarea coordonatelor x și y. Puteți poziționa stratul folosind valoarea punctului roșu unde doriți.

Deci, să trecem la alinierea din nou.

Dacă doriți să mutați poziția stratului albastru în poziția stratului galben,

puteți utiliza offset x (-50) și offset y (50).

Exemplu de #states

layerA.states =
stateA:
x: Align.right
y: Align.bottom
stateB:
x: Align.left
y: Align.top
layerA.onTap -> layerA.stateCycle()

Ultimul sfat. Comentariu la scenariul cafelei.

#This is a short comment.

###
This is a multiple comment.
###

Sper că infograficele mele vă vor ajuta să înțelegeți JavaScript pentru Framer. Noroc 🦊❤️

Asta nu este totul pentru moment❤️

😄

În cele din urmă, aș dori să vă împărtășesc ‹FrontEnd30 /› unde am învățat multe tehnici interesante de front-end.

🎉🎉🎉🎉🎉 Codare fericită astăzi 🎉🎉🎉🎉