事件 Events丨Framer 文档 Code

Code

“点击图层A，图层A缩小”这里面“点击图层A”就是一个事件。通过事件给以给图层定义交互动画。简单的点击、滑动，复杂的多点触控都可以通过定义事件实现。

Frame中有大量的事件，轻点onTap标签、 滚动onScroll标签是用的比较多的事件。事件也可以通过动画、状态的切换、页面的切换等激活。如果你设计了更多复杂的交互，可以使用多点触控手势如从边缘划入onEdgeSwipe、捏`onPinch

`。

# 点击图层layerA
layerA.onTap ->
  ...
# 滚动图层layerA
layerA.onScroll ->
  ...
# 划动图层layerA
layerA.onSwipe ->
  ...
# 图层layerA的动画结束时
layerA.onAnimationEnd ->
  ...

一个用的特别多的事件是轻点目标图层，在两个状态之间切换（就鼠标点击或者手指轻触）。

# 轻点切换状态
settings.onTap ->
  setting.stateCycle()

例子：联动动画 Animation Chaining

事件可以用来给动画做联动。比如说你可以开始一个新的动画当另外一个动画结束时，用AnimationEnd标签。

# 动画事件
layerA.onAnimationStart ->
  ...
layerA.onAnimationEnd ->
  ...

下面是一个简单的联动动画案例。一个无限循环播放的动画。

# 图层layerA的动画x轴移动80缓进缓出曲线
layerA.animation
  x: 80 
  options: 
    curve: Bezier.ease
# 当图层layerA的动画结束时播放下面的动画
layerA.onAnimationEnd ->
  layerA.animate
    x: 0
    options:
      curve: Bezier.ease