examples/cycle.html @@ -31,7 +31,7 @@ var attributes = {height: '400', width: '500px', opacity: 0.5, fontSize: 100, backgroundColor: "#112233", color: '#F00'}; var options = {duration: 2000, transition: FX.Transition.easeInOutBack}; - var fx = new FX.Element().setOptions(options).animate(attributes).onEnded(function(){console.log('done')}); + var fx = new FX.Element().setOptions(options).animate(attributes); fxControl(fx.cloneFor('block1'), true, true); }) examples/index.html @@ -1 +1 @@ -Subproject commit 0318532b820757dcc71ee1359d83cc48f48c8b49 +Subproject commit b422e08a5a21e81855fb7d46b7ae5e768839fd15 lib/pdoc @@ -35,7 +35,8 @@ FX.Base = Class.create((function() { this.nextTime = 0; this.playing = false; this.backward = false; - this.callbacks = {onEnded: Prototype.emptyFunction, onStarted: Prototype.emptyFunction} + this.cycle = false; + this.callbacks = {onEnded: Prototype.emptyFunction, onStarted: Prototype.emptyFunction}; this.setOptions(options); } @@ -62,10 +63,23 @@ FX.Base = Class.create((function() { } /** + * FX.Base#setCycle(type, count) -> FX.Base + * - type (String): + * - 'loop' restarts from begin when effect is done + * - 'backAndForth' starts in reverse mode when effect is done + * - 'none' no cycles + * - count (Number): number of cycles to run (default 1) + **/ + function setCycle(type, count) { + this.cycle = type == 'none' ? false : {type: type, count: count || 1, current: 0} + return this; + } + + /** * FX.Base#play() -> FX.Base * * Starts animation from current position - * fires fx:started + * fires fx:started, fx:beforeStarted **/ function play() { if (this.playing) return; @@ -123,6 +137,7 @@ FX.Base = Class.create((function() { this.fire('rewinded'); this.updateAnimation(this.backward ? 1 : 0); this.currentTime = null; + if (this.cycle) this.cycle.current = 1; return this; } @@ -135,13 +150,31 @@ FX.Base = Class.create((function() { if (this.currentTime > this.getDuration() || this.currentTime < 0) { // Force update to last position this.updateAnimation(this.currentTime < 0 ? 0 : 1); - this.stopAnimation(); - this.fire('ended'); + // Check cycle + if (this.cycle && this.cycle.current < this.cycle.count) { + if (this.cycle.type == 'loop') { + this.cycle.current++; + this.updateAnimation(this.backward ? 1 : 0); + this.currentTime = this.backward ? this.getDuration() : 0; + } + else if (this.cycle.type == 'backAndForth') { + this.reverse(); + if (this.backward) this.cycle.current++; + } + } + else { + this.stopAnimation(); + this.fire('ended'); - FX.Metronome.unregister(this); + FX.Metronome.unregister(this); - this.currentTime = null; - this.playing = false; + this.currentTime = null; + this.playing = false; + if (this.cycle) { + this.cycle.current = 0; + if (this.cycle.type == 'backAndForth') this.backward = !this.backward; + } + } } else { var pos = this.options.transition(this.currentTime / this.getDuration(), this.currentTime, 0, 1, this.getDuration()); @@ -179,6 +212,7 @@ FX.Base = Class.create((function() { return { initialize: initialize, setOptions: setOptions, + setCycle: setCycle, getDuration: getDuration, play: play, stop: stop, src/base/base.js examples/pulsate.html 8606061045a465ca6d70d2102620166168c2315d sgruhier sgruhier@mac.com http://github.com/xilinus/protofx/commit/f75b1543c6af465fb3cd4ff0a1fe16e40890c3ff f75b1543c6af465fb3cd4ff0a1fe16e40890c3ff 2008-12-13T03:59:15-08:00 2008-12-13T03:59:15-08:00 setCycle done 3f7d13243c14e04c536d0c4908094c2374e57c8b sgruhier sgruhier@mac.com