SemanSemantic-UItic-UI/source/modules/behavior/animation.js

/*  ******************************
  Animation
  Author: Jack Lukic
  Notes: First Commit May 24, 2012

  A collection of FX/Animations

******************************  */

;(function ( $, window, document, undefined ) {


  // handles simplification of animation settings
  $.animationSettings = function(settings, duration, easing, complete) {
    // no parameters
    if(duration === undefined) {
      settings = settings;
    }
    // duration is actually settings object
    else if(typeof duration == 'object') {
      settings = $.extend({} , settings, duration);
    }
    // easing is actually complete callback
    else if(typeof easing == 'function') {
      settings = $.extend({} , settings, {
        duration: duration,
        complete: easing
      });
    }
    // easing is actually settings
    else if(typeof easing == 'object') {
      settings = $.extend(true, {} , settings, {duration: duration}, easing);
    }
    //
    else {
      settings = $.extend({} , settings, {
        duration : duration,
        easing   : easing,
        complete : complete
      });
    }
    return settings;
  };

    /*  ******************************
               Pop In -
        Animates one at a time
              scaling in
  ******************************  */

  $.fn.popIn = function(duration, easing, complete) {
    var
      settings       = $.animationSettings($.fn.popIn.settings, duration, easing, complete),

      $this          = $(this),
      totalElements  = $this.size(),
      currentElement = 0,
      callback = function() {
        var
          elementsDoneAnimating = ($this.filter(':animated').size() == 0)
        ;
        currentElement++;
        $(this)
          .css('transform', '')
          .removeClass(settings.className.init)
        ;
        $.proxy(settings.eachComplete, this)();
        if(currentElement == totalElements) {
          $.proxy(settings.complete, $this)();
        }
      },
      animate = function(index) {
        $(this)
          .delay(settings.delay * index)
          .animate({
            opacity   : settings.endOpacity,
            transform : 'scale('+ settings.endScale +')'
          }, settings.duration, settings.easing, callback)
        ;
      }
    ;
    if(settings.isLegacyBrowser) {
      $this
        .show()
      ;
    }
    else {
      $this
        .addClass(settings.className.init)
        .show()
        .css({
          opacity   : settings.startOpacity,
          transform : 'scale('+ settings.startScale +')'
        })
        .each(animate)
      ;
    }
    return $(this);
  };

  $.fn.popOut = function(duration, easing, complete) {
    var
      parameters = $.animationSettings($.fn.popIn.settings, duration, easing, complete),
      // flip some defaults
      defaults   = {
        complete: function() {
          $(this).hide();
          $.proxy(parameters.complete, this)();
        },
        startOpacity : parameters.endOpacity,
        endOpacity   : 0,
        startScale   : parameters.endScale,
        endScale     : parameters.startScale
      },
      settings = $.extend(true, {}, parameters, defaults)
    ;
    $(this)
      .popIn(settings)
    ;
  };

  $.fn.popIn.settings = {

    // legacy browser
    isLegacyBrowser: ($.browser.msie && parseInt($.browser.version) <= 8),

    // class given until animation ends
    className: {
      init    : 'init'
    },
    // duration of each animation
    duration     : 450,
    // easing for animation
    easing       : 'easeOutExpo',
    // delay before each
    delay        : 100,

    startOpacity : 0,
    endOpacity   : 1,

    startScale   : 0.7,
    endScale     : 1,
    // called after each element completes
    eachComplete : function(){},
    // called after entire chain of animation completes
    complete     : function(){}
  };


  $.fn.kenBurns = function(duration, easing, complete) {
    var
      settings = $.animationSettings($.fn.kenBurns.settings, duration, easing, complete),
      module = {

        randomPosition: function(starting, rangeMin, rangeMax) {
          var
            rangeMax = (rangeMax !== undefined)
              ? rangeMax
              : rangeMin,
            number   = Math.random() * ((starting + rangeMax) - (starting - rangeMin) ) + (starting - rangeMin)
          ;
          return parseInt(number, 10);
        },

        animate: function() {
          var
            startingPosition = {},
            endingPosition   = {},
            startingScale,
            endingScale
          ;

          startingPosition = (settings.useStartPosition)
            ? {
                x: parseInt( $(this).css('background-position-x'), 10),
                y: parseInt( $(this).css('background-position-y'), 10)
              }
            : {
                x: module.randomPosition(50, settings.xRange),
                y: module.randomPosition(50, settings.yRange)
              }
          ;
          // determine direction of animation based on origin position
          endingPosition.x = (startingPosition.x > 50)
            ? module.randomPosition(startingPosition.x, settings.xMaxTravelDistance, -settings.xMinTravelDistance)
            : module.randomPosition(startingPosition.x, -settings.xMinTravelDistance, settings.xMaxTravelDistance)
          ;
          endingPosition.y = (startingPosition.y > 50)
            ? module.randomPosition(startingPosition.y, settings.yMaxTravelDistance, -settings.yMinTravelDistance)
            : module.randomPosition(startingPosition.y, -settings.yMinTravelDistance, settings.yMaxTravelDistance)
          ;

          /*console.log(startingPosition.x + '% ' + startingPosition.y + '%');
          console.log(endingPosition.x + '% ' + endingPosition.y + '%');*/

          $(this)
            .css({
              backgroundPosition: startingPosition.x + '%',
              backgroundPositionY: startingPosition.y + '%'
            })
            .stop()
            .animate({
              backgroundPosition: endingPosition.x + '%',
              backgroundPositionY: endingPosition.y + '%'
            }, settings.duration, settings.easing, settings.complete)
          ;
        }

      }
    ;
    if(!settings.isLegacyBrowser) {
      $(this)
        .each(module.animate)
      ;
    }
    return $(this);
  };

  $.fn.kenBurns.settings = {

    // legacy browser
    isLegacyBrowser    : ($.browser.msie && parseInt($.browser.version, 10) <= 8),

    // duration of animation
    duration           : 10000,
    // easing for animation
    easing             : 'linear',
    useStartPosition   : false,

    xRange             : 40,
    yRange             : 20,

    xMinTravelDistance : 30,
    xMaxTravelDistance : 60,

    yMinTravelDistance : 20,
    yMaxTravelDistance : 40,

    // not yet implemented, need css hook for background-size
    scale              : 0.1,

    // called after entire chain of animation completes
    complete         : function(){}
  };


})( jQuery, window , document );