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
- _anim
- _bounce
- _flickFrame
- _killTimer
- _move
- _onFlick
- _renderClasses
- _round
- _setX
- _setY
- angle2rad
- compareTransformSequence
- decompose
- deg2rad
- getDeterminant
- getMinors
- getnxn
- getTransformArray
- getTransformFunctionArray
- initializer
- inverse
- rad2deg
- scalarMultiply
- setBounds
- sign
- transpose
- vectorMatrixProduct
Properties
- _rounder
- CLASS_NAMES static
- EASING static
- NAME static
- NS static
- SNAP_DURATION static
- SNAP_EASING static
- transformMethods
- 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.
_round
()
private
Rounds values
angle2rad
-
val
Converts an angle to a radian
Parameters:
-
valObjecxtValue to be converted to radian.
Returns:
compareTransformSequence
-
list1 -
list2
Compares to arrays or transform functions to ensure both contain the same functions in the same order.
Returns:
decompose
-
3x3
Breaks up a 2d transform matrix into a series of transform operations.
Parameters:
-
3x3Arraymatrix array
Returns:
deg2rad
-
deg
Converts a degree value to a radian.
Parameters:
-
degNumberDegree value to be converted to radian.
Returns:
getDeterminant
-
matrix
Returns the determinant of a given matrix.
/ \ | matrix[0][0] matrix[1][0] matrix[2][0] | | matrix[0][1] matrix[1][1] matrix[2][1] | | matrix[0][2] matrix[1][2] matrix[2][2] | | matrix[0][3] matrix[1][3] matrix[2][3] | \ /
Parameters:
-
matrixArrayAn nxn matrix represented an array of vector (column) arrays. Each vector array has index for each row.
Returns:
getMinors
-
matrix -
columnIndex -
rowIndex
Returns a matrix of minors based on a matrix, column index and row index.
Parameters:
Returns:
getnxn
()
Converts a transform object to an array of column vectors.
/ \ | matrix[0][0] matrix[1][0] matrix[2][0] | | matrix[0][1] matrix[1][1] matrix[2][1] | | matrix[0][2] matrix[1][2] matrix[2][2] | \ /
Returns:
getTransformArray
-
val
Parses a transform string and returns an array of transform arrays.
Parameters:
-
valStringA transform string
Returns:
getTransformFunctionArray
()
Returns an array of transform arrays representing transform functions and arguments.
Returns:
initializer
-
config
The initializer lifecycle implementation.
Parameters:
-
configObjectThe user configuration for the plugin
inverse
-
Array
Returns the inverse of a matrix
Parameters:
-
ArrayObjectmatrix An array representing an nxn matrix
Returns:
rad2deg
-
rad
Converts a radian value to a degree.
Parameters:
-
radNumberRadian value to be converted.
Returns:
scalarMultiply
-
matrix -
multiplier
Multiplies a matrix by a numeric value.
Parameters:
Returns:
setBounds
()
Sets the min/max boundaries for the flick animation, based on the boundingBox dimensions.
sign
-
val
Returns the sign of value
Parameters:
-
valNumbervalue to be interpreted
Returns:
transpose
-
matrix
Returns the transpose for an nxn matrix.
Parameters:
-
matrixObjectAn nxn matrix represented by an array of vector arrays.
Returns:
Properties
_rounder
Unknown
private
Used as value for the _rounding method.
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:
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: