Я один из тех людей, которые борются с кодированием как дизайнер. Меня всегда интересовал интерактивный дизайн, особенно веб. Так что я больше не мог уклоняться от изучения JavaScript (Frame), и тогда я решил записать то, чего я не знал, и то, как я в этом разобрался.

Для начинающих

Я хотел бы написать для новичков или тех, кто не знаком с кодированием, как я.

Прежде чем я начну говорить о выравнивании, я хотел бы кратко рассмотреть, как писать свойства в слое.

Есть два разных способа задать свойства, как показано ниже;

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

Приступим к выравниванию

Выровнять

Функции Align помогают быстро позиционировать объект на экране относительно его родителя. Используйте их, чтобы разместить слой сверху, снизу, слева, справа или в центре его родителя. Их можно использовать как свойства слоя, в состояниях и анимации.

  • расположить объект на экране
  • функции
  • Его можно использовать как свойство в состояниях и в анимациях.
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являетсячислом и не является обязательным.

Это может быть не связано с разделом выравнивания, но мне нужно было понять координаты x, y, чтобы использовать смещение. Сначала я понятия не имел, как писать или вычислять значения x и y во фреймере или JS. Потому что я думал, что координаты как левое изображение ниже. Наконец, я обнаружил, как значения координат x и y работают на DOM (экране), как правильное изображение.

Если синий прямоугольник представляет собой один слой, красная точка представляет собой значение координат x и y. Вы можете расположить слой, используя значение красной точки, где хотите.

Итак, давайте снова перейдем к выравниванию.

Если вы хотите переместить положение синего слоя в положение желтого слоя,

вы можете использовать смещение x (-50) и смещение y (50).

Пример #states

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

Последний совет. Комментарий к кофейному сценарию.

#This is a short comment.

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

Надеюсь, моя инфографика поможет вам разобраться в JavaScript для Framer. Здоровья🦊❤️

Это еще не все❤️

😄

И, наконец, я хотел бы поделиться информацией о ‹FrontEnd30 /›, где я изучил множество крутых методов работы с интерфейсом.



Освойте 30 навыков работы с интерфейсом — FrontEnd30
Этой осенью мы запускаем FrontEnd30, премиальный курс для укрепления ваших навыков работы с интерфейсом на 30 реальных примерах…frontend30.com



🎉🎉🎉🎉🎉 Удачного программирования сегодня 🎉🎉🎉🎉