Events

事件是可以监听的,通过监听事件你可以知到在什么时候发生了什么从而给于反馈。事件可以是用户引起的,比如一个触摸或者点击,也可以是动画所引起,比如动画结束也是一个事件。在Framer中,大多数对象都支持事件监听,但你用到最多的是监听图层上的事件。

Events are things that you can listen for. They can originate from the user, like a touch or click, or from an animation that ends. Most objects support event listening in Framer, but you will most often listen for events on layers.

但一个事件监听函数被调用时,它的第一个参数一般是该事件信息,这些信息取决于事件类型,可能包含鼠标位置、鼠标增量等,第二个参数一般是你需要监听该事件的图层。

When an event is called, the first argument is the event information. Depending on the event, this can contain mouse positions, mouse deltas etc. The second argument is always the layer that the event occurred to.

你可以使用on方法来监听一个事件:

To listen for an event, you can use the on function:

  1. layerA = new Layer
  2. layerA.name = "Layer A"
  3. layerA.on Events.Click, (event, layer) ->
  4. print "Clicked", layer.name
  5. # 输出: "Clicked", "Layer A"

停止监听一个事件,可以使用off方法:

To stop listening for an event, you can use the off function:

  1. layerA = new Layer
  2. layerA.name = "Layer A"
  3. clickHandler = (event, layer) ->
  4. print "Clicked", layer.name
  5. layerA.on(Events.Click, clickHandler)
  6. layerA.off(Events.Click, clickHandler)

Tap Events(触击事件)

触击事件在电脑上是点击事件(Click),在手持设备上是触摸事件(Touch),它接受手势事件属性

Tap events receive the gesture event properties.

  • Events.Tap — 触击一个图层时。
  • Events.SingleTap — 和Tap一样。
  • Events.DoubleTap — 快速触击图层两次。
  1. layerA = new Layer
  2. layerA.on Events.Tap, (event) ->
  3. print "Tap"
  4. layerA = new Layer
  5. layerA.on Events.DoubleTap, (event) ->
  6. print "Double tap"

Tap事件简写

  1. # For Events.Tap
  2. layerA.onTap ->
  3. print "Tap"
  4. # For Events.SingleTap
  5. layerA.onSingleTap ->
  6. print "Single tap"
  7. # For Events.DoubleTap
  8. layerA.onDoubleTap ->
  9. print "Double tap"

ForceTap Events(压力触摸事件)

压力触摸事件接受手势事件属性

ForceTap events receive the gesture event properties.

  • Events.ForceTap — 压力触摸事件发生时。
  • Events.ForceTapChange — 触摸的压感改变时。
  • Events.ForceTapStart — 开始压力触摸时。
  • Events.ForceTapEnd — 结束压力触摸时。
  1. layerA = new Layer
  2. layerA.on Events.ForceTap, (event) ->
  3. print "Force tap"

ForceTap事件简写

  1. # For Events.ForceTap
  2. layerA.onForceTap ->
  3. print "Force tap"
  4. # For Events.ForceTapChange
  5. layerA.onForceTapChange ->
  6. print "Change of force tap pressure"
  7. # For Events.ForceTapStart
  8. layerA.onForceTapStart ->
  9. print "Start force tap"
  10. # For Events.ForceTapEnd
  11. layerA.onForceTapEnd ->
  12. print "End force tap"

LongPress Events(长按事件)

长按事件接受手势事件属性

LongPress events receive the gesture event properties.

  • Events.LongPress — 长按事件发生时。
  • Events.LongPressStart — 长按开始时。
  • Events.LongPressEnd — 长按结束时。
  1. # Detect a long press
  2. layer.on Events.LongPress, (event) ->
  3. print "Long press"

LongPress事件简写

  1. # For Events.LongPress
  2. layerA.onLongPress ->
  3. print "Long press"
  4. # For Events.LongPressStart
  5. layerA.onLongPressStart ->
  6. print "Start long press"
  7. # For Events.LongPressEnd
  8. layerA.onLongPressEnd ->
  9. print "End long press"

Swipe Events(扫滑事件)

滑动事件接受手势事件属性

Swipe events receive the gesture event properties.

