NodeFire Library

animation  1.0.6

NodeFire Library > animation > NF.anim.clip
Search:
 
Filters

Class NF.anim.clip

A clip renders styleAnim objects on a single document node when playing a timeline. Multiple clips on seperate tracks can utilize the same or unique styleAnim objects to simultaneously render effects on multiple Nodes.


Clips with hooks that match its timeline hook are rendered by the menu widget when the timeline is applied to widget Nodes through the NF.replicator or NF.anim.transition classes.

Constructor

NF.anim.clip ( styleAnim , config )
Parameters:
styleAnim <Object Literal | Anim Object | Anim Object Array> Object literal with NF.anim.styleAnim configuration properties. - or - A single styleAnim object or an array of styleAnim objects.
config <Object> Object literal containing the configuration properties for the clip...
  • {frames:int} - The number of frames for the clip.
  • {node:Node} - The Node to play the clip on. If using a hook the Node will be dynamically set by the widget based on the clips hook property.
  • {hook:string} - The optional hook property is used to connect the clips styleAnim objects with a widget event. See below for more details. Options for the menu widget include... ("NFplayOnSubShow", "NFplayOnSubHide", "NFplayOnLinkActiveShow", "NFplayOnLinkActiveHide", "NFplayOnLinkHoverShow", "NFplayOnLinkHoverHide", "NFplayOnLinkFocusShow", "NFplayOnLinkFocusHide")
  • {targetClass:string} - Searches the clip Nodes descendants for a Node with a matching class name. styleAnim objects belonging to the clip will render effects on the matching Node when playing. This property works with Nodes set dynamically by a widget through a hook or a Node specified with the Node property.
  • {reset:boolean} - After playing the clip, inline style animations applied by the styleAnim objects are reset to the original values.
  • {startStyles:Object} - Object literal of script style name properties and value pairs to be applied at the beginning of the clip. e.g. {visibility:visible, backgroundColor:#f00} Use script style names, not CSS names (valid: backgroundColor - invalid: background-color)
  • {endStyles:Object} - Object literal of script style name properties and value pairs to be applied at the end of the clip. e.g. {visibility:hidden, backgroundColor:#fff} Use script style names, not CSS names (valid: backgroundColor - invalid: background-color)
  • {frameAnchorPos:int} - Anchors the clip to a specific frame position within its track. By default the clip is added to the beginning of the track or after any existing clips that the track contains.
  • {ease:string} - Determines the animation easing effect (decelerates or acelerates), options include... 'quad-in, quad-out, cubic-in, cubic-out, quart-in, quart-out, quint-in, quint-out.
  • {gpuBoost:boolean} - Applies hardware aceleration to the animation effects using transform:translateZ(0), improves animation performance in some browsers.
  • {applytype:string} - 'stylesheet' or 'inline' - determines how each animation frames styles are applied. 'Inline' is quicker, however 'stylesheet' may be desirable in certain situations where initial settings across multiple clips must be preserved.

The hook property is optional and allows the clip to be dynamically applied to widget nodes during certain events. The widget processes the animations through the transition and playerSynchronizer classes. This produces smooth and sequenced animations by using a single delay timer for multiple timelines and players.

The menu widget manages multiple animations running concurrently and auomatically changes play direction when other events are triggered. The following hook values may be used with a clip...
  • {"NFplayOnSubShow"} - Plays on the sub Node ('nfSubC') when made visible.
  • {"NFplayOnSubHide"} - Plays on the sub Node ('nfSubC') before hiding.
  • {"NFplayOnLinkActiveShow"} - Plays on a link Node ('nfLink') when it's associated child sub is made visible.
  • {"NFplayOnLinkActiveHide"} - Plays on a link Node ('nfLink') before it's associated child sub is hidden.
  • {"NFplayOnLinkHoverShow"} - Plays on a link Node ('nfLink') when hovered over with the mouse.
  • {"NFplayOnLinkHoverHide"} - Plays on a link Node ('nfLink') when the mouse leaves the Node.
  • {"NFplayOnLinkFocusShow"} - Plays on a link Node ('nfLink') when receiving focus through a click or keyboard event.
  • {"NFplayOnLinkFocusHide"} - Plays on a link Node ('nfLink') when focus is lost through a click or keyboard event..

Methods

applyNode

void applyNode ( Node )
A Node to animate when playing the clip. If the targetClass property was set in the constructors config object, the Nodes descendants will be searched. The first node with a class name attribute matching the targetClass value will be used instead.
Parameters:
Node <Node>
Returns: void

getAnimations

Object Array getAnimations ( Node )
Gets an Array of NF.anim.styleAnim objects applied to the clip.
Parameters:
Node <Node>
Returns: Object Array
An array of NF.anim.styleAnim objects.

renderFrame

void renderFrame ( frameNumber )
Renders a specific clip frame. must be greater than 0 and cannot exceed the number of frames specified for the clip. This function is primarily used by the NF.anim.player class to sequentially render clips, however it be called directly to render a specifc frame.
Parameters:
frameNumber <int> The frame to render.
Returns: void

Events

endStylesApplied

endStylesApplied ( event )
Fires on a clip if endStyle properties are defined and applied. Occurs when the the last frame of the clip plays.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The clip object which dispatched the event.
  • {styles:object} Object literal containing style name properties and values applied to the Node.
  • {node:Node} The Node to which the styles were applied.

frameRendered

frameRendered ( event )
Fires on a clip when a frame is rendered.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The clip object which dispatched the event.
  • {frame:int} The frame number rendered
  • {frames:Node} The total number of frames in the clip.

startStylesApplied

startStylesApplied ( event )
Fires on a clip if startStyle properties are defined and applied. Occurs when the 1st frame of the clip plays.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The clip object which dispatched the event.
  • {styles:object} Object literal containing style name properties and values applied to the Node.
  • {node:Node} The Node to which the styles were applied.

styleAnimReset

styleAnimReset ( event )
Fires on a clip when the clips styleAnimation objects style properties are reset after playing.
Parameters:
event <object> Object literal containing the following properties...
  • {type:string} The type of event.
  • {target:object} The clip object which dispatched the event.
Copyright © 2012 OpenCube: Inc. All rights reserved.