Należę do osób, które jako projektant mają problemy z kodowaniem. Zawsze interesowałem się projektowaniem interakcji, zwłaszcza siecią. Nie mogłem już dłużej unikać nauki JavaScript (Framer) i zdecydowałem się zapisać to, czego nie wiedziałem i jak to odkryłem.

Dla początkującego

Chciałbym pisać dla początkujących lub tych, którzy nie znają się na kodowaniu tak jak ja.

Zanim zacznę mówić o wyrównaniu, chciałbym szybko przejrzeć, jak zapisywać właściwości w warstwie.

Istnieją dwa różne sposoby nadawania właściwości takich jak poniżej;

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

Zacznijmy Wyrównaj

Wyrównanie jest

Funkcje Align pomagają szybko ustawić obiekt na ekranie względem jego obiektu nadrzędnego. Użyj ich, aby umieścić warstwę na górze, na dole, po lewej, prawej stronie lub pośrodku jej elementu nadrzędnego. Można ich używać jako właściwości warstw, w stanach i animacjach.

  • umieść obiekt na ekranie
  • Funkcje
  • Można go używać jako właściwości, w stanach i w animacjach
X: left, right, center 
Y: top, bottom, center

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

  • wyrównaj.dół(przesunięcie)

offsetjestliczbą i jest opcjonalna.

Może to nie być powiązane z sekcją wyrównania, ale musiałem zrozumieć współrzędne x, y, aby użyć przesunięcia. Na początku nie miałem pojęcia, jak zapisać lub obliczyć wartości x i y w frameworku lub JS. Ponieważ myślałem, że współrzędne są takie jak lewy obrazek poniżej. W końcu odkryłem, jak współrzędne x i y działają na DOM (ekran), jak na prawym obrazie.

Jeśli niebieski prostokąt to jedna warstwa, czerwona kropka to wartość współrzędnych x i y. Możesz ustawić warstwę używając wartości czerwonej kropki w dowolnym miejscu.

Przejdźmy więc do ponownego wyrównania.

Jeśli chcesz przesunąć położenie warstwy niebieskiej na pozycję warstwy żółtej,

możesz użyć przesunięcia x (-50) i przesunięcia y (50).

#przykładowy stan

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

Ostatnia wskazówka. Komentarz do scenariusza kawowego.

#This is a short comment.

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

Mam nadzieję, że moje infografiki pomogą Ci zrozumieć JavaScript dla Framera. Pozdrawiam🦊❤️

To jeszcze nie wszystko❤️

😄

Na koniec chciałbym podzielić się ‹FrontEnd30 /›, gdzie nauczyłem się wielu fajnych technik front-endowych.



🎉🎉🎉🎉🎉 Miłego kodowania dzisiaj 🎉🎉🎉🎉