2 * Portions of this file are based on pieces of Yahoo User Interface Library
3 * Copyright (c) 2007, Yahoo! Inc. All rights reserved.
4 * YUI licensed under the BSD License:
5 * http://developer.yahoo.net/yui/license.txt
6 * <script type="text/javascript">
15 libFlyweight = new Roo.Element.Flyweight();
17 libFlyweight.dom = el;
21 // since this uses fly! - it cant be in DOM (which does not have fly yet..)
25 Roo.lib.AnimBase = function(el, attributes, duration, method) {
27 this.init(el, attributes, duration, method);
31 Roo.lib.AnimBase.fly = fly;
35 Roo.lib.AnimBase.prototype = {
37 toString: function() {
38 var el = this.getEl();
39 var id = el.id || el.tagName;
40 return ("Anim " + id);
44 noNegatives: /width|height|opacity|padding/i,
45 offsetAttribute: /^((width|height)|(top|left))$/,
46 defaultUnit: /width|height|top$|bottom$|left$|right$/i,
47 offsetUnit: /\d+(em|%|en|ex|pt|in|cm|mm|pc)$/i
51 doMethod: function(attr, start, end) {
52 return this.method(this.currentFrame, start, end - start, this.totalFrames);
56 setAttribute: function(attr, val, unit) {
57 if (this.patterns.noNegatives.test(attr)) {
58 val = (val > 0) ? val : 0;
61 Roo.fly(this.getEl(), '_anim').setStyle(attr, val + unit);
65 getAttribute: function(attr) {
66 var el = this.getEl();
67 var val = fly(el).getStyle(attr);
69 if (val !== 'auto' && !this.patterns.offsetUnit.test(val)) {
70 return parseFloat(val);
73 var a = this.patterns.offsetAttribute.exec(attr) || [];
78 if (box || (fly(el).getStyle('position') == 'absolute' && pos)) {
79 val = el['offset' + a[0].charAt(0).toUpperCase() + a[0].substr(1)];
88 getDefaultUnit: function(attr) {
89 if (this.patterns.defaultUnit.test(attr)) {
96 animateX : function(callback, scope) {
98 this.onComplete.removeListener(f);
99 if (typeof callback == "function") {
100 callback.call(scope || this, this);
103 this.onComplete.addListener(f, this);
108 setRuntimeAttribute: function(attr) {
111 var attributes = this.attributes;
113 this.runtimeAttributes[attr] = {};
115 var isset = function(prop) {
116 return (typeof prop !== 'undefined');
119 if (!isset(attributes[attr]['to']) && !isset(attributes[attr]['by'])) {
123 start = ( isset(attributes[attr]['from']) ) ? attributes[attr]['from'] : this.getAttribute(attr);
126 if (isset(attributes[attr]['to'])) {
127 end = attributes[attr]['to'];
128 } else if (isset(attributes[attr]['by'])) {
129 if (start.constructor == Array) {
131 for (var i = 0, len = start.length; i < len; ++i) {
132 end[i] = start[i] + attributes[attr]['by'][i];
135 end = start + attributes[attr]['by'];
139 this.runtimeAttributes[attr].start = start;
140 this.runtimeAttributes[attr].end = end;
143 this.runtimeAttributes[attr].unit = ( isset(attributes[attr].unit) ) ? attributes[attr]['unit'] : this.getDefaultUnit(attr);
147 init: function(el, attributes, duration, method) {
149 var isAnimated = false;
152 var startTime = null;
155 var actualFrames = 0;
161 this.attributes = attributes || {};
164 this.duration = duration || 1;
167 this.method = method || Roo.lib.Easing.easeNone;
170 this.useSeconds = true;
173 this.currentFrame = 0;
176 this.totalFrames = Roo.lib.AnimMgr.fps;
179 this.getEl = function() {
184 this.isAnimated = function() {
189 this.getStartTime = function() {
193 this.runtimeAttributes = {};
196 this.animate = function() {
197 if (this.isAnimated()) {
201 this.currentFrame = 0;
203 this.totalFrames = ( this.useSeconds ) ? Math.ceil(Roo.lib.AnimMgr.fps * this.duration) : this.duration;
205 Roo.lib.AnimMgr.registerElement(this);
209 this.stop = function(finish) {
211 this.currentFrame = this.totalFrames;
212 this._onTween.fire();
214 Roo.lib.AnimMgr.stop(this);
217 var onStart = function() {
220 this.runtimeAttributes = {};
221 for (var attr in this.attributes) {
222 this.setRuntimeAttribute(attr);
227 startTime = new Date();
231 var onTween = function() {
233 duration: new Date() - this.getStartTime(),
234 currentFrame: this.currentFrame
237 data.toString = function() {
239 'duration: ' + data.duration +
240 ', currentFrame: ' + data.currentFrame
244 this.onTween.fire(data);
246 var runtimeAttributes = this.runtimeAttributes;
248 for (var attr in runtimeAttributes) {
249 this.setAttribute(attr, this.doMethod(attr, runtimeAttributes[attr].start, runtimeAttributes[attr].end), runtimeAttributes[attr].unit);
255 var onComplete = function() {
256 var actual_duration = (new Date() - startTime) / 1000 ;
259 duration: actual_duration,
260 frames: actualFrames,
261 fps: actualFrames / actual_duration
264 data.toString = function() {
266 'duration: ' + data.duration +
267 ', frames: ' + data.frames +
274 this.onComplete.fire(data);
278 this._onStart = new Roo.util.Event(this);
279 this.onStart = new Roo.util.Event(this);
280 this.onTween = new Roo.util.Event(this);
281 this._onTween = new Roo.util.Event(this);
282 this.onComplete = new Roo.util.Event(this);
283 this._onComplete = new Roo.util.Event(this);
284 this._onStart.addListener(onStart);
285 this._onTween.addListener(onTween);
286 this._onComplete.addListener(onComplete);