0

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

代码 

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
4

2 回答 2

1

原因是 Align.center 仅在您创建图层或状态时计算。出于这个原因，添加x: Align.center到状态也不起作用（正如您所期望的那样）。

但是，有一种简单的方法可以做到这一点，midX将 state 的属性设置为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

于 2017-05-18T08:16:14.407 回答
0

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

相反，请尝试scale调整StateA：

button.states = 
    StateA:
        borderRadius: 300
        y: Align.center
        scale: 3
于 2017-05-17T03:01:37.703 回答