Tilt

This API enables the user to register tilt events.

Tilt events can be defined as horizontal (left/right) tilts or vertical (forward/backward) tilts. To trigger a tilt event, a user can move the mobile device in a flicking motion or rotate the device in the designated direction - horizontal or vertical.

Horizontal tilts are registered when the device is rotated about its vertical axis or rotated about the gravitational axis. The direction of a horizontal tilt is reported as left or right when a horizontal tilt is triggered. This mode relies on RelativeHeading.

Vertical tilts are registered when the device is pitched up or down. The direction of a vertical tilt is reported as up or down when the event is triggered. This mode relies on RelativePitch.

When motion events are not available on the device, Tilt events are polyfilled with swipe touch events.

Example

var tilt = new MotionStack.Tilt({orientation: "horizontal"});

tilt.start(function (e) {
  console.log(e.direction);

  if(e.direction === tilt.DIRECTION_LEFT) {
    tilt.stop();
  }
});

Constructor

new MotionStack.Tilt([options])

Create a new Tilt instance object.

Argument Type Description
options Object Options to pass in for the new ShakeProgress instance (optional)

  • orientation {String}
  • Designates which tilt directions are registered.

    • "vertical"
    • Registers up and down (forward and backward) tilts. These tilts are triggered by flicking or pitching the device up, down, forward, or backward. Refer to the gestures page for more details.
    • "horizontal"
    • Registers left and right tilts. These tilts are triggered by flicking or rotating the device to the left or right. Refer to the gestures page for more details.


    Default: "vertical"

  • invertVerticalSwipe {Boolean}
  • Inverts the vertical direction for source: "touch" events.


    Default: false

  • invertHorizontalSwipe {Boolean}
  • Inverts the horizontal direction for source: "touch" events.


    Default: false

  • fireOnAnimationFrame {Boolean}
  • Only emit the latest event within requestAnimationFrame intervals.


    Default: false

  • source {String}
  • The source used to calculate the reported data in order of approximation. If the specified source is not available, then the next available source is used.

    • "orientation" orientation estimate.
    • "touch" touch sensor.


    Default: "orientation"

var tilt = new MotionStack.Tilt({orientation: "vertical"});

Instance Methods

start(callback, [context])

Start receiving tilt updates.

Argument Type Description
callback Function Callback function that receives an object as an argument.

  • function(e)
  • e.direction {Number}
    The direction of the registered tilt is either:

    • "vertical"
    • Equal to tilt.DIRECTION_UP = 1
    • Equal to tilt.DIRECTION_DOWN = 2
    • "horizontal"
    • Equal to tilt.DIRECTION_LEFT = 3
    • Equal to tilt.DIRECTION_RIGHT = 4
  • e.timeStamp {Number}
    The time in milliseconds when the data is collected.
  • e.source {String}
    The source used to calculate the reported data.

    • "orientation" orientation estimate.
    • "touch" touch sensor.

context Object Context in which to invoke the callback (optional).
tilt.start(function(e) {
  if (e.direction === tilt.DIRECTION_UP) {
    console.log("up");
  } else if (e.direction === tilt.DIRECTION_DOWN) {
    console.log("down");
  } else if (e.direction === tilt.DIRECTION_LEFT) {
    console.log("left");
  } else {
    console.log("right");
  }
});

stop()

Stop tilt updates.

tilt.stop();

Source

src/interfaces/Tilt.js