Plugin.Flick Class
A plugin class which can be used to animate the motion of a node, in response to a flick gesture.
Item Index
Methods
Properties
- CLASS_NAMES static
- EASING static
- NAME static
- NS static
- SNAP_DURATION static
- SNAP_EASING static
- VELOCITY_THRESHOLD static
Methods
_anim
-
x -
y -
duration -
easing
Internal utility method to perform the transition step
_bounce
-
x -
max
Internal utility method to constrain the offset value based on the bounce criteria.
_flickFrame
()
protected
Executes a single frame in the flick animation
_killTimer
()
private
Stop the animation timer
_move
-
x -
y -
duration -
easing
Internal utility method to move the node to a given XY position, using transitions, if specified.
_onFlick
-
e
The flick event listener. Kicks off the flick animation.
Parameters:
-
eEventFacadeThe 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.
initializer
-
config
The initializer lifecycle implementation.
Parameters:
-
configObjectThe user configuration for the plugin
setBounds
()
Sets the min/max boundaries for the flick animation, based on the boundingBox dimensions.
Properties
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_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
Fires event bounceChange
Fires when the value for the configuration attribute bounce is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
bounceDistance
Number
The bounce distance in pixels
Default: 150
Fires event bounceDistanceChange
Fires when the value for the configuration attribute bounceDistance is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
boundingBox
Node
The constraining box relative to which the flick animation and bounds should be calculated.
Default: parentNode
Fires event boundingBoxChange
Fires when the value for the configuration attribute boundingBox is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
deceleration
Drag coefficent for inertial scrolling. The closer to 1 this value is, the less friction during scrolling.
Default: 0.98
Fires event decelerationChange
Fires when the value for the configuration attribute deceleration is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
duration
Number
The custom duration to apply to the flick animation. By default, the animation duration is controlled by the deceleration factor.
Default: null
Fires event durationChange
Fires when the value for the configuration attribute duration is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
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
Fires event easingChange
Fires when the value for the configuration attribute easing is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
minVelocity
Number
The minimum flick gesture velocity (px/ms) at which to trigger the flick response
Default: 0
Fires event minVelocityChange
Fires when the value for the configuration attribute minVelocity is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
minVelocity
Number
The minimum flick gesture distance (px) for which to trigger the flick response
Default: 10
Fires event minVelocityChange
Fires when the value for the configuration attribute minVelocity is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added:
step
Number
Time between flick animation frames.
Default: 10
Fires event stepChange
Fires when the value for the configuration attribute step is
changed. You can listen for the event using the on method if you
wish to be notified before the attribute's value has changed, or
using the after method if you wish to be notified after the
attribute's value has changed.
Parameters:
-
eEventFacadeAn Event Facade object with the following attribute-specific properties added: