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
- 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)
offset
jestliczbą 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🦊❤️