状态 States丨Framer 文档 Code

Code

其实动画就是图层从一个状态切换到另一个状态，但直接用动画，这个图层就只有两个状态了。要给这个图层定义两个以上的状态，需要用到 States标签。状态还可以设定为循环。

添加状态 Adding States

状态虽然也是动画，但是添加方法和动画不一样，相当于把 animate中的属性都打包，变成了一个 states ，再在应用到 animate 中。

在下面的例子中，在设计模式中将 layerA 的不透明度设置为100%，下一步，给 layerA 添加一个新的状态，标题为 "fade"，将不透明度设置为0.

# 新状态， 标题“fade”
layerA.states.fade = 
  opacity: 0

下面举例让layerA继承状态“fade”的属性。只定义一个状态时是从默认状态切换到“fade” 状态的。

# 状态应用到动画
layerA.animate("fade")

# 切换状态
layerA.stateSwitch("fade")

但是现在还没有定义交互，所以其实是没有放“切换”这个动作载体的。

循环状态 Cycling States

用 stateCycle() 标签可以让状态循环。跟图层动画一样，状态也可以添加动画选项。

# 添加状态和动画选项 
layerA.states.rotate =
    rotation: 180
    animationOptions:
        time: 1
        curve: Bezier.ease
 
# 在两个状态间循环 
layerA.onTap ->
    layerA.stateCycle()

layerA的状态rotate是
旋转：180度
动画选项：
时长：1秒
曲线：贝塞尔的缓进缓出

轻点layerA时
layerA的状态循环

编辑状态 Editing States

覆盖状态跟添加新的状态一样，给新状态用相同的名称就覆盖了原来的状态。

# 覆盖👆的那个“rotate”状态 
layerA.states.rotate =
    rotation: 180