act

<!DOCTYPE html><html lang="en"><head><title>act</title></head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"><meta name="groc-relative-root" content=""><meta name="groc-document-path" content="act"><meta name="groc-project-path" content="src/act.coffee"><link rel="stylesheet" type="text/css" media="all" href="assets/style.css"><script type="text/javascript" src="assets/behavior.js"></script><body><div id="meta"><div class="file-path">src/act.coffee</div></div><div id="document"><div class="segment"></div><div class="segment"><div class="comments"><div class="wrapper"><h1 id="act">act</h1> Transaction based animation for dom and canvas <h3 id="usage">Usage</h3> <h4 id="act">act</h4></div></div><div class="code"><div class="wrapper">_ = require 'underscore'</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actfunction">act.function</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">actGenerator = -></div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actfunction">act.function</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act = (obj, dest, options = {}) -> scheduler = act._scheduler if obj instanceof Implicit obj = obj._obj if options.animator task = new Task obj, dest, options scheduler.addTask task else for k of dest task = new Task obj, (_.pick dest, k), options scheduler.addTask task</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="acteaselinear-etc">act.EaseLinear, etc.</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> for k, v of Ease act[k] = v</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="acton-actoff-acttrigger">act.on, act.off, act.trigger</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> _extendEventFunctions act</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actclone">act.clone</h2> Create a seperate act function with seperate scheduler, rate, etc This does not clone tasks.</div></div><div class="code"><div class="wrapper"> act.clone = actGenerator</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actrate">act.rate</h2> Rate allows speeding up and slowing down time. <pre><code>rate = 2 Twice as fast rate = 0.5 Half as fast </code></pre></div></div><div class="code"><div class="wrapper"> act.rate = 1</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="acttickinterval">act.tickInterval</h2> Interval in seconds between update ticks (default: 1/60, 60 Hz)</div></div><div class="code"><div class="wrapper"> act.tickInterval = 1/60</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="act-transactionbuilders">act._transactionBuilders</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act._transactionBuilders = []</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actplay">act.play</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act.play = -> if not act._playState</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Store reference to state to indentity specific start has been stopped</div></div><div class="code"><div class="wrapper"> act._playState = state = lastTick: _getTime() ticker = -> if act._playState == state _setTimeout act.tickInterval, ticker timeCurrent = _getTime() timeElapsed = timeCurrent - state.lastTick act._tick timeElapsed * act.rate state.lastTick = timeCurrent act.trigger 'render'</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Continue tick Start tick</div></div><div class="code"><div class="wrapper"> _setTimeout act.tickInterval, ticker</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="act-tick">act._tick</h2> Tick all your tasks</div></div><div class="code"><div class="wrapper"> act._tick = (dt) -> act._rootScheduler.tick dt</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actfastforward">act.fastForward</h2> Fast forward in time</div></div><div class="code"><div class="wrapper"> act.fastForward = act._tick</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actstop">act.stop</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act.stop = -> act._playState = null</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actbegin">act.begin</h2> Start defining a new transaction</div></div><div class="code"><div class="wrapper"> act.begin = (options) -> builder = new TransactionBuilder options act._transactionBuilders.push builder builder</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="act-scheduler">act._scheduler</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> Object.defineProperty act, '_scheduler', get: -> len = act._transactionBuilders.length if len then act._transactionBuilders[len-1] else act._rootScheduler enumerable: false</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actcommit">act.commit</h2> Stop defining a transaction and add it to its parent transaction</div></div><div class="code"><div class="wrapper"> act.commit = () -> builderTop = act._transactionBuilders.pop() scheduler = @_scheduler scheduler.addTask builderTop.transaction()</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actproperty">act.property</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act.property = (obj, key, val, options) -></div></div></div><div class="segment"><div class="comments"><div class="wrapper">Default options to actOptions[k]</div></div><div class="code"><div class="wrapper"> if (_.isUndefined options) and obj.actOptions options = if _.isFunction obj.actOptions obj.actOptions()[key] else obj.actOptions[key]</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Close over animatable value</div></div><div class="code"><div class="wrapper"> store = value: val setter = (v) -> act store, value: v, options setter._actStore = store Object.defineProperty obj, key, get: -> store.value set: setter act._implicitPropertyStore = (obj, key) -> d = Object.getOwnPropertyDescriptor obj, key return d?.set?._actStore</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actproperties">act.properties</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act.properties = (obj, properties, options) -> for k, v of properties act.property obj, k, v, options?[k]</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actimplicit">act.implicit</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper"> act.implicit = (obj, options = {}) -></div></div></div><div class="segment"><div class="comments"><div class="wrapper">Default animation options</div></div><div class="code"><div class="wrapper"> options = _.clone options if obj.actOptions _.defaults options, (if _.isFunction obj.actOptions then obj.actOptions() else obj.actOptions) for k, v of obj</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Null means omit</div></div><div class="code"><div class="wrapper"> if options[k] == null options[k] = {animator: null}</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Undefined means default animator</div></div><div class="code"><div class="wrapper"> else if options[k] == undefined options[k] = {animator: _defaultInterpolationForValue v} else if _.isString options[k] or _.isFunction options[k] options[k] = {animator: options[k]} else throw new Error "act: animator is not string or function" new Implicit act, obj, options _defaultInterpolationForValue = (v) -> if _.isNumber v then linearAnimator else setAtEndAnimator</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="-rootscheduler">_rootScheduler</h2> act root scheduler</div></div><div class="code"><div class="wrapper"> act._rootScheduler = new Scheduler() act.play()</div></div></div><div class="segment"><div class="comments"><div class="wrapper">End actGenerator</div></div><div class="code"><div class="wrapper"> return act</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="actanimator">act.Animator</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">linearAnimator = (obj, destinations) -> initials = {} finals = {} for k, v of destinations</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Handle operators</div></div><div class="code"><div class="wrapper"> if _.isObject v ops = _.keys v throw (new Error "act: expected only one operator (#{ops}) for key #{k}") unless ops.length == 1 destinations[k] = op: ops[0], value: v[ops[0]] else destinations[k] = op: '=', value: v initials[k] = obj[k] finals[k] = _final initials[k], destinations[k]['op'], destinations[k]['value'] (t) -> changed = {} for k, v of finals changed[k] = _interp initials[k], finals[k], t changed _interp = (a, b, t) -> a * (1.0 - t) + b * t _final = (initial, op, value) -> if op == '==' or op == '=' return value else if op == '/=' return initial / value else if op == '*=' return initial * value else if op == '-=' return initial - value else if op == '+=' return initial + value</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="setatendanimator">setAtEndAnimator</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">setAtEndAnimator = (obj, destinations) -> initials = _.pick obj, _.keys(destinations)... finals = _.clone destinations (t) -> _.clone (if t < 1 then initials else finals)</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="animator-short-names">Animator short names</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">mapAnimatorFromName = 'setAtEnd': setAtEndAnimator 'linear': linearAnimator</div></div></div><div class="segment"><div class="comments"><div class="wrapper">'type': typeByItemAnimator # Works on arrays and strings 'typeByWord': typeByWordAnimator # Works on strings only 'step': stepAnimator 'color': colorAnimator 'region': regionAnimator 'stringTypeWord': stringTypeByWordAnimator</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="acttask">act.Task</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">class Task constructor: (@obj, @destination, options = {}) -> for k, v of @destination throw new Error('act: functions cannot be animated') if _.isFunction v if options.duration? and options.duration <= 0 throw new Error 'act: duration must be positive' @duration = options.duration || 1 @started = options.started || -> @completed = options.completed || -> @_easing = options.easing || EaseLinear @_animator = if _.isString options.animator mapAnimatorFromName[options.animator] else options.animator || linearAnimator @startTime = 0 @_elapsed = 0 update: (time) -></div></div></div><div class="segment"><div class="comments"><div class="wrapper">Start if we need to</div></div><div class="code"><div class="wrapper"> elapsed = time - @startTime if (@_elapsed <= 0) and (elapsed <= 0) return # Haven't started yet if (@_elapsed <= 0) and (elapsed > 0) @_start() # Forwards over start point else if (@_elapsed >= @duration) and (elapsed >= @duration) return # Already completed if (elapsed < 0) elapsed = 0 # Clamp elapsed at start time if (elapsed > @duration) elapsed = @duration # Clamp elapsed at end time</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Update the children</div></div><div class="code"><div class="wrapper"> eased = @_easing (elapsed / @duration) extender = (@_interpolator eased) for k, v of extender if store = act._implicitPropertyStore @obj, k store.value = v else @obj[k] = v if (elapsed >= @duration) @_complete() @_elapsed = elapsed _start: -> @_interpolator = @_animator @obj, @destination finalValue = @_interpolator 1 initialValue = @_interpolator 0 @obj.actBefore? initialValue, finalValue @started?() _complete: -> initialValue = @_interpolator 0 finalValue = @_interpolator 1 @obj.actAfter? initialValue, finalValue @completed?() _maxEndTime = (tasks) -> _.reduce tasks, ((acc,task) -> Math.max acc, (task.startTime + task.duration)), 0</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="easing">Easing</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">Ease = {} Ease.EaseLinear = EaseLinear = (v) -> v Ease.EaseIn = EaseIn = (v) -> v * v * v Ease.EaseOut = EaseOut = (v) -> 1.0 - EaseIn(1.0 - v) Ease.EaseIn2 = EaseIn2 = (v) -> v * v Ease.EaseOut2 = EaseOut2 = (v) -> 1.0 - EaseIn(1.0 - v) Ease.EaseInOut = EaseInOut = (v) -> if v < 0.5 then EaseIn(v * 2) / 2 else EaseOut(v * 2 - 1.0) / 2 + 0.5 Ease.EaseInOut2 = EaseInOut2 = (v) -> (3 * v * v) - 2 * v * v * v Ease.EaseOutBounce = EaseOutBounce = (v) -> if (v < 1 / 2.75) 7.5625 * v * v else if (v < 2 / 2.75) v -= 1.5 / 2.75 7.5625 * v * v + 0.75 else if (v < 2.5 / 2.75) v -= 2.25 / 2.75 7.5625 * v * v + 0.9375 else v -= 2.625 / 2.75 7.5625 * v * v + 0.984375</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="transaction">Transaction</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">class Transaction constructor: (fields) -> @_serial = fields.serial @_rate = fields.rate throw new Error 'act: rate must be positive' unless @_rate > 0 @_easing = fields.easing @_tasks = fields.tasks @_reverseTasks = (@_tasks.slice 0).reverse() @_started = fields.started @_completed = fields.completed @_elapsed = 0 @duration = (_maxEndTime @_tasks) / @_rate @startTime = 0 update: (time) -></div></div></div><div class="segment"><div class="comments"><div class="wrapper">Start if we need to</div></div><div class="code"><div class="wrapper"> elapsed = time - @startTime if (@_elapsed <= 0) and (elapsed <= 0) return # Haven't started yet if (@_elapsed <= 0) and (elapsed > 0) @_start() # Forwards over start point else if (@_elapsed >= @duration) and (elapsed >= @duration) return # Already completed if (elapsed < 0) elapsed = 0 # Clamp elapsed at start time if (elapsed > @duration) elapsed = @duration # Clamp elapsed at end time</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Update the children</div></div><div class="code"><div class="wrapper"> tasks = if elapsed >= @_elapsed then @_tasks else @_reverseTasks eased = (@_easing elapsed / @duration) * @duration * @_rate for task in @_tasks task.update eased if (elapsed >= @duration) @_complete() @_elapsed = elapsed</div></div></div><div class="segment"><div class="comments"><div class="wrapper">Start calcuates duration and sets up everything</div></div><div class="code"><div class="wrapper"> _start: -> @_started?() _complete: -> @_completed?()</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="transactionbuilder">TransactionBuilder</h2></div></div></div><div class="segment"><div class="code"><div class="wrapper">_default = (a = b, b) -> a class TransactionBuilder constructor: (fields = {}) -> @rate = _default fields.rate, 1 @started = fields.started || -> @completed = fields.completed || -> @serial = fields.serial || false @easing = fields.easing || EaseLinear @_tasks = [] addTask: (task) -> @_tasks.push task transaction: -> if @serial t = 0 for task in @_tasks task.startTime = t t += task.duration new Transaction rate: @rate started: @started completed: @completed serial: @serial easing: @easing tasks: @_tasks</div></div></div><div class="segment"><div class="comments"><div class="wrapper"><h2 id="scheduler">Scheduler</h2> Transactions are added to the scheduler