Tap events

In this section:

• Tap and Double tap
• Force tap
• Long press
• Example with all tap events
• Overview of the tap events

Tap and Double tap

Note that onTap triggers at the end of a tap. But there’s onTapStart for when you need to track the beginning of a tap gesture.

An onDoubleTap is triggered when there are two separate taps on the layer within 0.25 seconds.

Tap example

These events are used in the example below:

• onTapStart shrinks the layer and removes the shadow
• onTap changes the color
• onTapEnd scales the layer back up and adds the shadow

layerA.onTapStart ->
    this.scale = 0.94
    this.shadowColor = null
layerA.onTap ->
    this.backgroundColor = colorcycler()
layerA.onTapEnd ->
    this.scale = 1
    this.shadowColor = "rgba(153,153,153,1)"

You’ll notice that onTap and onTapEnd are triggered together.

Tap example

Double tap example

In this example:

• onTap changes the color
• onDoubleTap grows or shrinks the layer

layerA.onTap ->
    this.backgroundColor = colorcycler()
layerA.onDoubleTap ->
    if this.scale is 1
        this.animate
            scale: .72
    else
        this.animate
            scale: 1

So a double tap also makes the layer change color twice.

Double tap example

Force tap

Force tap events only work on devices with pressure sensitivity. That’s why you’ll need an iPhone 6s or newer (with 3D Touch) to use these events on a mobile device.

On the desktop they can be triggered as well: trackpads of recent MacBooks (Pro) have Force Touch sensitivity, as does the Magic Trackpad 2.

• On an iPhone onForceTapStart and onForceTap trigger when the pressure is at 70% of the maximum detectable force.
• On a MacBook (or Magic Trackpad 2) this happens when you Force Click (there’s haptic and audible feedback).

Force tap example

• onForceTapChange changes the size of the transparent circle and shows event.force as a percentage
• onForceTap makes the center circle green
• onForceTapEnd makes the circle blue again

layerA.onForceTapChange ->
    # Grows the circle
    # Shows ‘event.force’ as a percentage
layerA.onForceTap ->
    # is called when event.force is at 0.7
    this.backgroundColor = forceTapColor    # green
layerA.onForceTapEnd ->
    # is called when event.force drops below 0.7
    this.backgroundColor = defaultColor # blue

onForceTapStart is not used in this example because it triggers together with onForceTap anyway.

Force tap example on a MacBook Pro

Force tap example on an iPhone

Long press

A long press is triggered when you press down longer than half a second. Like you would do, for instance, to get the app icons to jiggle on an iPhone or iPad.

Long press example

In this example:

• onLongPressStart shrinks the layer + removes the shadow
• onLongPress changes the color of the layer
• onLongPressEnd grows the layer + adds the shadow

layerA.onLongPressStart ->
    # called after pressing down half a second
    this.scale = 0.94
    this.shadowColor = null
layerA.onLongPress ->
    this.backgroundColor = colorcycler()
layerA.onLongPressEnd ->
    # called upon release of a long press
    this.scale = 1
    this.shadowColor = "rgba(153,153,153,1)"

Notice that onLongPressStart and onLongPress are triggered together.

Long press example

Example with all tap events

In this example:

• onTap changes the color of the layer
• onDoubleTap changes the scale
• onLongPress rotates the layer
• onForceTapChange darkens the layer when the ‘force’ is more than 0.7

layerA.onTap ->
    this.backgroundColor = colorcycler()
layerA.onDoubleTap ->
    # Grow or shrink the layer
layerA.onLongPress ->
    this.animate
        rotation: this.rotation + 45
layerA.onForceTapChange ->
    # Darker color when ‘event.force‘ is over 0.7

Example with all tap events combined

Overview of the tap events