Basic

  • Events.Swipe — 手指在一个图层上滑动时。
  • Events.SwipeStart — 开始在图层上滑动时。
  • Events.SwipeEnd — 结束在图层上滑动时。
  1. layerA = new Layer
  2. layerA.on Events.Swipe, (event) ->
  3. print event.distance

Swipe事件简写

  1. # For Events.Swipe
  2. layerA.onSwipe ->
  3. print "Currently swiping"
  4. # For Events.SwipeStart
  5. layerA.onSwipeStart ->
  6. print "Start swiping"
  7. # For Events.SwipeEnd
  8. layerA.onSwipeEnd ->
  9. print "End swiping"

Up

  • Events.SwipeUp — 向上滑动时。
  • Events.SwipeUpStart — 向上滑动开始时。
  • Events.SwipeUpEnd — 向上滑动结束时。
  1. layerA = new Layer
  2. layerA.on Events.SwipeUp, (event) ->
  3. print event.distance

SwipeUp事件简写

  1. # For Events.SwipeUp
  2. layerA.onSwipeUp ->
  3. print "Currently swiping up"
  4. # For Events.SwipeUpStart
  5. layerA.onSwipeUpStart ->
  6. print "Start swiping up"
  7. # For Events.SwipeUpEnd
  8. layerA.onSwipeUpEnd ->
  9. print "End swiping up"

Right

  • Events.SwipeRight — 向右滑动时。
  • Events.SwipeRightStart — 向右滑动开始时。
  • Events.SwipeRightEnd — 向右滑动结束时。
  1. layerA = new Layer
  2. layerA.on Events.SwipeRight, (event) ->
  3. print event.distance

SwipeRight事件简写

  1. # For Events.SwipeRight
  2. layerA.onSwipeRight ->
  3. print "Currently swiping right"
  4. # For Events.SwipeRightStart
  5. layerA.onSwipeRightStart ->
  6. print "Start swiping right"
  7. # For Events.SwipeRightEnd
  8. layerA.onSwipeRightEnd ->
  9. print "End swiping right"

Down

  • Events.SwipeDown — 向下滑动时。
  • Events.SwipeDownStart — 向下滑动开始时。
  • Events.SwipeDownend — 向下滑动结束时。
  1. layerA = new Layer
  2. layerA.on Events.SwipeDown, (event) ->
  3. print event.distance

SwipeDown事件简写

  1. # For Events.SwipeDown
  2. layerA.onSwipeDown ->
  3. print "Currently swiping down"
  4. # For Events.SwipeDownStart
  5. layerA.onSwipeDownStart ->
  6. print "Start swiping down"
  7. # For Events.SwipeDownEnd
  8. layerA.onSwipeDownEnd ->
  9. print "End swiping down"

Left

  • Events.SwipeLeft — 向左滑动时。
  • Events.SwipeLeftStart — 向左滑动开始时。
  • Events.SwipeLeftEnd — 向左滑动结束时。
  1. layerA = new Layer
  2. layerA.on Events.SwipeLeft, (event) ->
  3. print event.distance

SwipeLeft事件简写

  1. # For Events.SwipeLeft
  2. layerA.onSwipeLeft ->
  3. print "Currently swiping left"
  4. # For Events.SwipeLeftStart
  5. layerA.onSwipeLeftStart ->
  6. print "Start swiping left"
  7. # For Events.SwipeLeftEnd
  8. layerA.onSwipeLeftEnd ->
  9. print "End swiping left"

Pan Events(滑动事件)

滑动事件接受手势事件属性

Pan events receive the gesture event properties.

  • Events.Pan — 往任意方向滑动事件。
  • Events.PanStart — 开始滑动时。
  • Events.PanMove — 滑动事件发生的时候。
  • Events.PanEnd — 结束滑动事件时。
  • Events.PanLeft — 向左滑动时。
  • Events.PanRight — 向右滑动时。
  • Events.PanUp — 向上滑动时。
  • Events.PanDown — 向下滑动时。
  1. layerA = new Layer
  2. # Detect a panning gesture
  3. layerA.on Events.Pan, (event) ->
  4. print event.distance

