Allow multiple animations. Improved syntax. #26

Author: krazyjakee

README.md

@@ -132,27 +132,43 @@ $.keyframe.define([{
 
 **Playing an animation**
 
+The css3 animation methods available are better documented here: http://www.w3schools.com/css/css3_animations.asp
+
 ```javascript
 $(selector).playKeyframe({
     name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
     duration: 1000, // [optional, default: 0, in ms] how long you want it to last in milliseconds
     timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
-    delay: 0, //[optional, default: 0, in ms]  how long you want to wait before the animation starts in milliseconds, default value is 0
-    repeat: 'infinite', //[optional, default:1]  how many times you want the animation to repeat, default value is 1
-    direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow, default value is normal
+    delay: 0, //[optional, default: 0]  how long you want to wait before the animation starts
+    iterationCount: 'infinite', //[optional, default:1]  how many times you want the animation to repeat
+    direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow
     fillMode: 'forwards', //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
-    complete: function(){} //[optional]  Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
+    complete: function(){} //[optional] Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
 });
 ```
 
 **Playing an animation (shorthand)**
 
 ```javascript
 $(selector).playKeyframe(
-    'trapdoor-sequence 1000 linear 0 infinite normal forwards',
+    'trapdoor-sequence 1s linear 0 infinite normal forwards',
     complete
 );
-```	
+```
+
+**Playing multiple animations**
+
+```javascript
+$(selector).playKeyframe([
+    'trapdoor-sequence 1s linear 0 infinite',
+    {
+      name: 'ball-roll',
+      duration: "3s",
+      timingFunction: 'ease',
+      iterationCount: 1
+    }
+], complete);
+```
 
 **Reset the animation**
 

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "jQueryKeyframes",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "homepage": "https://github.com/jQueryKeyframes/jQuery.Keyframes",
   "license": "MIT",
   "private": false,

example/advanced/index.html

@@ -10,7 +10,8 @@
       <div class="leaf"></div>
     </div>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
-    <script src="../../jquery.keyframes.min.js"></script>
+    <script type="text/javascript" src="../../bower_components/prefixfree/prefixfree.min.js"></script>
+    <script type="text/javascript" src="../../jquery.keyframes.js"></script>
     <script src="js/animation.js"></script>
     <script src="js/init.js"></script>
   </body>

example/advanced/js/init.js

@@ -1,8 +1,8 @@
 (function() {
   $(window).ready(function() {
-    $('.cloud').playKeyframe('clouds 50000 linear 0 infinite normal forwards');
-    $('.balloon').playKeyframe('balloon 50000 ease 0 infinite normal forwards');
-    return $('.sun').playKeyframe('sun 50000 linear 0 infinite normal forwards');
+    $('.cloud').playKeyframe('clouds 40s linear 0 infinite');
+    $('.balloon').playKeyframe('balloon 40s ease 0 infinite');
+    $('.sun').playKeyframe('sun 40s linear 0 infinite');
   });
 
 }).call(this);

example/index.html

@@ -54,10 +54,10 @@
           // roll with easing
           $('.ball').playKeyframe({
             name: 'ball-roll',
-            duration: 3000,
+            duration: "3s",
             timingFunction: 'ease',
             delay: 0,
-            repeat: 'infinite',
+            iterationCount: 'infinite',
             direction: 'normal',
             fillMode: 'forwards'
           }, increment);
@@ -66,17 +66,17 @@
         case 'spin':
 
           // run spin keyframes using the shorthand method.
-          $('.ball').playKeyframe('ball-spin 500 linear 0 3 normal forwards', increment);
+          $('.ball').playKeyframe('ball-spin 500ms linear 0 3 normal forwards', increment);
 
           break;
         case 'linear':
 
           // roll with linear timing
           $('.ball').playKeyframe({
             name: 'ball-roll',
-            duration: 3000,
+            duration: "3s",
             timingFunction: 'linear',
-            repeat: 'infinite'
+            iterationCount: 'infinite'
           }, increment);
 
           break;
@@ -85,10 +85,10 @@
           // set a 2 second delay before starting
           $('.ball').playKeyframe({
             name: 'ball-roll',
-            duration: 3000,
+            duration: "3s",
             timingFunction: 'linear',
-            delay: 2000,
-            repeat: 'infinite'
+            delay: "3s",
+            iterationCount: 'infinite'
           }, increment);
 
           break;
@@ -97,11 +97,22 @@
           // only play the animation once
           $('.ball').playKeyframe({
             name: 'ball-roll',
-            duration: 3000,
+            duration: "3s",
             timingFunction: 'ease'
           }, increment);
 
           break;
+        case 'multi':
+          // play multiple animations
+          $('.ball').playKeyframe([
+            'ball-spin 500ms linear 0 6',
+            {
+              name: 'ball-roll',
+              duration: "3s",
+              timingFunction: 'ease',
+              iterationCount: 1
+            }
+          ], increment);
       }
     })
 
@@ -159,10 +170,11 @@
     <input type="button" onclick="play('delay')" value="2 Second Delay" />
     <input type="button" onclick="play('once')" value="Roll Once" />
     <input type="button" onclick="play('spin')" value="Spin" />
-    <input type="button" onclick="play()" value="Reset" />
+    <input type="button" onclick="play('multi')" value="Multiple Animations" />
     <br />
     <input type="button" onclick="pause()" value="Pause" />
     <input type="button" onclick="resume()" value="Resume" />
+    <input type="button" onclick="play()" value="Reset" />
     <br />
     <br />Callback count: <b id="cb">0</b>
     <br />

jquery.keyframes.js

@@ -109,34 +109,37 @@
 
     $.fn.playKeyframe = function(frameOptions, callback) {
 
-        if (typeof frameOptions === 'string') {
-            var frameOptSplit = frameOptions.trim().split(' ');
-            frameOptions = {
-                name: frameOptSplit[0],
-                duration: parseInt(frameOptSplit[1]),
-                timingFunction: frameOptSplit[2],
-                delay: parseInt(frameOptSplit[3]),
-                repeat: frameOptSplit[4],
-                direction: frameOptSplit[5],
-                fillMode: frameOptSplit[6],
-                complete: callback
+        var animObjToStr = function(obj){
+            obj = $.extend({
+                duration: 0,
+                timingFunction: "ease",
+                delay: 0,
+                iterationCount: 1,
+                direction: "normal",
+                fillMode: "forwards"
+            }, obj);
+            return [obj.name, obj.duration, obj.timingFunction, obj.delay, obj.iterationCount, obj.direction, obj.fillMode].join(" ");
+        };
+
+        var animationcss = "";
+
+        if($.isArray(frameOptions)){
+            var frameOptionsStrings = [];
+            console.log(frameOptions.length);
+            for(var i = 0; i < frameOptions.length; i++){
+                if (typeof frameOptions[i] === 'string') {
+                    frameOptionsStrings.push(frameOptions[i]);
+                }else{
+                    frameOptionsStrings.push(animObjToStr(frameOptions[i]));
+                }
             }
+            animationcss = frameOptionsStrings.join(", ");
+        }else if (typeof frameOptions === 'string') {
+            animationcss = frameOptions;
+        }else{
+            animationcss = animObjToStr(frameOptions);
         }
 
-        frameOptions = $.extend({
-            duration: 0,
-            timingFunction: "ease",
-            delay: 0,
-            repeat: 1,
-            direction: "normal",
-            fillMode: "forwards",
-            complete: callback
-        }, frameOptions);
-
-        var duration = frameOptions.duration;
-        var delay = frameOptions.delay;
-        var repeat = frameOptions.repeat;
-        var animationcss = "" + frameOptions.name + " " + duration + "ms " + frameOptions.timingFunction + " " + delay + "ms " + repeat + " " + frameOptions.direction + " " + frameOptions.fillMode;
         var animationkey = vendorPrefix + "animation";
         var pfx = ["webkit", "moz", "MS", "o", ""];