Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
/*
Copyright (c) 2007, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.2.0
*/
/*
Copyright (c) 2006, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
*/
/**
* The animation module provides allows effects to be added to HTMLElements.
* @module animation
* @requires yahoo, event, dom
*/
/**
*
* Base animation class that provides the interface for building animated effects.
* <p>Usage: var myAnim = new YAHOO.util.Anim(el, { width: { from: 10, to: 100 } }, 1, YAHOO.util.Easing.easeOut);</p>
* @class Anim
* @namespace YAHOO.util
* @requires YAHOO.util.AnimMgr
* @requires YAHOO.util.Easing
* @requires YAHOO.util.Dom
* @requires YAHOO.util.Event
* @requires YAHOO.util.CustomEvent
* @constructor
* @param {String | HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
YAHOO.util.Anim = function(el, attributes, duration, method) {
if (el) {
this.init(el, attributes, duration, method);
}
};
YAHOO.util.Anim.prototype = {
/**
* Provides a readable name for the Anim instance.
* @method toString
* @return {String}
*/
toString: function() {
var el = this.getEl();
var id = el.id || el.tagName;
return ("Anim " + id);
},
patterns: { // cached for performance
noNegatives: /width|height|opacity|padding/i, // keep at zero or above
offsetAttribute: /^((width|height)|(top|left))$/, // use offsetValue as default
defaultUnit: /width|height|top$|bottom$|left$|right$/i, // use 'px' by default
offsetUnit: /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i // IE may return these, so convert these to offset
},
/**
* Returns the value computed by the animation's "method".
* @method doMethod
* @param {String} attr The name of the attribute.
* @param {Number} start The value this attribute should start from for this animation.
* @param {Number} end The value this attribute should end at for this animation.
* @return {Number} The Value to be applied to the attribute.
*/
doMethod: function(attr, start, end) {
return this.method(this.currentFrame, start, end - start, this.totalFrames);
},
/**
* Applies a value to an attribute.
* @method setAttribute
* @param {String} attr The name of the attribute.
* @param {Number} val The value to be applied to the attribute.
* @param {String} unit The unit ('px', '%', etc.) of the value.
*/
setAttribute: function(attr, val, unit) {
if ( this.patterns.noNegatives.test(attr) ) {
val = (val > 0) ? val : 0;
}
YAHOO.util.Dom.setStyle(this.getEl(), attr, val + unit);
},
/**
* Returns current value of the attribute.
* @method getAttribute
* @param {String} attr The name of the attribute.
* @return {Number} val The current value of the attribute.
*/
getAttribute: function(attr) {
var el = this.getEl();
var val = YAHOO.util.Dom.getStyle(el, attr);
if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
return parseFloat(val);
}
var a = this.patterns.offsetAttribute.exec(attr) || [];
var pos = !!( a[3] ); // top or left
var box = !!( a[2] ); // width or height
// use offsets for width/height and abs pos top/left
if ( box || (YAHOO.util.Dom.getStyle(el, 'position') == 'absolute' && pos) ) {
val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
} else { // default to zero for other 'auto'
val = 0;
}
return val;
},
/**
* Returns the unit to use when none is supplied.
* @method getDefaultUnit
* @param {attr} attr The name of the attribute.
* @return {String} The default unit to be used.
*/
getDefaultUnit: function(attr) {
if ( this.patterns.defaultUnit.test(attr) ) {
return 'px';
}
return '';
},
/**
* Sets the actual values to be used during the animation. Should only be needed for subclass use.
* @method setRuntimeAttribute
* @param {Object} attr The attribute object
* @private
*/
setRuntimeAttribute: function(attr) {
var start;
var end;
var attributes = this.attributes;
this.runtimeAttributes[attr] = {};
var isset = function(prop) {
return (typeof prop !== 'undefined');
};
if ( !isset(attributes[attr]['to']) && !isset(attributes[attr]['by']) ) {
return false; // note return; nothing to animate to
}
start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
// To beats by, per SMIL 2.1 spec
if ( isset(attributes[attr]['to']) ) {
end = attributes[attr]['to'];
} else if ( isset(attributes[attr]['by']) ) {
if (start.constructor == Array) {
end = [];
for (var i = 0, len = start.length; i < len; ++i) {
end[i] = start[i] + attributes[attr]['by'][i];
}
} else {
end = start + attributes[attr]['by'];
}
}
this.runtimeAttributes[attr].start = start;
this.runtimeAttributes[attr].end = end;
// set units if needed
this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
},
/**
* Constructor for Anim instance.
* @method init
* @param {String | HTMLElement} el Reference to the element that will be animated
* @param {Object} attributes The attribute(s) to be animated.
* Each attribute is an object with at minimum a "to" or "by" member defined.
* Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
* All attribute names use camelCase.
* @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
* @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
*/
init: function(el, attributes, duration, method) {
/**
* Whether or not the animation is running.
* @property isAnimated
* @private
* @type Boolean
*/
var isAnimated = false;
/**
* A Date object that is created when the animation begins.
* @property startTime
Loading full blame...