Pan事件简写

  1. # For Events.Pan
  2. layerA.onPan ->
  3. print "Currently panning"
  4. # For Events.PanStart
  5. layerA.onPanStart ->
  6. print "Start panning"
  7. # For Events.PanMove
  8. layerA.onPanMove ->
  9. print "Currently panning"
  10. # For Events.PanEnd
  11. layerA.onPanEnd ->
  12. print "End panning"
  13. # For Events.PanLeft
  14. layerA.onPanLeft ->
  15. print "Panning left"
  16. # For Events.PanRight
  17. layerA.onPanRight ->
  18. print "Panning right"
  19. # For Events.PanUp
  20. layerA.onPanUp ->
  21. print "Panning up"
  22. # For Events.PanDown
  23. layerA.onPanDown ->
  24. print "Panning down"

Pinch Events(双指捏放事件)

双指捏放事件接受手势事件属性

Pinch events receive the gesture event properties.

  • Events.Pinch — 双指在屏幕上捏合或放远时。
  • Events.PinchStart — 开始捏放时。
  • Events.PinchEnd — 结束捏放时。
  1. layerA = new Layer
  2. layerA.pinchable.enabled = true
  3. layerA.on Events.Pinch, ->
  4. print layerA.scale, layerA.rotation

Pinch事件简写

  1. # For Events.Pinch
  2. layerA.onPinch ->
  3. print "Currently pinching"
  4. # For Events.PinchStart
  5. layerA.onPinchStart ->
  6. print "Start pinching"
  7. # For Events.PinchEnd
  8. layerA.onPinchEnd ->
  9. print "End pinching"

Scale Events(缩放事件)

缩放事件接受手势事件属性

Scale events receive the gesture event properties.

  • Events.Scale — 使用两指缩放图层时。
  • Events.ScaleStart — 开始缩放时。
  • Events.ScaleEnd — 结束缩放时。
  1. layerA = new Layer
  2. layerA.pinchable.enabled = true
  3. layerA.on Events.Scale, ->
  4. print layerA.scale

Scale事件简写

  1. # For Events.Scale
  2. layerA.onScale ->
  3. print "Currently scaling"
  4. # For Events.ScaleStart
  5. layerA.onScaleStart ->
  6. print "Start scaling"
  7. # For Events.ScaleEnd
  8. layerA.onScaleEnd ->
  9. print "End scaling"

Rotate Events(双指旋转事件)

旋转事件接受手势事件属性

Rotate events receive the gesture event properties.

  • Events.Rotate — 使用两指旋转图层时。
  • Events.RotateStart — 开始旋转时。
  • Events.RotateEnd — 结束旋转时。
  1. layerA = new Layer
  2. layerA.pinchable.enabled = true
  3. layerA.on Events.Rotate, ->
  4. print layerA.rotation

Rotate事件简写

  1. # For Events.Rotate
  2. layerA.onRotate ->
  3. print "Currently rotating"
  4. # For Events.RotateStart
  5. layerA.onRotateStart ->
  6. print "Start rotating"
  7. # For Events.RotateEnd
  8. layerA.onRotateEnd ->
  9. print "End rotating"

Touch Events(触摸事件)

  • Events.TouchStart — 开始触摸/点击时。
  • Events.TouchMove — 按住拖动或鼠标拖动时。
  • Events.TouchEnd — 结束触摸/点击时。
  1. layerA = new Layer
  2. # Returns the event and the layer
  3. layerA.on Events.TouchStart, (event, layer) ->
  4. print event, layer

Touch事件简写

  1. # For Events.TouchStart
  2. layerA.onTouchStart ->
  3. print "Start touch"
  4. # For Events.TouchMove
  5. layerA.onTouchMove ->
  6. print "Touch move"
  7. # For Events.TouchEnd
  8. layerA.onTouchEnd ->
  9. print "End touch"

Click Events(点击事件)

  • Events.Click — 点击或触摸时(在手机上无延迟,电脑上会有300ms延迟用以确定是否是双击)。
  1. layerA = new Layer
  2. # Returns the event and the layer
  3. layerA.on Events.Click, (event, layer) ->
  4. print event, layer

Click事件简写

  1. # For Events.Click
  2. layerA.onClick ->
  3. print "Click"

Mouse Events(鼠标事件)

  • Events.MouseUp — 松开鼠标左键时。
  • Events.MouseDown — 鼠标左键被按下时。
  • Events.MouseOver — 鼠标指针移到图层上面时。
  • Events.MouseOut — 鼠标指针移出图层上面时。
  • Events.MouseMove — 鼠标指针移动时。
  • Events.MouseWheel — 滚动鼠标滚轮时。
  1. layerA = new Layer
  2. # Returns the event and the layer
  3. layerA.on Events.MouseOver, (event, layer) ->
  4. print event, layer

