[dojo-contributors] dojo.fx.lite

Dan Pupius dan.pupius at gmail.com
Fri Apr 21 13:05:35 EDT 2006

Hey, much lighter :)  Just a couple of points.

In lite/Animation.js, the curve object should be optional.  It'd be nice to
be able to pass in just start and end coordinates, and default to the lite
Line.  This seems a little heavy:
anim = new dojo.fx.lite.Animation(handlers, duration,
                prop.curve||new dojo.fx.lite.Line(prop.start, prop.end),
                easing, prop.repeatCount, prop.rate);

In lite.js slideTo() seems too complicated a method for animating two
properties.  I think you'll find that people will end off creating an
animation for each property which is not ideal.

I suggested to Alex the idea of extending the Animation object and have an
interface something like this:
anim = new dojo.fx.lite.PropertyAnimation(node, [0, 0, 10, 200, 0], [50, 50,
200, 200, 100], ['left', 'top', 'width', 'height', 'opacity'], duration);

Or maybe:
 PropertyAnimation(node, duration, easing, prop1, prop2, ..., propN)
where propX is like you have:
{ property: "opacity", start: 0, end: 1 }

Then slideTo, resizeTo or colourFade functions become nearly as short as

On 4/21/06, Bryan Forbes <bryan at reigndropsfall.net> wrote:
> Dear fellow developers,
>     About 2 or 3 weeks ago, I was charged with the task (ok, I took the
> task on voluntarily) of coming up with a lite version of our animation
> library.  Attached is what I have come up with after consulting both
> Alex and Tom.  I have tried to make this as powerful as possible, while
> keeping the syntax simple.  With the help of Dan Pupius (through Alex),
> I have also added some simple easing functions to this animation library
> and I've tried to make it easy to use your own easing functions.  The
> real workhorse of this animation library is
> dojo.fx.lite.propertyAnimation.  The syntax is as follows:
> dojo.fx.lite.propertyAnimation([
>        { property: /*String naming the property to change*/ prop,
>          node: /*DOMNode*/ node,
>          handlers: /*Object of event functions*/ handlers,
>          start: /*starting value*/ start,
>          end: /*ending value*/ end,
>          units: /*String (defaults to "px")*/ units,
>          curve: /*an optional curve object*/,
>          repeatCount: /*int*/,
>          rate: /*int*/ }, ...],
>        duration, easing);
>     For an example of how this is used, check out dojo.fx.lite.fadeIn
> or any of the other animations defined in lite.js.
>     One other thing I have included is the ability to easily combine
> and chain animations together.  Basically, it is as follows:
> To combine two or more animations together:
> var comb = new dojo.fx.lite.Combine(anim1, anim2, anim3);
> comb.play();
> To chain (play one after another) animations together:
> anim1.chain(anim2.chain(anim3)).play();
> To combine with a chain:
> anim1.chain(anim2, anim3.chain(anim4)).play();
> The last one will play the animations in this order:
> anim1 -> anim2 + (anim3 -> anim4)
>     Both combine and chain can take either a Combine or an Animation so
> there is no need to convert from one to another.  Please take a look at
> this and let me know what you think.  There is a working demo at
> http://www.reigndropsfall.net/fx.lite/test.html.  As you can see, this
> only pulls in 8 files (excluding fx/lite.js and fx/lite/Animation.js).
>     Another thing that need to be discussed is a new namespace for
> dojo.fx.lite (since that's not a very lite namespace).  Alex suggested
> to me dojo.ngfx (for Next Generation FX) or dojo.lfx.  I was thinking
> dojo.lx, but I'd like to hear some more ideas.  Anyway, take a look at
> the code I have attached (the .zip should be extracted into src/fx) give
> me some feedback.  Thanks!
> -Bryan Forbes
>  Hello!1
> Hi!
> Yo!
>  Hello!2
> Hi!
> Yo!
>  Hello!3
> Hi!
> Yo!
> _______________________________________________
> dojo-contributors mailing list
> dojo-contributors at dojotoolkit.org
> http://dojotoolkit.org/mailman/listinfo/dojo-contributors
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.dojotoolkit.org/pipermail/dojo-contributors/attachments/20060421/7877fc07/attachment.htm 

More information about the dojo-contributors mailing list