diff options
Diffstat (limited to 'src/fx.js')
| -rwxr-xr-x | src/fx.js | 174 |
1 files changed, 90 insertions, 84 deletions
@@ -38,31 +38,32 @@ SVG.FX = SVG.invent({ akeys.push(key) // make sure morphable elements are scaled, translated and morphed all together - if (element.morphArray && (fx._plot || akeys.indexOf('points') > -1)) { + if (element.morphArray && (fx.destination.plot || akeys.indexOf('points') > -1)) { // get destination var box - , p = new element.morphArray(fx._plot || fx.attrs.points || element.array) + , p = new element.morphArray(fx.destination.plot || fx.attrs.points || element.array) // add size - if (fx._size) p.size(fx._size.width.to, fx._size.height.to) + if (fx.destination.size) + p.size(fx.destination.size.width.to, fx.destination.size.height.to) // add movement box = p.bbox() - if (fx._x) p.move(fx._x.to, box.y) - else if (fx._cx) p.move(fx._cx.to - box.width / 2, box.y) + if (fx.destination.x) + p.move(fx.destination.x.to, box.y) + else if (fx.destination.cx) + p.move(fx.destination.cx.to - box.width / 2, box.y) box = p.bbox() - if (fx._y) p.move(box.x, fx._y.to) - else if (fx._cy) p.move(box.x, fx._cy.to - box.height / 2) - - // delete element oriented changes - delete fx._x - delete fx._y - delete fx._cx - delete fx._cy - delete fx._size - - fx._plot = element.array.morph(p) + if (fx.destination.y) + p.move(box.x, fx.destination.y.to) + else if (fx.destination.cy) + p.move(box.x, fx.destination.cy.to - box.height / 2) + + // reset destination values + fx.destination = { + plot: element.array.morph(p) + } } } @@ -87,39 +88,39 @@ SVG.FX = SVG.invent({ pos // run plot function - if (fx._plot) { - element.plot(fx._plot.at(pos)) + if (fx.destination.plot) { + element.plot(fx.destination.plot.at(pos)) } else { // run all x-position properties - if (fx._x) - element.x(fx._x.at(pos)) - else if (fx._cx) - element.cx(fx._cx.at(pos)) + if (fx.destination.x) + element.x(fx.destination.x.at(pos)) + else if (fx.destination.cx) + element.cx(fx.destination.cx.at(pos)) // run all y-position properties - if (fx._y) - element.y(fx._y.at(pos)) - else if (fx._cy) - element.cy(fx._cy.at(pos)) + if (fx.destination.y) + element.y(fx.destination.y.at(pos)) + else if (fx.destination.cy) + element.cy(fx.destination.cy.at(pos)) // run all size properties - if (fx._size) - element.size(fx._size.width.at(pos), fx._size.height.at(pos)) + if (fx.destination.size) + element.size(fx.destination.size.width.at(pos), fx.destination.size.height.at(pos)) } // run all viewbox properties - if (fx._viewbox) + if (fx.destination.viewbox) element.viewbox( - fx._viewbox.x.at(pos) - , fx._viewbox.y.at(pos) - , fx._viewbox.width.at(pos) - , fx._viewbox.height.at(pos) + fx.destination.viewbox.x.at(pos) + , fx.destination.viewbox.y.at(pos) + , fx.destination.viewbox.width.at(pos) + , fx.destination.viewbox.height.at(pos) ) // run leading property - if (fx._leading) - element.leading(fx._leading.at(pos)) + if (fx.destination.leading) + element.leading(fx.destination.leading.at(pos)) // animate attributes for (i = akeys.length - 1; i >= 0; i--) @@ -130,8 +131,8 @@ SVG.FX = SVG.invent({ element.style(skeys[i], at(fx.styles[skeys[i]], pos)) // callback for each keyframe - if (fx._during) - fx._during.call(element, pos, function(from, to) { + if (fx.situation.during) + fx.situation.during.call(element, pos, function(from, to) { return at({ from: from, to: to }, pos) }) } @@ -142,13 +143,11 @@ SVG.FX = SVG.invent({ var start = new Date().getTime() // initialize situation object - fx.situation = { - interval: 1000 / 60 - , start: start - , play: true - , finish: start + d - , duration: d - } + fx.situation.start = start + fx.situation.play = true + fx.situation.finish = start + d + fx.situation.duration = d + fx.situation.ease = ease // render function fx.render = function() { @@ -157,21 +156,37 @@ SVG.FX = SVG.invent({ // calculate pos var time = new Date().getTime() , pos = time > fx.situation.finish ? 1 : (time - fx.situation.start) / d + + // reverse pos if animation is reversed + if (fx.situation.reversing) + pos = -pos + 1 // process values fx.at(pos) // finish off animation if (time > fx.situation.finish) { - if (fx._plot) - element.plot(new SVG.PointArray(fx._plot.destination).settle()) - - if (fx._loop === true || (typeof fx._loop == 'number' && fx._loop > 1)) { - if (typeof fx._loop == 'number') - --fx._loop + if (fx.destination.plot) + element.plot(new SVG.PointArray(fx.destination.plot.destination).settle()) + + if (fx.situation.loop === true || (typeof fx.situation.loop == 'number' && fx.situation.loop > 0)) { + // register reverse + if (fx.situation.reverse) + fx.situation.reversing = !fx.situation.reversing + + if (typeof fx.situation.loop == 'number') { + // reduce loop count + if (!fx.situation.reverse || fx.situation.reversing) + --fx.situation.loop + + // remove last loop if reverse is disabled + if (!fx.situation.reverse && fx.situation.loop == 1) + --fx.situation.loop + } + fx.animate(d, ease, delay) } else { - fx._after ? fx._after.apply(element, [fx]) : fx.stop() + fx.situation.after ? fx.situation.after.apply(element, [fx]) : fx.stop() } } else { @@ -231,25 +246,25 @@ SVG.FX = SVG.invent({ } // Animatable x-axis , x: function(x) { - this._x = new SVG.Number(this.target.x()).morph(x) + this.destination.x = new SVG.Number(this.target.x()).morph(x) return this } // Animatable y-axis , y: function(y) { - this._y = new SVG.Number(this.target.y()).morph(y) + this.destination.y = new SVG.Number(this.target.y()).morph(y) return this } // Animatable center x-axis , cx: function(x) { - this._cx = new SVG.Number(this.target.cx()).morph(x) + this.destination.cx = new SVG.Number(this.target.cx()).morph(x) return this } // Animatable center y-axis , cy: function(y) { - this._cy = new SVG.Number(this.target.cy()).morph(y) + this.destination.cy = new SVG.Number(this.target.cy()).morph(y) return this } @@ -271,7 +286,7 @@ SVG.FX = SVG.invent({ // animate bbox based size for all other elements var box = this.target.bbox() - this._size = { + this.destination.size = { width: new SVG.Number(box.width).morph(width) , height: new SVG.Number(box.height).morph(height) } @@ -281,14 +296,14 @@ SVG.FX = SVG.invent({ } // Add animatable plot , plot: function(p) { - this._plot = p + this.destination.plot = p return this } // Add leading method , leading: function(value) { - if (this.target._leading) - this._leading = new SVG.Number(this.target._leading).morph(value) + if (this.target.destination.leading) + this.destination.leading = new SVG.Number(this.target.destination.leading).morph(value) return this } @@ -297,7 +312,7 @@ SVG.FX = SVG.invent({ if (this.target instanceof SVG.Container) { var box = this.target.viewbox() - this._viewbox = { + this.destination.viewbox = { x: new SVG.Number(box.x).morph(x) , y: new SVG.Number(box.y).morph(y) , width: new SVG.Number(box.width).morph(width) @@ -319,19 +334,23 @@ SVG.FX = SVG.invent({ } // Add callback for each keyframe , during: function(during) { - this._during = during + this.situation.during = during return this } // Callback after animation , after: function(after) { - this._after = after + this.situation.after = after return this } // Make loopable - , loop: function(times) { - this._loop = times || true + , loop: function(times, reverse) { + // store current loop and total loops + this.situation.loop = this.situation.loops = times || true + + // make reversable + this.situation.reverse = !!reverse return this } @@ -342,31 +361,18 @@ SVG.FX = SVG.invent({ this.animate(0) - if (this._after) - this._after.apply(this.target, [this]) + if (this.situation.after) + this.situation.after.apply(this.target, [this]) } else { // stop current animation clearTimeout(this.timeout) - // reset storage for properties that need animation - this.attrs = {} - this.trans = {} - this.styles = {} - this.situation = {} - - // delete destinations - delete this._x - delete this._y - delete this._cx - delete this._cy - delete this._size - delete this._plot - delete this._loop - delete this._after - delete this._during - delete this._leading - delete this._viewbox + // reset storage for properties + this.attrs = {} + this.styles = {} + this.situation = {} + this.destination = {} } return this |