Mouse事件简写

  1. # For Events.mouseup
  2. layerA.onMouseUp ->
  3. print "mouseup"
  4. # For Events.MouseDown
  5. layerA.onMouseDown ->
  6. print "mousedown"
  7. # For Events.MouseOver
  8. layerA.onMouseOver ->
  9. print "mouseover"
  10. # For Events.MouseOut
  11. layerA.onMouseOut ->
  12. print "mouseout"
  13. # For Events.MouseMove
  14. layerA.onMouseMove ->
  15. print "mousemove"
  16. # For Events.MouseWheel
  17. layerA.onMouseWheel ->
  18. print "mousewheel"

Animation Events(动画事件)

  • Events.AnimationStart — 一个动画开始时。
  • Events.AnimationStop — 一个动画停止(不一定结束,stop()函数可以中途停止它)时。
  • Events.AnimationEnd — 一个动画结束时。
  1. layerA = new Layer
  2. layerA.animate
  3. properties:
  4. x: 100
  5. # Returns the animation and the layer
  6. layerA.on Events.AnimationEnd, (animation, layer) ->
  7. print animation, layer

Animation事件简写

  1. # For Events.AnimationStart
  2. layerA.onAnimationStart ->
  3. print "Animation started"
  4. # For Events.AnimationStop
  5. layerA.onAnimationStop ->
  6. print "Animation stopped"
  7. # For Events.AnimationEnd
  8. layerA.onAnimationEnd ->
  9. print "Animation ended"

State Events(状态事件)

  • Events.StateWillSwitch — 即将转换到另一个状态时。
  • Events.StateDidSwitch — 刚好转换到另一个状态时。
  1. layerA = new Layer
  2. layerA.states.add
  3. rotate:
  4. rotation: 90
  5. layerA.states.switch("rotate")
  6. # 返回旧状态、新状态以及该图层的所有状态
  7. layerA.on Events.StateDidSwitch, (from, to, states) ->
  8. print from, to, states

State事件简写

  1. # For Events.StateWillSwitch
  2. layerA.onStateWillSwitch ->
  3. print "Will switch state"
  4. # For Events.StateDidSwitch
  5. layerA.onStateDidSwitch ->
  6. print "Did switch state"

Drag Events(拖放事件)

  • Events.Move — 图层在移动时。
  • Events.DragStart — 开始拖动图层时。
  • Events.Drag — 图层被拖动时。
  • Events.DragEnd — 结束拖动图层时。
  • Events.DragAnimationStart — 开始弹性/动量动画时。
  • Events.DragAnimationEnd — 结束弹性/动量动画时。
  • Events.DirectionLockStart — 开始锁定方向时。
  1. layerA = new Layer
  2. layerA.draggable.enabled = true
  3. # Returns the offset (x, y), layer.draggable and the layer
  4. layerA.on Events.Move, (offset, draggable, layer) ->
  5. print offset, draggable, layer
  6. layerA = new Layer
  7. layerA.draggable.enabled = true
  8. # Returns the event, layer.draggable and the layer
  9. layerA.on Events.DragStart, (event, draggable, layer) ->
  10. print event, draggable, layer

Drag事件简写

  1. # For Events.Move
  2. layerA.onMove ->
  3. print "Moving"
  4. # For Events.DragStart
  5. layerA.onDragStart ->
  6. print "Start of drag"
  7. # For Events.Drag
  8. layerA.onDrag ->
  9. print "Dragging"
  10. # For Events.DragEnd
  11. layerA.onDragEnd ->
  12. print "End of drag"
  13. # For Events.DragAnimationStart
  14. layerA.onDragAnimationStart ->
  15. print "Start of drag animation"
  16. # For Events.DragAnimationEnd
  17. layerA.onDragAnimationEnd ->
  18. print "End of drag animation"
  19. # For Events.DirectionLockStart
  20. layerA.onDirectionLockStart ->
  21. print "Start of direction lock"

