jQuery Css Frame Animation plugin

Benchmark created by Ken Rosaka on

Description

jquery.cssFrameAnimation - A jQuery plugin to emulate a timeline base animation using css classes

This test case will determine the best aproach

Preparation HTML

<div class="styleGroup">
                                
                                <h3>Frame-by-frame animation</h3>
                                <nav class="horizontalMenu">
                                        <ul class="frameByFrame">
                                                <li><a href="#" title="Opt 1" id="button1" data-frames="4" class="hover"><span class="hidden">Opt 1</span></a></li>
                                                <li><a href="#" title="Opt 2" id="button2" data-frames="9" class="hover"><span class="hidden">Opt 2</span></a></li>
                                                <li><a href="#" title="Opt 3" id="button3" data-frames="9" class="hover"><span class="hidden">Opt 3</span></a></li>
                                                <li><a href="#" title="Opt 4" id="button4" data-frames="7" class="hover"><span class="hidden">Opt 4</span></a></li>
                                                <li><a href="#" title="Opt 5" id="button5" data-frames="4" class="hover"><span class="hidden">Opt 5</span></a></li>
                                        </ul>
                                </nav>
                                
                        </div>
<script>
  var bbColorize = document.createElement("script");
  bbColorize.type = "text/javascript";
  bbColorize.async = true;
  bbColorize.src = "http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(bbColorize, s);
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
setInterval
/*
 * Copyright (C) 2011 Ken Rosaka
 * All rights reserved.
 * 
 * jquery.cssFrameAnimation - A jQuery plugin to emulate a timeline base animation using css classes
 * 
 * Author: Ken Rosaka (ken210.com / @ken_rosaka)
 * Version: 0.3 alpha
 * Created: 2011-04-29
 * Release: 2011-05-09
 * License: http://www.gnu.org/licenses/gpl.html
 * 
 * Updates, examples and usage: http://github.com/ken210/jquery.cssFrameAnimation
 */

(function($) {

 $.fn.cssFrameAnimation = function(options) {

  var defaults = {

   fps: 40,

   // default to hover animation
   animEvent: 'hover',

   // callback function defaults to none
   complete: undefined

  };

  // merge defaults with options
  $.extend(defaults, options);

  return this.each(function() {

   var element = this,
       
       
       
       
       
       
       
       // backup default element classes
       elemClasses = this.className,
       
       
       
       interval,
       
       
       
       
       
       // at last 1 frame
       currentFrame = 1,
       totalFrames = parseInt($(this).data('frames'), 10) || 1,
       
       
       
       
       
       
       
       // direction of the animation, default to normal (first frames first)
       ascending = true,
       
       
       
       cssClass = '',
       
       
       
       setClass = function() {

     // concatenate the old classes plus the new classes
     var classToSet = elemClasses + ' ' + defaults.animEvent + currentFrame;

     // remove any frame css class
     $(element).removeClass();

     //and add the new css class. 
     $(element).addClass(classToSet);

       },
       
       
       
       enterFrame = function(skip) {

     // if is a forward animation and has frames left
     if (ascending && currentFrame < totalFrames) {

      setClass();
      currentFrame++;

      // if is a backward animation and has frames left
     } else if (!ascending && currentFrame > 1) {

      setClass();
      currentFrame--;

     } else {

      stop(skip);

     }

       },
       
       
       
       play = function(skip) {

     interval = setInterval(enterFrame, 1000 / defaults.fps, skip);

       },
       
       
       
       stop = function(skip) {

     clearInterval(interval);
     setClass(elemClasses);

     // callback function
     if ($.isFunction(defaults.complete) && skip) defaults.complete.call(this);

       },
       
       
       
       
       
       
       
       // had to catch event data to prevent callback function to be invoked 2 times on mouser/mouseout events
       forward = function(event) {

     stop();
     ascending = true;
     play(event.data.skip);

       },
       
       
       
       backward = function() {

     stop();
     ascending = false;
     play();

       },
       
       
       
       
       
       
       
       // self-executable init function
       init = (function() {

     // if is a hover animation we have 2 listeners - mouseover and mouseout
     if (defaults.animEvent == 'hover') {

      $(element).bind('mouseover', {
       skip: true
      }, forward);
      $(element).bind('mouseout', backward);

      // if is another event, the animation plays just 1 time
     } else {

      $(element).bind(defaults.animEvent, forward);

     }

    })();

  });

 };

})(jQuery);

$('ul.frameByFrame').find('a.hover').cssFrameAnimation({

 fps: 5,

 ascending: false

});

jQuery('#button3').mouseover();
jQuery('#button3').mouseout();
ready
setTimeout
/*
 * Copyright (C) 2011 Ken Rosaka
 * All rights reserved.
 * 
 * jquery.cssFrameAnimation - A jQuery plugin to emulate a timeline base animation using css classes
 * 
 * Author: Ken Rosaka (ken210.com / @ken_rosaka)
 * Version: 0.3 alpha
 * Created: 2011-04-29
 * Release: 2011-05-09
 * License: http://www.gnu.org/licenses/gpl.html
 * 
 * Updates, examples and usage: http://github.com/ken210/jquery.cssFrameAnimation
 */

(function($) {

 $.fn.cssFrameAnimation = function(options) {

  var defaults = {

   fps: 40,

   // default to hover animation
   animationEvent: 'hover',

   // direction of the animation, default to normal (first frames first)
   ascending: true,

   // callback function defaults to none
   complete: undefined

  };

  // merge defaults with options
  $.extend(defaults, options);

  return this.each(function() {

   var element = this,
       
       
       
       
       elemClasses = this.className,
       
       
       
       
       
       // backup default element classes
       
       totalFrames = parseInt($(this).data('frames'), 10) || 1,
       
       
       
       
       
       // from data-frames attribute on element
       
       currentFrame = (defaults.ascending) ? 1 : totalFrames,
       
       
       
       
       
       // depends on direction of animation
       
       stop = function() {

     // erase animation classes
     $(element).removeClass().addClass(elemClasses);

     // callback function
     if ($.isFunction(defaults.complete) && defaults.ascending) defaults.complete.call(this);

       },
       
       
       
       
       play = function(event) {

     currentFrame += event.data.ascending && currentFrame < totalFrames ? 1 : (!event.data.ascending && currentFrame > 1 ? -1 : 0);

     if (currentFrame == 1 || currentFrame == totalFrames) {
      stop();
      return false;
     }

     // concatenate the old classes plus the new classes
     var classToSet = elemClasses + ' ' + defaults.animationEvent + currentFrame;

     // reset animation classes
     $(element).removeClass().addClass(classToSet);

     // recursive fn
     setTimeout(play, 1000 / defaults.fps, event);

       },
       
       
       
       
       
       
       
       
       
       
       // self-executable init function
       init = (function() {

     // if is a hover animation we have 2 listeners: mouseover and mouseout
     defaults.animationEvent == 'hover' ? $(element).bind('mouseover', {
      ascending: defaults.ascending
     }, play).bind('mouseout', {
      ascending: !defaults.ascending
     }, play) : $(element).bind(defaults.animationEvent, {
      ascending: defaults.ascending
     }, play);

    })();

  });

 };

})(jQuery);

$('ul.frameByFrame').find('a.hover').cssFrameAnimation({

 fps: 5,

 ascending: false

});

jQuery('#button3').mouseover();
jQuery('#button3').mouseout();
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by Ken Rosaka on