js/spriter.coffee
h = require './h' Tween = require './tween/tween' Timeline = require './tween/timeline'

class Spriter

Spriter

Class for toggling opacity on bunch of elements

TODO: - add isForce3d option

  • add run new option merging
  • add then chains
class Spriter

Defaults/APIs


_defaults:

Propery duration of type Number

Duration

duration: 500

Propery delay of type Number

Delay

delay: 0

Propery easing of type String, Function

Easing. Please see the timeline module parseEasing function for all avaliable options.

easing: 'linear.none'

Propery repeat of type Number

Repeat times count

repeat: 0

Propery yoyo of type Boolean

Yoyo option defines if animation should be altered on repeat.

yoyo: false

Propery isRunLess of type Boolean

isRunLess option prevents animation from running immediately after initialization.

isRunLess: false

Propery isShowEnd of type Boolean

isShowEnd option defines if the last frame should be shown when animation completed.

isShowEnd: false

Propery onStart of type Function

onStart callback will be called once on animation start.

onStart: null

Propery onUpdate of type Function

onUpdate callback will be called on every frame of the animation. The current progress in range [0,1] will be passed to the callback.

onUpdate: null

Propery onComplete of type Function

onComplete callback will be called once on animation complete.

onComplete: null constructor:(@o={})-> return h.error('No "el" option specified, aborting') if !@o.el? @_vars(); @_extendDefaults(); @_parseFrames() if @_frames.length <= 2 h.warn("Spriter: only #{@_frames.length} frames found") if @_frames.length < 1 h.error("Spriter: there is no frames to animate, aborting") @_createTween() @ _vars:-> @_props = h.cloneObj(@o) @el = @o.el @_frames = []

Method run

Method to run the spriter on demand

TODO: Implement new object merging

Parameters:

  • New must be an Object.
    (options)
run:(o)-> @_timeline.start()

Method _extendDefaults

Method to extend _props by options(this.o)

_extendDefaults:-> h.extend(@_props, @_defaults)

Method _extendDefaults

Method to parse frames as child nodes of el

_parseFrames:-> @_frames = Array::slice.call @el.children, 0 for frame, i in @_frames frame.style.opacity = 0 @_frameStep = 1/@_frames.length

Method _createTween

Method to create tween and timeline and supply callbacks

_createTween:-> @_tween = new Tween duration: @_props.duration delay: @_props.delay yoyo: @_props.yoyo repeat: @_props.repeat easing: @_props.easing onStart: => @_props.onStart?() onComplete: => @_props.onComplete?() onUpdate: (p)=> @_setProgress(p) @_timeline = new Timeline; @_timeline.add(@_tween) !@_props.isRunLess and @_startTween()

Method _startTween

Method to start tween

_startTween:-> setTimeout (=> @_timeline.start()), 1

Method _setProgress

Method to set progress of the sprite

Parameters:

  • Progress must be a Number.
    (in range [0,1])
_setProgress:(p)->

get the frame number

proc = Math.floor (p / @_frameStep)

react only if frame changes

if @_prevFrame isnt @_frames[proc]

if previous frame isnt current one, hide it

@_prevFrame?.style.opacity = 0

if end of animation and isShowEnd flag was specified then show the last frame else show current frame

currentNum = if p is 1 and @_props.isShowEnd then proc-1 else proc

show the current frame

@_frames[currentNum]?.style.opacity = 1

set previous frame as current

@_prevFrame = @_frames[proc] @_props.onUpdate? p module.exports = Spriter