Fixing animation playing in reverse

tusharghate · Sep 23, 2016 · e30b65f · e30b65f
1 parent 7fbb6e9
commit e30b65f
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 29 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,5 @@
+.DS_Store
+
 # Logs
 logs
 *.log
@@ -25,4 +27,4 @@ build/Release
 # Dependency directory
 # https://www.npmjs.org/doc/misc/npm-faq.html#should-i-check-my-node_modules-folder-into-git
 node_modules
-bower_components
+bower_components
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-simple-sprite",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "authors": [
     "Tushar Ghate <[email protected]>"
   ],

diff --git a/demo/index.html b/demo/index.html
@@ -6,48 +6,48 @@
   <body ng-controller="AppController as appController">
   	<div>
         <h3>Basic Example</h3>
-	    <simple-sprite 
-	    	src="./images/alien-jump.png" 
-	    	frame-width="100" 
-	    	frame-height="155" 
-	    	frames="8" 
-	    	repeat="true" 
+	    <simple-sprite
+	    	src="./images/alien-jump.png"
+	    	frame-width="100"
+	    	frame-height="155"
+	    	frames="8"
+	    	repeat="true"
 	    	speed="50">
 	    </simple-sprite>
 	</div>
-      
+
     <div>
         <h3>Using frames-per-row</h3>
-	    <simple-sprite 
-	    	src="./images/alien-jump-rows.png" 
-	    	frame-width="100" 
-	    	frame-height="155" 
-	    	frames="8" 
+	    <simple-sprite
+	    	src="./images/alien-jump-rows.png"
+	    	frame-width="100"
+	    	frame-height="155"
+	    	frames="8"
             frames-per-row="4"
-	    	repeat="true" 
+	    	repeat="true"
 	    	speed="50">
 	    </simple-sprite>
 	</div>
 
 	<div>
         <h3>Non-Repeating</h3>
-	    <simple-sprite 
-	    	src="./images/alien-rocket.png" 
-	    	frame-width="150" 
-	    	frame-height="348" 
-	    	frames="3" 
-	    	repeat="false" 
+	    <simple-sprite
+	    	src="./images/alien-rocket.png"
+	    	frame-width="150"
+	    	frame-height="348"
+	    	frames="3"
+	    	repeat="false"
 	    	speed="100">
 	    </simple-sprite>
 	</div>
   </body>
 
   <script type="text/javascript" src="../bower_components/angular/angular.min.js"></script>
-  <script type="text/javascript" src="../dist/angular-simple-sprite.min.js"></script>
+  <script type="text/javascript" src="../dist/angular-simple-sprite.js"></script>
   <script type="text/javascript">
 	  (function() {
 	  	angular
-	  		.module('my-app', ['simple-sprite'])  		
+	  		.module('my-app', ['simple-sprite'])
 	  		.controller('AppController', AppController)
 
 	  	function AppController() {

diff --git a/dist/angular-simple-sprite.js b/dist/angular-simple-sprite.js
@@ -36,8 +36,8 @@
                 };
 
                 /**
-                 * Initializes the sprite with default CSS styles and options passed in by 
-                 * the user. Starts the sprite animation. 
+                 * Initializes the sprite with default CSS styles and options passed in by
+                 * the user. Starts the sprite animation.
                  */
                 function init() {
                     src = $scope.src;
@@ -67,7 +67,7 @@
                 function animate() {
 
                     /**
-                     * Returns whether the sprite animation has completed or not. 
+                     * Returns whether the sprite animation has completed or not.
                      */
                     function isAnimationComplete() {
                         var toReturn = false;
@@ -91,7 +91,7 @@
 
                     animationInterval = $window.setInterval(function() {
                         // Update the sprite frame
-                        element.css("background-position", spritePosition.x + "px" + " " + spritePosition.y + "px");
+                        element.css("background-position", -spritePosition.x + "px" + " " + spritePosition.y + "px");
 
                         // Determine if we should loop the animation, or stop, if the animation is complete
                         if (isAnimationComplete()) {

diff --git a/dist/angular-simple-sprite.min.js b/dist/angular-simple-sprite.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-simple-sprite",
-  "version": "0.0.0",
+  "version": "1.0",
   "description": "An Angular directive for creating simple sprites.",
   "main": "GruntFile.js",
   "dependencies": {