diff options
Diffstat (limited to 'src/fx.js')
| -rw-r--r-- | src/fx.js | 197 |
1 files changed, 104 insertions, 93 deletions
@@ -7,7 +7,9 @@ SVG.FX = function(element) { SVG.extend(SVG.FX, { // Add animation parameters and start animation animate: function(d, ease, delay) { - var fx = this + var akeys, tkeys, skeys, key + , element = this.target + , fx = this /* dissect object if one is passed */ if (typeof d == 'object') { @@ -15,113 +17,122 @@ SVG.extend(SVG.FX, { ease = d.ease d = d.duration } - - /* delay animation */ - this.timeout = setTimeout(function() { - - /* ensure default duration and easing */ - d = d == null ? 1000 : d - ease = ease || '<>' - - var akeys, tkeys, skeys - , interval = 1000 / 60 - , element = fx.target - , start = new Date().getTime() - , finish = start + d - /* start animation */ - fx.interval = setInterval(function(){ - // This code was borrowed from the emile.js micro framework by Thomas Fuchs, aka MadRobby. - var i, key - , time = new Date().getTime() - , pos = time > finish ? 1 : (time - start) / d + /* ensure default duration and easing */ + d = d == null ? 1000 : d + ease = ease || '<>' - /* collect attribute keys */ - if (akeys == null) { - akeys = [] - for (key in fx.attrs) - akeys.push(key) - } + /* process values */ + fx.to = function(pos) { + var i - /* collect transformation keys */ - if (tkeys == null) { - tkeys = [] - for (key in fx.trans) - tkeys.push(key) - } + /* normalise pos */ + pos = pos < 0 ? 0 : pos > 1 ? 1 : pos - /* collect style keys */ - if (skeys == null) { - skeys = [] - for (key in fx.styles) - skeys.push(key) - } + /* collect attribute keys */ + if (akeys == null) { + akeys = [] + for (key in fx.attrs) + akeys.push(key) + } - /* apply easing */ - pos = ease == '<>' ? - (-Math.cos(pos * Math.PI) / 2) + 0.5 : - ease == '>' ? - Math.sin(pos * Math.PI / 2) : - ease == '<' ? - -Math.cos(pos * Math.PI / 2) + 1 : - ease == '-' ? - pos : - typeof ease == 'function' ? - ease(pos) : - pos + /* collect transformation keys */ + if (tkeys == null) { + tkeys = [] + for (key in fx.trans) + tkeys.push(key) + } - /* run all x-position properties */ - if (fx._x) - element.x(fx._at(fx._x, pos)) - else if (fx._cx) - element.cx(fx._at(fx._cx, pos)) + /* collect style keys */ + if (skeys == null) { + skeys = [] + for (key in fx.styles) + skeys.push(key) + } - /* run all y-position properties */ - if (fx._y) - element.y(fx._at(fx._y, pos)) - else if (fx._cy) - element.cy(fx._at(fx._cy, pos)) + /* apply easing */ + pos = ease == '<>' ? + (-Math.cos(pos * Math.PI) / 2) + 0.5 : + ease == '>' ? + Math.sin(pos * Math.PI / 2) : + ease == '<' ? + -Math.cos(pos * Math.PI / 2) + 1 : + ease == '-' ? + pos : + typeof ease == 'function' ? + ease(pos) : + pos - /* run all size properties */ - if (fx._size) - element.size(fx._at(fx._size.width, pos), fx._at(fx._size.height, pos)) + /* run all x-position properties */ + if (fx._x) + element.x(fx._at(fx._x, pos)) + else if (fx._cx) + element.cx(fx._at(fx._cx, pos)) - /* run all viewbox properties */ - if (fx._viewbox) - element.viewbox( - fx._at(fx._viewbox.x, pos) - , fx._at(fx._viewbox.y, pos) - , fx._at(fx._viewbox.width, pos) - , fx._at(fx._viewbox.height, pos) - ) + /* run all y-position properties */ + if (fx._y) + element.y(fx._at(fx._y, pos)) + else if (fx._cy) + element.cy(fx._at(fx._cy, pos)) - /* animate attributes */ - for (i = akeys.length - 1; i >= 0; i--) - element.attr(akeys[i], fx._at(fx.attrs[akeys[i]], pos)) + /* run all size properties */ + if (fx._size) + element.size(fx._at(fx._size.width, pos), fx._at(fx._size.height, pos)) - /* animate transformations */ - for (i = tkeys.length - 1; i >= 0; i--) - element.transform(tkeys[i], fx._at(fx.trans[tkeys[i]], pos)) + /* run all viewbox properties */ + if (fx._viewbox) + element.viewbox( + fx._at(fx._viewbox.x, pos) + , fx._at(fx._viewbox.y, pos) + , fx._at(fx._viewbox.width, pos) + , fx._at(fx._viewbox.height, pos) + ) - /* animate styles */ - for (i = skeys.length - 1; i >= 0; i--) - element.style(skeys[i], fx._at(fx.styles[skeys[i]], pos)) + /* animate attributes */ + for (i = akeys.length - 1; i >= 0; i--) + element.attr(akeys[i], fx._at(fx.attrs[akeys[i]], pos)) - /* callback for each keyframe */ - if (fx._during) - fx._during.call(element, pos, function(from, to) { - return fx._at({ from: from, to: to }, pos) - }) + /* animate transformations */ + for (i = tkeys.length - 1; i >= 0; i--) + element.transform(tkeys[i], fx._at(fx.trans[tkeys[i]], pos)) - /* finish off animation */ - if (time > finish) { - clearInterval(fx.interval) - fx._after ? fx._after.apply(element, [fx]) : fx.stop() - } + /* animate styles */ + for (i = skeys.length - 1; i >= 0; i--) + element.style(skeys[i], fx._at(fx.styles[skeys[i]], pos)) - }, d > interval ? interval : d) - - }, delay || 0) + /* callback for each keyframe */ + if (fx._during) + fx._during.call(element, pos, function(from, to) { + return fx._at({ from: from, to: to }, pos) + }) + } + + if (typeof d === 'number') { + /* delay animation */ + this.timeout = setTimeout(function() { + var interval = 1000 / 60 + , start = new Date().getTime() + , finish = start + d + + /* start animation */ + fx.interval = setInterval(function(){ + // This code was borrowed from the emile.js micro framework by Thomas Fuchs, aka MadRobby. + var time = new Date().getTime() + , pos = time > finish ? 1 : (time - start) / d + + /* process values */ + fx.to(pos) + + /* finish off animation */ + if (time > finish) { + clearInterval(fx.interval) + fx._after ? fx._after.apply(element, [fx]) : fx.stop() + } + + }, d > interval ? interval : d) + + }, delay || 0) + } return this } |