/* Copyright (c) 2010, Yahoo! Inc. All rights reserved. Code licensed under the BSD License: http://developer.yahoo.com/yui/license.html version: 3.3.0 build: 3167 */ YUI.add('anim-base', function(Y) { /** * The Animation Utility provides an API for creating advanced transitions. * @module anim */ /** * Provides the base Anim class, for animating numeric properties. * * @module anim * @submodule anim-base */ /** * A class for constructing animation instances. * @class Anim * @for Anim * @constructor * @extends Base */ var RUNNING = 'running', START_TIME = 'startTime', ELAPSED_TIME = 'elapsedTime', /** * @for Anim * @event start * @description fires when an animation begins. * @param {Event} ev The start event. * @type Event.Custom */ START = 'start', /** * @event tween * @description fires every frame of the animation. * @param {Event} ev The tween event. * @type Event.Custom */ TWEEN = 'tween', /** * @event end * @description fires after the animation completes. * @param {Event} ev The end event. * @type Event.Custom */ END = 'end', NODE = 'node', PAUSED = 'paused', REVERSE = 'reverse', // TODO: cleanup ITERATION_COUNT = 'iterationCount', NUM = Number; var _running = {}, _timer; Y.Anim = function() { Y.Anim.superclass.constructor.apply(this, arguments); Y.Anim._instances[Y.stamp(this)] = this; }; Y.Anim.NAME = 'anim'; Y.Anim._instances = {}; /** * Regex of properties that should use the default unit. * * @property RE_DEFAULT_UNIT * @static */ Y.Anim.RE_DEFAULT_UNIT = /^width|height|top|right|bottom|left|margin.*|padding.*|border.*$/i; /** * The default unit to use with properties that pass the RE_DEFAULT_UNIT test. * * @property DEFAULT_UNIT * @static */ Y.Anim.DEFAULT_UNIT = 'px'; Y.Anim.DEFAULT_EASING = function (t, b, c, d) { return c * t / d + b; // linear easing }; /** * Time in milliseconds passed to setInterval for frame processing * * @property intervalTime * @default 20 * @static */ Y.Anim._intervalTime = 20; /** * Bucket for custom getters and setters * * @property behaviors * @static */ Y.Anim.behaviors = { left: { get: function(anim, attr) { return anim._getOffset(attr); } } }; Y.Anim.behaviors.top = Y.Anim.behaviors.left; /** * The default setter to use when setting object properties. * * @property DEFAULT_SETTER * @static */ Y.Anim.DEFAULT_SETTER = function(anim, att, from, to, elapsed, duration, fn, unit) { var node = anim._node, val = fn(elapsed, NUM(from), NUM(to) - NUM(from), duration); if (att in node._node.style || att in Y.DOM.CUSTOM_STYLES) { unit = unit || ''; node.setStyle(att, val + unit); } else if (node._node.attributes[att]) { node.setAttribute(att, val); } else { node.set(att, val); } }; /** * The default getter to use when getting object properties. * * @property DEFAULT_GETTER * @static */ Y.Anim.DEFAULT_GETTER = function(anim, att) { var node = anim._node, val = ''; if (att in node._node.style || att in Y.DOM.CUSTOM_STYLES) { val = node.getComputedStyle(att); } else if (node._node.attributes[att]) { val = node.getAttribute(att); } else { val = node.get(att); } return val; }; Y.Anim.ATTRS = { /** * The object to be animated. * @attribute node * @type Node */ node: { setter: function(node) { node = Y.one(node); this._node = node; if (!node) { } return node; } }, /** * The length of the animation. Defaults to "1" (second). * @attribute duration * @type NUM */ duration: { value: 1 }, /** * The method that will provide values to the attribute(s) during the animation. * Defaults to "Easing.easeNone". * @attribute easing * @type Function */ easing: { value: Y.Anim.DEFAULT_EASING, setter: function(val) { if (typeof val === 'string' && Y.Easing) { return Y.Easing[val]; } } }, /** * The starting values for the animated properties. * Fields may be strings, numbers, or functions. * If a function is used, the return value becomes the from value. * If no from value is specified, the DEFAULT_GETTER will be used. * @attribute from * @type Object * supports any unit, provided it matches the "to" (or default) * unit (e.g. "{width: 10em', color: 'rgb(0, 0 0)', borderColor: '#ccc'}". * If using the default ('px' for length-based units), the unit may be omitted ( * (e.g. "{width: 100}, borderColor: 'ccc'}", which defaults to pixels * and hex, respectively). */ from: {}, /** * The ending values for the animated properties. * Fields may be strings, numbers, or functions. * @attribute to * @type Object * supports any unit, provided it matches the "from" (or default) * unit (e.g. "{width: '50%', color: 'red', borderColor: '#ccc'}". * If using the default ('px' for length-based units), the unit may be omitted ( * (e.g. "{width: 100}, borderColor: 'ccc'}", which defaults to pixels * and hex, respectively). */ to: {}, /** * Date stamp for the first frame of the animation. * @attribute startTime * @type Int * @default 0 * @readOnly */ startTime: { value: 0, readOnly: true }, /** * Current time the animation has been running. * @attribute elapsedTime * @type Int * @default 0 * @readOnly */ elapsedTime: { value: 0, readOnly: true }, /** * Whether or not the animation is currently running. * @attribute running * @type Boolean * @default false * @readOnly */ running: { getter: function() { return !!_running[Y.stamp(this)]; }, value: false, readOnly: true }, /** * The number of times the animation should run * @attribute iterations * @type Int * @default 1 */ iterations: { value: 1 }, /** * The number of iterations that have occurred. * Resets when an animation ends (reaches iteration count or stop() called). * @attribute iterationCount * @type Int * @default 0 * @readOnly */ iterationCount: { value: 0, readOnly: true }, /** * How iterations of the animation should behave. * Possible values are "normal" and "alternate". * Normal will repeat the animation, alternate will reverse on every other pass. * * @attribute direction * @type String * @default "normal" */ direction: { value: 'normal' // | alternate (fwd on odd, rev on even per spec) }, /** * Whether or not the animation is currently paused. * @attribute paused * @type Boolean * @default false * @readOnly */ paused: { readOnly: true, value: false }, /** * If true, animation begins from last frame * @attribute reverse * @type Boolean * @default false */ reverse: { value: false } }; /** * Runs all animation instances. * @method run * @static */ Y.Anim.run = function() { var instances = Y.Anim._instances; for (var i in instances) { if (instances[i].run) { instances[i].run(); } } }; /** * Pauses all animation instances. * @method pause * @static */ Y.Anim.pause = function() { for (var i in _running) { // stop timer if nothing running if (_running[i].pause) { _running[i].pause(); } } Y.Anim._stopTimer(); }; /** * Stops all animation instances. * @method stop * @static */ Y.Anim.stop = function() { for (var i in _running) { // stop timer if nothing running if (_running[i].stop) { _running[i].stop(); } } Y.Anim._stopTimer(); }; Y.Anim._startTimer = function() { if (!_timer) { _timer = setInterval(Y.Anim._runFrame, Y.Anim._intervalTime); } }; Y.Anim._stopTimer = function() { clearInterval(_timer); _timer = 0; }; /** * Called per Interval to handle each animation frame. * @method _runFrame * @private * @static */ Y.Anim._runFrame = function() { var done = true; for (var anim in _running) { if (_running[anim]._runFrame) { done = false; _running[anim]._runFrame(); } } if (done) { Y.Anim._stopTimer(); } }; Y.Anim.RE_UNITS = /^(-?\d*\.?\d*){1}(em|ex|px|in|cm|mm|pt|pc|%)*$/; var proto = { /** * Starts or resumes an animation. * @method run * @chainable */ run: function() { if (this.get(PAUSED)) { this._resume(); } else if (!this.get(RUNNING)) { this._start(); } return this; }, /** * Pauses the animation and * freezes it in its current state and time. * Calling run() will continue where it left off. * @method pause * @chainable */ pause: function() { if (this.get(RUNNING)) { this._pause(); } return this; }, /** * Stops the animation and resets its time. * @method stop * @param {Boolean} finish If true, the animation will move to the last frame * @chainable */ stop: function(finish) { if (this.get(RUNNING) || this.get(PAUSED)) { this._end(finish); } return this; }, _added: false, _start: function() { this._set(START_TIME, new Date() - this.get(ELAPSED_TIME)); this._actualFrames = 0; if (!this.get(PAUSED)) { this._initAnimAttr(); } _running[Y.stamp(this)] = this; Y.Anim._startTimer(); this.fire(START); }, _pause: function() { this._set(START_TIME, null); this._set(PAUSED, true); delete _running[Y.stamp(this)]; /** * @event pause * @description fires when an animation is paused. * @param {Event} ev The pause event. * @type Event.Custom */ this.fire('pause'); }, _resume: function() { this._set(PAUSED, false); _running[Y.stamp(this)] = this; this._set(START_TIME, new Date() - this.get(ELAPSED_TIME)); Y.Anim._startTimer(); /** * @event resume * @description fires when an animation is resumed (run from pause). * @param {Event} ev The pause event. * @type Event.Custom */ this.fire('resume'); }, _end: function(finish) { var duration = this.get('duration') * 1000; if (finish) { // jump to last frame this._runAttrs(duration, duration, this.get(REVERSE)); } this._set(START_TIME, null); this._set(ELAPSED_TIME, 0); this._set(PAUSED, false); delete _running[Y.stamp(this)]; this.fire(END, {elapsed: this.get(ELAPSED_TIME)}); }, _runFrame: function() { var d = this._runtimeAttr.duration, t = new Date() - this.get(START_TIME), reverse = this.get(REVERSE), done = (t >= d), attribute, setter; this._runAttrs(t, d, reverse); this._actualFrames += 1; this._set(ELAPSED_TIME, t); this.fire(TWEEN); if (done) { this._lastFrame(); } }, _runAttrs: function(t, d, reverse) { var attr = this._runtimeAttr, customAttr = Y.Anim.behaviors, easing = attr.easing, lastFrame = d, done = false, attribute, setter, i; if (t >= d) { done = true; } if (reverse) { t = d - t; lastFrame = 0; } for (i in attr) { if (attr[i].to) { attribute = attr[i]; setter = (i in customAttr && 'set' in customAttr[i]) ? customAttr[i].set : Y.Anim.DEFAULT_SETTER; if (!done) { setter(this, i, attribute.from, attribute.to, t, d, easing, attribute.unit); } else { setter(this, i, attribute.from, attribute.to, lastFrame, d, easing, attribute.unit); } } } }, _lastFrame: function() { var iter = this.get('iterations'), iterCount = this.get(ITERATION_COUNT); iterCount += 1; if (iter === 'infinite' || iterCount < iter) { if (this.get('direction') === 'alternate') { this.set(REVERSE, !this.get(REVERSE)); // flip it } /** * @event iteration * @description fires when an animation begins an iteration. * @param {Event} ev The iteration event. * @type Event.Custom */ this.fire('iteration'); } else { iterCount = 0; this._end(); } this._set(START_TIME, new Date()); this._set(ITERATION_COUNT, iterCount); }, _initAnimAttr: function() { var from = this.get('from') || {}, to = this.get('to') || {}, attr = { duration: this.get('duration') * 1000, easing: this.get('easing') }, customAttr = Y.Anim.behaviors, node = this.get(NODE), // implicit attr init unit, begin, end; Y.each(to, function(val, name) { if (typeof val === 'function') { val = val.call(this, node); } begin = from[name]; if (begin === undefined) { begin = (name in customAttr && 'get' in customAttr[name]) ? customAttr[name].get(this, name) : Y.Anim.DEFAULT_GETTER(this, name); } else if (typeof begin === 'function') { begin = begin.call(this, node); } var mFrom = Y.Anim.RE_UNITS.exec(begin); var mTo = Y.Anim.RE_UNITS.exec(val); begin = mFrom ? mFrom[1] : begin; end = mTo ? mTo[1] : val; unit = mTo ? mTo[2] : mFrom ? mFrom[2] : ''; // one might be zero TODO: mixed units if (!unit && Y.Anim.RE_DEFAULT_UNIT.test(name)) { unit = Y.Anim.DEFAULT_UNIT; } if (!begin || !end) { Y.error('invalid "from" or "to" for "' + name + '"', 'Anim'); return; } attr[name] = { from: begin, to: end, unit: unit }; }, this); this._runtimeAttr = attr; }, // TODO: move to computedStyle? (browsers dont agree on default computed offsets) _getOffset: function(attr) { var node = this._node, val = node.getComputedStyle(attr), get = (attr === 'left') ? 'getX': 'getY', set = (attr === 'left') ? 'setX': 'setY'; if (val === 'auto') { var position = node.getStyle('position'); if (position === 'absolute' || position === 'fixed') { val = node[get](); node[set](val); } else { val = 0; } } return val; }, destructor: function() { delete Y.Anim._instances[Y.stamp(this)]; } }; Y.extend(Y.Anim, Y.Base, proto); }, '3.3.0' ,{requires:['base-base', 'node-style']});