Scroll Events(滚动事件)

  • Events.Move — 图层在移动时。
  • Events.ScrollStart — 开始滚动时。
  • Events.Scroll — 图层滚动时。
  • Events.ScrollEnd — 图层结束滚动时。
  • Events.ScrollAnimationDidStart — 弹性/动量动画开始时。
  • Events.ScrollAnimationDidEnd — 弹性/动量动画结束时。
  1. scroll = new ScrollComponent
  2. layerA = new Layer
  3. parent: scroll.content
  4. # Returns the event, layer.draggable and the layer
  5. scroll.on Events.ScrollStart, (event, draggable, layer) ->
  6. print event, draggable, layer

Scroll事件简写

  1. # For Events.Move
  2. scroll.onMove ->
  3. print "Moving"
  4. # For Events.ScrollStart
  5. scroll.onScrollStart ->
  6. print "Start of scroll"
  7. # For Events.Scroll
  8. scroll.onScroll ->
  9. print "Scrolling"
  10. # For Events.ScrollEnd
  11. scroll.onScrollEnd ->
  12. print "End of scroll"
  13. # For Events.ScrollAnimationDidStart
  14. scroll.onScrollAnimationDidStart ->
  15. print "Start of scroll animation"
  16. # For Events.ScrollAnimationDidEnd
  17. scroll.onScrollAnimationDidEnd ->
  18. print "End of scroll animation"

EdgeSwipe Events(边缘扫滑事件)

边缘扫滑事件接受手势事件属性

EdgeSwipe events receive the gesture event properties.

Basic

  • Events.EdgeSwipe — 从屏幕的某一个边缘扫滑时。
  • Events.EdgeSwipeStart — 开始边缘扫滑时。
  • Events.EdgeSwipeEnd — 结束边缘扫滑时。
  1. # Swipe from any edge of the screen
  2. Screen.on Events.EdgeSwipe, (event) ->
  3. print event.distance

EdgeSwipe事件简写

  1. # For Events.EdgeSwipe
  2. Screen.onEdgeSwipe ->
  3. print "Swiping from edge"
  4. # For Events.EdgeSwipeStart
  5. Screen.onEdgeSwipeStart ->
  6. print "Start swiping from edge"
  7. # For Events.EdgeSwipeEnd
  8. Screen.onEdgeSwipeEnd ->
  9. print "End swiping from edge"

Top

  • Events.EdgeSwipeTop — 从上边缘扫滑时。
  • Events.EdgeSwipeTopStart — 开始从上边缘扫滑时。
  • Events.EdgeSwipeTopEnd — 结束从上边缘扫滑时。
  1. # Swipe from the top edge of the screen
  2. Screen.on Events.EdgeSwipeTop, (event) ->
  3. print event.distance

EdgeSwipeTop事件简写

  1. # For Events.EdgeSwipeTop
  2. Screen.onEdgeSwipeTop ->
  3. print "Swiping from top edge"
  4. # For Events.EdgeSwipeTopStart
  5. Screen.onEdgeSwipeTopStart ->
  6. print "Start swiping from top edge"
  7. # For Events.EdgeSwipeTopEnd
  8. Screen.onEdgeSwipeTopEnd ->
  9. print "End swiping from top edge"

Right

  • Events.EdgeSwipeRight — 从右边缘扫滑时。
  • Events.EdgeSwipeRightStart — 开始从右边缘扫滑时。
  • Events.EdgeSwipeRightEnd — 结束从右边缘扫滑时。
  1. # Swipe from the right edge of the screen
  2. Screen.on Events.EdgeSwipeRight, (event) ->
  3. print event.distance

EdgeSwipeRight事件简写

  1. # For Events.EdgeSwipeRight
  2. Screen.onEdgeSwipeRight ->
  3. print "Swiping from right edge"
  4. # For Events.EdgeSwipeRightStart
  5. Screen.onEdgeSwipeRightStart ->
  6. print "Start swiping from right edge"
  7. # For Events.EdgeSwipeRightEnd
  8. Screen.onEdgeSwipeRightEnd ->
  9. print "Start swiping from right edge"

Bottom

  • Events.EdgeSwipeBottom — 从下边缘扫滑时。
  • Events.EdgeSwipeBottomStart — 开始从下边缘扫滑时。
  • Events.EdgeSwipeBottomEnd — 结束从下边缘扫滑时。
  1. # Swipe from the bottom edge of the screen
  2. Screen.on Events.EdgeSwipeBottom, (event) ->
  3. print event.distance

