Plugin.Flick Class
+ + + + +A plugin class which can be used to animate the motion of a node, in response to a flick gesture.
+-
+
- Index + + +
- Methods + + +
- Properties + + +
- Attributes + + +
Item Index
+ + +Methods
+ +-
+
+
- + _anim + + + + + +
- + _bounce + + + + + +
- + _flickFrame + + + + + +
- + _killTimer + + + + + +
- + _move + + + + + +
- + _onFlick + + + + + +
- + _renderClasses + + + + + +
- + _setX + + + + + +
- + _setY + + + + + +
- + initializer + + + + + +
- + setBounds + + + + + +
Properties
+ +-
+
+
- + CLASS_NAMES + + + static + + + + +
- + EASING + + + static + + + + +
- + NAME + + + static + + + + +
- + NS + + + static + + + + +
- + SNAP_DURATION + + + static + + + + +
- + SNAP_EASING + + + static + + + + +
- + VELOCITY_THRESHOLD + + + static + + + + +
Attributes
+ +-
+
+
- + bounce + + +
- + bounceDistance + + +
- + boundingBox + + +
- + deceleration + + +
- + duration + + +
- + easing + + +
- + minVelocity + + +
- + minVelocity + + +
- + step + + +
Methods
+ + +_anim
+
+
+ -
+
+
-
+
+
x+ +
+
+ -
+
+
y+ +
+
+ -
+
+
duration+ +
+
+ -
+
+
easing+ +
+
+
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+ +
+
+
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.
+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+ +
+
+
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+ +
+
+
Internal utility method to set the X offset position
+Parameters:
+ +-
+
+
-
+
+
val+ Number + + + + ++ ++ + +
+
+
_setY
+
+
+ -
+
+
-
+
+
val+ +
+
+
Internal utility method to set the Y offset position
+Parameters:
+ +-
+
+
-
+
+
val+ Number + + + + ++ ++ + +
+
+
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
+ + + +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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+
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:
+ +-
+
-
+
e+ EventFacade + ++ An Event Facade object with the following + attribute-specific properties added: ++ +-
+
-
+
prevVal+ Any +The value of the attribute, prior to it being set.+
+ -
+
newVal+ Any +The value the attribute is to be set to.+
+ -
+
attrName+ String +The name of the attribute being set.+
+ -
+
subAttrName+ String +If setting a property within the attribute's value, the name of the sub-attribute property being set.+
+
+ -
+