# Yahoo! UI Library

### animation

Yahoo! UI Library > animation > ColorAnim.js (source view)

    /**
     * Anim subclass for color transitions.
     * <p>Usage: <code>var myAnim = new Y.ColorAnim(el, { backgroundColor: { from: '#FF0000', to: '#FFFFFF' } }, 1, Y.Easing.easeOut);</code> Color values can be specified with either 112233, #112233,
     * [255,255,255], or rgb(255,255,255)</p>
     * @class ColorAnim
     * @namespace YAHOO.util
     * @requires YAHOO.util.Anim
     * @requires YAHOO.util.AnimMgr
     * @requires YAHOO.util.Easing
     * @requires YAHOO.util.Bezier
     * @requires YAHOO.util.Dom
     * @requires YAHOO.util.Event
     * @constructor
     * @extends YAHOO.util.Anim
     * @param {HTMLElement | String} el Reference to the element that will be animated
     * @param {Object} attributes The attribute(s) to be animated.
     * Each attribute is an object with at minimum a "to" or "by" member defined.
     * Additional optional members are "from" (defaults to current value), "units" (defaults to "px").
     * All attribute names use camelCase.
     * @param {Number} duration (optional, defaults to 1 second) Length of animation (frames or seconds), defaults to time-based
     * @param {Function} method (optional, defaults to YAHOO.util.Easing.easeNone) Computes the values that are applied to the attributes per frame (generally a YAHOO.util.Easing method)
     */
    (function() {
       YAHOO.util.ColorAnim = function(el, attributes, duration,  method) {
          YAHOO.util.ColorAnim.superclass.constructor.call(this, el, attributes, duration, method);
       };

       YAHOO.extend(YAHOO.util.ColorAnim, YAHOO.util.Anim);

       // shorthand
       var Y = YAHOO.util;
       var superclass = Y.ColorAnim.superclass;
       var proto = Y.ColorAnim.prototype;

       proto.toString = function() {
          var el = this.getEl();
          var id = el.id || el.tagName;
          return ("ColorAnim " + id);
       };

       proto.patterns.color = /color$/i;
       proto.patterns.rgb         = /^rgb\(([0-9]+)\s*,\s*([0-9]+)\s*,\s*([0-9]+)\)$/i;
       proto.patterns.hex         = /^#?([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})$/i;
       proto.patterns.hex3        = /^#?([0-9A-F]{1})([0-9A-F]{1})([0-9A-F]{1})$/i;
       proto.patterns.transparent = /^transparent|rgba\(0, 0, 0, 0\)$/; // need rgba for safari

       /**
        * Attempts to parse the given string and return a 3-tuple.
        * @method parseColor
        * @param {String} s The string to parse.
        * @return {Array} The 3-tuple of rgb values.
        */
       proto.parseColor = function(s) {
          if (s.length == 3) { return s; }

          var c = this.patterns.hex.exec(s);
          if (c && c.length == 4) {
             return [ parseInt(c[1], 16), parseInt(c[2], 16), parseInt(c[3], 16) ];
          }

          c = this.patterns.rgb.exec(s);
          if (c && c.length == 4) {
             return [ parseInt(c[1], 10), parseInt(c[2], 10), parseInt(c[3], 10) ];
          }

          c = this.patterns.hex3.exec(s);
          if (c && c.length == 4) {
             return [ parseInt(c[1] + c[1], 16), parseInt(c[2] + c[2], 16), parseInt(c[3] + c[3], 16) ];
          }

          return null;
       };

       proto.getAttribute = function(attr) {
          var el = this.getEl();
          if (  this.patterns.color.test(attr) ) {
             var val = YAHOO.util.Dom.getStyle(el, attr);

             if (this.patterns.transparent.test(val)) { // bgcolor default
                var parent = el.parentNode; // try and get from an ancestor
                val = Y.Dom.getStyle(parent, attr);

                while (parent && this.patterns.transparent.test(val)) {
                   parent = parent.parentNode;
                   val = Y.Dom.getStyle(parent, attr);
                   if (parent.tagName.toUpperCase() == 'HTML') {
                      val = '#fff';
                   }
                }
             }
          } else {
             val = superclass.getAttribute.call(this, attr);
          }

          return val;
       };

       proto.doMethod = function(attr, start, end) {
          var val;

          if ( this.patterns.color.test(attr) ) {
             val = [];
             for (var i = 0, len = start.length; i < len; ++i) {
                val[i] = superclass.doMethod.call(this, attr, start[i], end[i]);
             }

             val = 'rgb('+Math.floor(val[0])+','+Math.floor(val[1])+','+Math.floor(val[2])+')';
          }
          else {
             val = superclass.doMethod.call(this, attr, start, end);
          }

          return val;
       };

       proto.setRuntimeAttribute = function(attr) {
          superclass.setRuntimeAttribute.call(this, attr);

          if ( this.patterns.color.test(attr) ) {
             var attributes = this.attributes;
             var start = this.parseColor(this.runtimeAttributes[attr].start);
             var end = this.parseColor(this.runtimeAttributes[attr].end);
             // fix colors if going "by"
             if ( typeof attributes[attr]['to'] === 'undefined' && typeof attributes[attr]['by'] !== 'undefined' ) {
                end = this.parseColor(attributes[attr].by);

                for (var i = 0, len = start.length; i < len; ++i) {
                   end[i] = start[i] + end[i];
                }
             }

             this.runtimeAttributes[attr].start = start;
             this.runtimeAttributes[attr].end = end;
          }
       };
    })();

Copyright © 2006 Yahoo! Inc. All rights reserved.