EdgeSwipeBottom事件简写

  1. # For Events.EdgeSwipeBottom
  2. Screen.onEdgeSwipeBottom ->
  3. print "Swiping from bottom edge"
  4. # For Events.EdgeSwipeBottomStart
  5. Screen.onEdgeSwipeBottomStart ->
  6. print "Start swiping from bottom edge"
  7. # For Events.EdgeSwipeBottomEnd
  8. Screen.onEdgeSwipeBottomEnd ->
  9. print "End swiping from bottom edge"

Left

  • Events.EdgeSwipeLeft — 从左边缘扫滑时。
  • Events.EdgeSwipeLeftStart — 开始从左边缘扫滑时。
  • Events.EdgeSwipeLeftEnd — 结束从左边缘扫滑时。
  1. # Swipe from the left edge of the screen
  2. Screen.on Events.EdgeSwipeLeft, (event) ->
  3. print event.distance

EdgeSwipeLeft事件简写

  1. # For Events.EdgeSwipeLeft
  2. Screen.onEdgeSwipeLeft ->
  3. print "Swiping from left edge"
  4. # For Events.EdgeSwipeLeftStart
  5. Screen.onEdgeSwipeLeftStart ->
  6. print "Start swiping from left edge"
  7. # For Events.EdgeSwipeLeftEnd
  8. Screen.onEdgeSwipeLeftEnd ->
  9. print "End swiping from left edge"

Transition Events (过渡事件)

  • Events.TransitionStart — 过渡开始事件.
  • Events.TransitionHalt — 过渡中断事件,当一个过渡中断时发生。
  • Events.TransitionStop — 过渡停止事件,当一个过渡完全完成时。
  • Events.TransitionEnd — 过渡结束事件,当一个过渡完全完成时。
  1. layerA = new Layer
  2. flow = new FlowComponent
  3. flow.showOverlayRight(layerA)
  4. flow.on Events.TransitionStart, ->
  5. print "Transition started"

Transition 事件简写

  1. # For Events.TransitionStart
  2. flow.onTransitionStart ->
  3. print "Transition started"
  4. # For Events.TransitionHalt
  5. flow.onTransitionHalt ->
  6. print "Transition halted"
  7. # For Events.TransitionStop
  8. flow.onTransitionStop ->
  9. print "Transition stopped"
  10. # For Events.TransitionEnd
  11. flow.onTransitionEnd ->
  12. print "Transition ended"

Value Events (值改变事件)

一般在滑块组件或者是范围组件中会用到值改变事件,而最小最大值事件一般只用于范围组件。

The Value Change events can be used for the SliderComponent or the RangeSliderComponent. The min and max-value events can only be used with Range Sliders.

  • Events.SliderValueChange — 滑块的值被改变时。
  • Events.SliderMinValueChange — 最小值被改变时(只用于范围组件)。
  • Events.SliderMaxValueChange — 最大值被改变时(只用于范围组件)。
  1. slider = new SliderComponent
  2. x: Align.center
  3. y: Align.center
  4. slider.on Events.SliderValueChange, ->
  5. print slider.value

Slider 事件简写

  1. # For Events.SliderValueChange
  2. slider.onValueChange ->
  3. print slider.value
  4. # For Events.SliderMinValueChange
  5. range.onMinValueChange ->
  6. print range.minValue
  7. # For Events.SliderMaxValueChange
  8. range.onMaxValueChange ->
  9. print range.maxValue

Change Events(属性改变事件)

change事件允许你监听一些属性在何时被改变,下面是所有你可以监听的属性值。

The “change” event allows you to listen to properties as they’re changing. Below is a full overview of properties you can listen for:

  • “change:x” — x坐标改变。
  • “change:y” — y坐标改变。
  • “change:point” — 新的x、y坐标。
  • “change:width” — 宽度变化。
  • “change:height” — 高度变化。
  • “change:size” — 尺寸变化。
  • “change:frame” — 位置或尺寸变化。
  • “change:scale” — 图层被缩放。
  • “change:rotation” — 图层被旋转。
  • “change:borderRadius” — 圆角半径变化。
  • “change:currentPage” — 当前页变化。
  • “change:style” — 新的样式声明。
  • “change:html” — 新的HTML声明。
  • “change:children” — 添加或者移除子图层。
  • “change:parent” — 添加或者移除父图层。

