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

使用FramerJS在点击时居中图层

2 个答案: