By ‘panning’ is meant: moving the finger or mouse while pressing down. It’s like dragging, except that the layer isn’t necessarily following the movement.
This means that for an
onPanStart (and any other panning events that can follow) to be triggered, the user has to press down… and move at least one point.
In the example project, you’ll see that this is true: nothing happens when you press down, only when you start moving the cursor.
|Panning started, the user’s finger has moved while pressing down on the layer.|
|The cursor has moved position.|
|End of the panning (triggers together with |
By the way, if you want the layer to follow the movement of the cursor you can, of course, enable dragging. Draggable layers have their own set of events.
Pan events example
In this example:
onPanStartshrinks the layer + removes the shadow
onPanchanges hue or lightness, depending on the pan direction
onPanEndscales the layer back up + adds the shadow
# Start of pan movement square.onPanStart -> this.animate scale: 0.94 shadowColor: null
# While panning square.onPan -> # Get panning direction (up, down, left, right) # Change hue or saturation of backgroundColor
# Animate back on PanEnd square.onPanEnd -> this.animate scale: 1 shadowColor: "rgba(153,153,153,1)"