举个例子,你可以在图层执行动画时获取它的x值变化。注意这里获取的是它真实可能包含小数的像素值。

For example, you can get the x position of a layer while it’s animating. Note that it’ll return the exact, sub-pixel values.

  1. layerA = new Layer
  2. layerA.animate
  3. properties:
  4. x: 100
  5. layerA.on "change:x", ->
  6. print layerA.x

使用change事件,你可以结合modulate很容易地通过一个图层的属性变化来控制另一个图层。在下面的例子中,我们旋转一个图层时,另一个图层会对应水平移动。

The “change” events can be used to link property changes to one another, with modulate. In the example below, we’ll rotate the layer. The returned values are used to move the second layer horizontally.

  1. layerA = new Layer
  2. layerB = new Layer
  3. x: 100
  4. # We rotate layerA from 0 to 180 degrees.
  5. layerA.animate
  6. properties:
  7. rotation: 180
  8. # When the rotation value from layerA changes
  9. layerA.on "change:rotation", ->
  10. # Use the values to move layerB from 100 to 300
  11. x = Utils.modulate(layerA.rotation, [0, 180], [100, 300], true)
  12. layerB.x = x

Gesture Event Properties(手势事件属性)

每一个手势事件都会接收包含以下属性的一个对象。touchCentertouchDistancetouchOffsetscalerotation这几个属性只在多点触控的情况下才有。

Every gesture receives an event object with the following set of properties. The touchCenter, touchDistance, touchOffset, scale and rotation properties only return values when using multi-touch Events.

Positioning(位置)

  • event.point — 当前鼠标或手指坐标值。
  • event.start — 初始时鼠标或手指坐标值。
  • event.previous — 前一次触发该事件时鼠标或手指坐标值。
  1. layerA = new Layer
  2. layerA.pinchable.enabled = true
  3. layerA.on Events.Pinch, (event) ->
  4. print event.point

Offset(偏移)

  • event.offset — 当前xy的偏移量。
  • event.offsetTime — 从开始到当前偏移的时间。
  • event.offsetAngle — 从开始到当前偏移的角度。
  • event.offsetDirection — 从开始到当前偏移的方向。
  1. layerA = new Layer
  2. layerA.on Events.Pan, (event) ->
  3. print event.offset

Deltas(增量)

  • event.delta — 距离上次事件xy的偏移量。
  • event.deltaTime — 距离上次事件偏移的时间。
  • event.deltaAngle — 距离上次事件偏移的角度。
  • event.deltaDirection — 距离上次事件偏移的方向。
  1. layerA = new Layer
  2. layerA.on Events.Swipe, (event) ->
  3. print event.delta

Velocity & Force(速度和力量)

  • event.velocity — 在xy方向上的速度。
  • event.force — 按压力度。
  1. layerA = new Layer
  2. layerA.on Events.Swipe, (event) ->
  3. print event.velocity

Input(输入)

  • event.fingers — 触控点数量。
  • event.touchCenter — 触控的两指中心点坐标。
  • event.touchDistance — 触控的两指距离。
  • event.touchOffset — 触控的两指在xy方向上的偏移。
  1. layerA = new Layer
  2. layerA.on Events.Rotate, (event) ->
  3. print event.fingers

Scale & Rotation(缩放和旋转)

  • event.scale — 两只缩放比例。
  • event.scaleDirection — 当前缩放方向(updown)。
  • event.rotation — 两指旋转角度。
  1. layerA = new Layer
  2. layerA.pinchable.enabled = true
  3. layerA.on Events.Pinch, (event) ->
  4. print event.scaleDirection

Events.touchEvent(event)

从手机事件中提取出触摸事件。

Extract the touch event from a given event on mobile.

  1. layerA = new Layer
  2. layerA.on Events.Click, (event, layer) ->
  3. myTouchEvent = Events.touchEvent(event)

Events.wrap(event)

将一个DOM包裹,用以跟踪在它身上发生的事件并在需要时销毁它们。如果你想给一个元素绑定事件,你可以这样写:

Wrap a given DOM Element so we can keep track of the events and destroy them when needed. If you want to bind events to arbitrary dom element you should use this.

  1. Events.wrap(window).addEventListener "resize", (event) ->
  2. print "Page is resizing"