Show:

A plugin class which can be used to animate the motion of a node, in response to a flick gesture.

Methods

_anim

(
  • x
  • y
  • duration
  • easing
)
private

Internal utility method to perform the transition step

Parameters:

  • x Number

    The X offset position

  • y Number

    The Y offset position

  • duration Number

    The duration to use for the transition animation

  • easing String

    The easing to use for the transition animation.

_bounce

(
  • x
  • max
)
private

Internal utility method to constrain the offset value based on the bounce criteria.

Parameters:

  • x Number

    The offset value to constrain.

  • max Number

    The max offset value.

_flickFrame

() protected

Executes a single frame in the flick animation

_killTimer

() private

Stop the animation timer

_move

(
  • x
  • y
  • duration
  • easing
)
private

Internal utility method to move the node to a given XY position, using transitions, if specified.

Parameters:

  • x Number

    The X offset position

  • y Number

    The Y offset position

  • duration Number

    The duration to use for the transition animation

  • easing String

    The easing to use for the transition animation.

_onFlick

(
  • e
)
protected

The flick event listener. Kicks off the flick animation.

Parameters:

  • e EventFacade

    The flick event facade, containing e.flick.distance, e.flick.velocity etc.

_renderClasses

() protected

Adds the CSS classes, necessary to set up overflow/position properties on the node and boundingBox.

_setX

(
  • val
)
private

Internal utility method to set the X offset position

Parameters:

_setY

(
  • val
)
private

Internal utility method to set the Y offset position

Parameters:

initializer

(
  • config
)

The initializer lifecycle implementation.

Parameters:

  • config Object

    The user configuration for the plugin

setBounds

()

Sets the min/max boundaries for the flick animation, based on the boundingBox dimensions.

Properties

CLASS_NAMES

Object static

The default CSS class names used by the plugin

EASING

String static

The default easing to use for the main flick movement transition

Default: 'cubic-bezier(0, 0.1, 0, 1.0)'

NAME

String static

The NAME of the Flick class. Used to prefix events generated by the plugin.

Default: "pluginFlick"

NS

String static

The namespace for the plugin. This will be the property on the node, which will reference the plugin instance, when it's plugged in.

Default: "flick"

SNAP_DURATION

Number static

The duration to use for the bounce snap-back transition

Default: 400

SNAP_EASING

String static

The default easing to use for the bounce snap-back transition

Default: 'ease-out'

VELOCITY_THRESHOLD

Number static

The threshold used to determine when the decelerated velocity of the node is practically 0.

Default: 0.015

Attributes

bounce

Number

Drag coefficient for intertial scrolling at the upper and lower boundaries of the scrollview. Set to 0 to disable "rubber-banding".

Default: 0.7

bounceDistance

Number

The bounce distance in pixels

Default: 150

boundingBox

Node

The constraining box relative to which the flick animation and bounds should be calculated.

Default: parentNode

deceleration

Drag coefficent for inertial scrolling. The closer to 1 this value is, the less friction during scrolling.

Default: 0.98

duration

Number

The custom duration to apply to the flick animation. By default, the animation duration is controlled by the deceleration factor.

Default: null

easing

String

The custom transition easing to use for the flick animation. If not provided defaults to internally to Flick.EASING, or Flick.SNAP_EASING based on whether or not we're animating the flick or bounce step.

Default: null

minVelocity

Number

The minimum flick gesture velocity (px/ms) at which to trigger the flick response

Default: 0

minVelocity

Number

The minimum flick gesture distance (px) for which to trigger the flick response

Default: 10

step

Number

Time between flick animation frames.

Default: 10