使用FramerJS对图层进行对中单击

Question

目标是将按钮层从屏幕中间的底部垂直向上移动，同时增长到更大的尺寸。然而，在点击图层时，它不会移动到精确的中心。它向上移动，但向右移动。为什么会这样呢？

码

bg = new BackgroundLayer
    backgroundColor: "#f39c12"

button = new Layer
    width:  100
    height: 100
    borderRadius: 100
    backgroundColor: "white"
    x: Align.center
    y: Align.bottom(-100)

button.on Events.Click, ->
    button.states.next()

button.states = 
    StateA:
        width:  300
        height: 300
        borderRadius: 300
        y: Align.center 

Answer 1

原因是，只有在创建层或状态时才计算Align.center。因此，将x: Align.center添加到状态也不起作用(正如您可能期望的那样)。

但是，通过将状态的midX属性设置为Screen.midX，有一种简单的方法可以做到这一点。完整的例子：

bg = new BackgroundLayer
    backgroundColor: "#f39c12"

button = new Layer
    width:  100
    height: 100
    borderRadius: 100
    backgroundColor: "white"
    x: Align.center
    y: Align.bottom(-100)

button.on Events.Click, ->
    button.states.next()

button.states = 
    StateA:
        width:  300
        height: 300
        borderRadius: 300
        y: Align.center 
        midX: Screen.midX

工作原型可以在这里找到：https://framer.cloud/RsULi

Answer 2

当您放大按钮的高度和宽度时，按钮会放大，但是它的x和y属性可能不会像您预期的那样改变。

相反，请尝试在scale中调整StateA

button.states = 
    StateA:
        borderRadius: 300
        y: Align.center
        scale: 3