Fixes to stop and more test cases

README.md

@@ -87,7 +87,7 @@ Options can be set when instantiating Sprite or overridden when using the `play`
 - `fps` (Number) - Frames per second. Default: 12.
 - `loop` (Boolean||Number) - Boolean or a Number for how many times to loop. Default: true.
 - `reverse` (Boolean) - If the animation plays in reverse. Default: false.
-- `from` (Number) - Frame number to start from.
+- `from` (Number) - Frame number to start from and, if `loop` is false|number the frame it'll stop on.
 - `onFrame` (Function(currentFrame, numLoops)) - Callback on each frame.
 - `onComplete` (Function) - Callback once the animation is complete.
 

sprite.js

@@ -157,14 +157,16 @@
 	var Sprite = function(el, frames, options){
 		var isPlaying = false,
 			currentFrame = 0,
-			framePoints, animationTick, tickCount;
+			currentOptions, framePoints, 
+			animationTick, tickCount;
 
 		this.el = el;
 		this.options = mergeObjects({}, Sprite.defaults, options);
 		this.numFrames = frames.length ? 
 						 frames.length : 
 						 Math.floor(options.imageWidth/frames.width) * Math.floor(options.imageHeight/frames.height);
 		framePoints = !isArray(frames) ? convertToFramePoints(frames, this.numFrames) : frames;
+		currentOptions = mergeObjects({}, this.options);
 
 		// Methods
 
@@ -216,22 +218,22 @@
 
 			var playOptions = mergeObjects({onComplete: fun, onFrame: fun}, this.options, options),
 				that = this,
-				playFrames = playOptions.reverse ? framePoints.slice(0).reverse() : framePoints,
 				loopCount = 0;
 
 			tickCount = 0;
 			currentFrame = this.frame(playOptions.from || currentFrame);
+			currentOptions = mergeObjects({}, playOptions);
 
 			/**
 			 * Each time a frame is entered
 			 * @private
 			 */
 			var spriteTickHandler = function(){
-				updateFrame.call(that, playFrames[currentFrame]);
-				currentFrame = (currentFrame += 1) % that.numFrames;
+				currentFrame = (playOptions.reverse ? that.numFrames + (currentFrame - 1) : currentFrame + 1) % that.numFrames;
+				updateFrame.call(that, framePoints[currentFrame]);
 				playOptions.onFrame.call(that, currentFrame, loopCount);
 
-				if (currentFrame === 0) {
+				if (currentFrame === (playOptions.from || 0)) {
 					loopCount += 1;
 					if (!playOptions.loop || loopCount === playOptions.loop) {
 						that.stop();
@@ -265,12 +267,12 @@
 			options.frame = isNumeric(options.frame) ? options.frame : currentFrame;
 			clearRequestInterval(animationTick);
 			isPlaying = false;
-
+			
 			if (!options.animated) {
 				this.frame(options.frame);
 				options.callback.call(this);
 			} else {
-				this.play({from: options.frame, onFrame: function(currentFrame){
+				this.play({reverse: currentOptions.reverse, fps: currentOptions.fps, onFrame: function(currentFrame){
 					if (options.frame === currentFrame) {
 						that.stop({callback: options.callback});
 					}

tests/spec/SpriteSpec.js

@@ -150,16 +150,18 @@ describe('Actual run of play', function(){
 		// sprite.play({fps: 12, loop: false});
 		// sprite.play({fps: 10, from: 22}); // There is no 22
 		// sprite.play({loop: 2});
+		// sprite.play({from: 4, loop: 1});
 		// sprite.play({fps: 4, reverse: true});
 		// sprite.play({loop: 2, reverse: true});
 		// sprite.play({fps: 4, reverse: true, loop: false});
 
 		// sprite.play({from: 10}).stop();
-		// sprite.play({fps: 4, reverse: true, from: 10}).stop({frame: 7, animated: true});
+		// sprite.play({from: 10}).stop({frame: 0}).play();
 		// sprite.play({fps: 4}).stop({frame: 7, animated: true});
+		// sprite.play({fps: 4, reverse: true, from: 10}).stop({frame: 10, animated: true});
+		// sprite.play({fps: 4, reverse: true, from: 10}).stop({frame: 0, animated: true});
 
 		// sprite.play({from: 10}).stop({frame: 14});
-		// sprite.play({from: 2}).stop({frame: 0});
 		// sprite.play({from: 3}).stop({frame: 10, animated: true, callback: function(){
 		// 	console.log('stop callback');
 		// }});
@@ -171,6 +173,19 @@ describe('Actual run of play', function(){
 		// 	 	console.log('complete');
 		// 	}
 		// });
+		// sprite.play({reverse: true, loop: 2,
+		// 	onFrame: function(currentFrame, numLoops){
+		// 		console.log('onFrame: ' + currentFrame + '\t' + numLoops);
+		// 	},
+		// 	onComplete: function(){
+		// 	 	console.log('complete');
+		// 	}
+		// });
+		// sprite.play({
+		// 	onComplete: function(){
+		// 	 	console.log('I should never be called...');
+		// 	}
+		// });
 	});
 
 });