dojox.fx.ext-dojo.complex

Project owner:Mike Wilcox
Author: Mike Wilcox
since:1.5

Basic Description

A dojo.Animation extension which adds functionality that animates a "complex property". The primary example is the clip style: rect(10px 30px 10px 50px).

The standard animation doesn't know what to do with something like rect(...). This class identifies complex properties by they being a string and having parenthesis. If so, that property is made into a dojox.fx._Complex object and the getValue() is obtained from there.

Frankly, the clip style is not very useful nor exciting. But the dojox.fx.ext-dojo.complex class will animate any property contained within parenthesis. So it can also be used with (and is actually intended for) CSS3 properties, such as transform:

transform: rotate(10deg) translateX(0px)

or even gradients (it would only affect the properties within the color-stops):

background-image: -webkit-gradient(linear, right top, left top, color-stop(0, #ff0000),color-stop(1.0, #0000FF));

To use, simply require dojox.fx.ext-dojo.complex and complex properties will be handled in all dojo.Animations.

Example

CSS:

#cnt{
   width:300px;
   height:300px;
   border:1px solid #666;
   position:relative;
}
#words{
   width:300px;
   height:300px;
   margin:0px;
   padding:5px;
   top:0px;
   position:absolute;
   border:1px solid #000;
   background:#0000ff;
   clip:rect(10px 30px 30px 10px);
}
#words p{
   font-size:48px;
}

HTML:

<div id="cnt">
   <div id="words">
       <p>Dojo</p>
   </div>
</div>

JavaScript:

dojo.require("dojox.fx.ext-dojo.complex");

dojo.ready(function(){
   var ani = dojo.animateProperty({
       node:dojo.byId("words"),
       duration:800,
       properties:{
           clip:{start:'rect(150px 150px 150px 150px)', end:'rect(0px 300px 300px 0px)'}
       }
   }).play();
});