“点击图层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