anim-base-debug.js revision 5977f41bf2914e3174de1e275499c5ccb36e8bae
5562N/AYUI.add('anim-base', function(Y) {
5562N/A
5562N/A/**
5562N/A * Y.Animation Utility.
5562N/A * @module anim
5562N/A */
5562N/A
5562N/A /**
5562N/A * Handles animation _queueing and threading.
5562N/A * @class Anim
5562N/A * @constructor
5562N/A * @extends Base
5562N/A * @for Anim
5562N/A */
5562N/A
5562N/A var RUNNING = 'running',
5562N/A START_TIME = 'startTime',
5562N/A ELAPSED_TIME = 'elapsedTime',
5562N/A /**
5562N/A * @event start
5562N/A * @description fires when an animation begins.
5562N/A * @param {Event} ev The start event.
5562N/A * @type Event.Custom
5562N/A */
5562N/A START = 'start',
5562N/A
5562N/A /**
5562N/A * @event tween
5562N/A * @description fires every frame of the animation.
5562N/A * @param {Event} ev The tween event.
5562N/A * @type Event.Custom
5562N/A */
5562N/A TWEEN = 'tween',
5562N/A
5562N/A /**
5562N/A * @event end
5562N/A * @description fires after the animation completes.
5562N/A * @param {Event} ev The end event.
5562N/A * @type Event.Custom
5562N/A */
5562N/A END = 'end',
5562N/A NODE = 'node',
5562N/A PAUSED = 'paused',
5562N/A REVERSE = 'reverse', // TODO: cleanup
5562N/A ITERATION_COUNT = 'iterationCount',
5562N/A
5562N/A NUM = Number;
5562N/A
5562N/A var _running = {},
5562N/A _instances = {},
5562N/A _timer;
5562N/A
5562N/A Y.Anim = function() {
5562N/A Y.Anim.superclass.constructor.apply(this, arguments);
5562N/A _instances[Y.stamp(this)] = this;
5562N/A };
5562N/A
5562N/A Y.Anim.NAME = 'anim';
5562N/A
5562N/A /**
5562N/A * Regex of properties that should use the default unit.
5562N/A *
5562N/A * @property RE_DEFAULT_UNIT
5562N/A * @static
5562N/A */
5562N/A Y.Anim.RE_DEFAULT_UNIT = /^width|height|top|right|bottom|left|margin.*|padding.*|border.*$/i;
5562N/A
5562N/A /**
5562N/A * The default unit to use with properties that pass the RE_DEFAULT_UNIT test.
5562N/A *
5562N/A * @property DEFAULT_UNIT
5562N/A * @static
5562N/A */
5562N/A Y.Anim.DEFAULT_UNIT = 'px';
5562N/A
5562N/A Y.Anim.DEFAULT_EASING = function (t, b, c, d) {
5562N/A return c * t / d + b; // linear easing
5562N/A };
5562N/A
5562N/A /**
5562N/A * Bucket for custom getters and setters
5562N/A *
5562N/A * @property behaviors
5562N/A * @static
5562N/A */
5562N/A Y.Anim.behaviors = {
5562N/A left: {
5562N/A get: function(anim, attr) {
5562N/A return anim._getOffset(attr);
5562N/A }
5562N/A }
5562N/A };
5562N/A
5562N/A Y.Anim.behaviors.top = Y.Anim.behaviors.left;
5562N/A
5562N/A /**
5562N/A * The default setter to use when setting object properties.
5562N/A *
5562N/A * @property DEFAULT_SETTER
5562N/A * @static
5562N/A */
5562N/A Y.Anim.DEFAULT_SETTER = function(anim, att, from, to, elapsed, duration, fn, unit) {
5562N/A unit = unit || '';
5562N/A anim._node.setStyle(att, fn(elapsed, NUM(from), NUM(to) - NUM(from), duration) + unit);
5562N/A };
5562N/A
5562N/A /**
5562N/A * The default getter to use when getting object properties.
5562N/A *
5562N/A * @property DEFAULT_GETTER
5562N/A * @static
5562N/A */
5562N/A Y.Anim.DEFAULT_GETTER = function(anim, prop) {
5562N/A return anim._node.getComputedStyle(prop);
5562N/A };
5562N/A
5562N/A Y.Anim.ATTRS = {
5562N/A /**
5562N/A * The object to be animated.
5562N/A * @attribute node
5562N/A * @type Node
5562N/A */
5562N/A node: {
5562N/A setter: function(node) {
5562N/A node = Y.get(node);
5562N/A this._node = node;
5562N/A if (!node) {
5562N/A Y.log(node + ' is not a valid node', 'warn', 'Anim');
5562N/A }
5562N/A return node;
5562N/A }
5562N/A },
5562N/A
5562N/A /**
5562N/A * The length of the animation. Defaults to "1" (second).
5562N/A * @attribute duration
5562N/A * @type NUM
5562N/A */
5562N/A duration: {
5562N/A value: 1
5562N/A },
5562N/A
5562N/A /**
5562N/A * The method that will provide values to the attribute(s) during the animation.
5562N/A * Defaults to "Easing.easeNone".
5562N/A * @attribute easing
5562N/A * @type Function
5562N/A */
5562N/A easing: {
5562N/A value: Y.Anim.DEFAULT_EASING,
5562N/A
5562N/A setter: function(val) {
5562N/A if (typeof val === 'string' && Y.Easing) {
5562N/A return Y.Easing[val];
5562N/A }
5562N/A }
5562N/A },
5562N/A
5562N/A /**
5562N/A * The starting values for the animated properties.
5562N/A * Fields may be strings, numbers, or functions.
5562N/A * If a function is used, the return value becomes the from value.
5562N/A * If no from value is specified, the DEFAULT_GETTER will be used.
5562N/A * @attribute from
5562N/A * @type Object
5562N/A */
5562N/A from: {},
5562N/A
5562N/A /**
5562N/A * The ending values for the animated properties.
5562N/A * Fields may be strings, numbers, or functions.
5562N/A * @attribute to
5562N/A * @type Object
5562N/A */
5562N/A to: {},
5562N/A
5562N/A /**
5562N/A * Date stamp for the first frame of the animation.
5562N/A * @attribute startTime
5562N/A * @type Int
5562N/A * @default 0
5562N/A * @readOnly
5562N/A */
5562N/A startTime: {
5562N/A 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 running
* @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() {
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, 1);
}
};
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.
* percent start time marker.
* @method run
* @chainable
*/
run: function() {
if (!this.get(RUNNING)) {
this._start();
} else if (this.get(PAUSED)) {
this._resume();
}
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
* @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;
/**
* @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) {
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 attr = this._runtimeAttr,
customAttr = Y.Anim.behaviors,
easing = attr.easing,
d = attr.duration,
t = new Date() - this.get(START_TIME),
reversed = this.get(REVERSE),
done = (t >= d),
lastFrame = d,
attribute,
setter;
if (reversed) {
t = d - t;
done = (t <= 0);
lastFrame = 0;
}
for (var 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 { // ensure final frame value is set
// TODO: handle keyframes
setter(this, i, attribute.from, attribute.to, lastFrame, d, easing, attribute.unit);
}
}
}
this._actualFrames += 1;
this._set(ELAPSED_TIME, t);
this.fire(TWEEN);
if (done) {
this._lastFrame();
}
},
_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') || {},
dur = this.get('duration') * 1000,
node = this.get(NODE),
easing = this.get('easing') || {},
attr = {},
customAttr = Y.Anim.behaviors,
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
};
attr.duration = dur;
attr.easing = easing;
}, 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;
}
};
Y.extend(Y.Anim, Y.Base, proto);
}, '@VERSION@' ,{requires:['base', 'node']});