Client-side animation API for Toolkit

To give you some perspective where I’m coming from, I’ll quickly tell you who I am. So, I’m a developer at IT Mill, focusing mostly on the client-side development with GWT, and the main culprit for our default theme. This is just to give you some reference to my opinions and suggestions.

I’ve been developing our client-side engine with GWT from the start, creating new components and doing fixes here and there, but my main responsibility is making IT Mill Toolkit components look and feel good and perform reliably (at least on the surface :)) While our current default theme ‘looks’ pretty decent (easy for me to say), the ‘feel’ part is somehow a bit missing.

I believe this is partly because we don’t use any animations in our Widgets. Lately I’ve been planning on starting my own little pet project in our incubator, with the target of adding a small animation API for our client-side widgets.

I realize that there are some animation classes straight in GWT 1.5, and that several animation frameworks for GWT are being developed across the net, but after a quick glance, none of them offered the thing I was after. But please, if you find my work redundant after your examination, correct me if I’m wrong.

So here are my requirements for this API.

The thing that I’m after is a simple animator that will animate any HTML element from it’s current visual state to another, specified by the developer. More simply, animate an element’s CSS attribute from it’s current value to a specified value.

The animator should of course animate multiple CSS attributes at once, if needed (e.g. ‘top’ and ‘left’ attributes at the same time).

I should be able to specify the attributes either as a map, or as a string representing a CSS classname which will contain the end values of the animation (to help theme developers to specify animations more easily, without recompiling the code).

Simultaneous as well as consecutive animations should be supported.

I won’t be including any code snippets here, but you can see what I have done so far by checking out the project folder from the IT Mill Toolkit incubator branch here: http://dev.itmill.com/browser/incubator/animation-api

If I (or should I say we ;)) end up with a good API on the client side, I have some vague plans to perhaps offer some animation API’s for the server-side as well. But that’s another project (which involves heated debates inside our r’n’d team whether or not these kinds of additions belong to the Toolkit UI Library API).

Feel free to comment and add suggestions!

OK, so after another quick glance, I decided to extend the GWT’s Animation class. It turned out to be so much in the lines of what I needed, that an extension to it should be enough.

So, are we talking about simple tweening, where e.g. two rgb-triplets fade smoothly from one to the other? If so, I would imagine a linear transition is in the plans. Have you also thought about a spline-typed transition, where it would not be linear, but for example constantly accelerating/decelerating?

Sure, this would add complexity and power needs to the client side, but, then again, it would be easier to do a pulsating red button, if someone would want to :slight_smile:

Yup, that’s right.

Simple tweening indeed, but not with a linear transition. I had planned to use sinusoidal based easing, but since I reverted back to using GWT’s own Animation class, it already specifies a sufficient interpolation algorithm. Though, I’m not sure what it is based on, it isn’t a linear algorithm.

You can see a demo of the motion from GWT’s examples: http://gwt.google.com/samples/Showcase/Showcase.html#CwAnimation

It is possible to override the default interpolation method, so defining your own ease-ins and ease-outs should be trivial.

I hope this won’t bring much more complexity, and I aim for ease-of-use with the API (no inheritance needed, as with GWT’s animation class).

A simple use-case should be like so:

Animation fadeOut = new Animation(getElement(), new CSSRule("{opacity:0}")); fadeOut.run(); And what comes to client power needs, usage of animations should of course be carefully evaluated, and excess use of anything is bad :slight_smile:

How about not using name Animation for the base-class as GWT already uses that name? Also I did not fully understand why GWT animation base-class would not be good enough?

So instead of

Animation fadeOut = new Animation(getElement(), new CSSRule("{opacity:0}"));
 fadeOut.run();
Animation fadeOut = new CSSAnimation(getElement(), new CSSRule("{opacity:0}"));
 fadeOut.run(1000);

Anyways - how are you planning to implement interpolating between current css state and one given as parameter? Are you actually parsing that CSS fragment and then just interpolating between the integer property values (opacity in this case)?

Let’s use IAnimation instead then, should fit in nicely with the rest :slight_smile:

But the added extra to GWT’s Animation class is that you don’t need to specify the onUpdate-method yourself. The IAnimation class indeed parses the CSSRule properties and then interpolates to that value.

The current CSS state should be gettable with el.currentStyle (IE) or el.computedStyle (others). The parsing of those values is the hardest part here, since I need to convert all size units into pixels first. Color values are another though one as well.

And yes, the previous post was mine (forgot to login).

As a FYI, although I’m a totally green when it comes to the client side of TK, meaning I cannot provide much insight to this discussion, I’m interested in this feature and going to track its progress. I’m currently planning on doing a card game with Toolkit, and can find uses for animation pretty easily.

So, Jouni, if you need some testing, I’ll try to help you out :slight_smile:

I am all for the idea, but in my opinion IAnimation name has two downsides:

  1. It gives one an impression that all Toolkit animations should extend IAnimation - I do not see why this should be the case. gwt Animation class seems to have all the functionality needed for Toolkit animations (for example I added trivial ShadowAnimation to PopupView without a problem).

  2. Your idea of automatic CSS interpolation is more general than Toolkit. It could be used directly in GWT apps that are not using our Toolkit. IAnimation name sounds like it is bound to our toolkit.

In summary - great idea, but I would call it CSSAnimation (or something like that) instead of IAnimation and would not require animations used in IT Mill Toolkit to extend it.

[quote=Joonas Lehtinen]
I am all for the idea, but in my opinion IAnimation name has two downsides
[/quote]Agreed, good points indeed. CSSAnimation might be the right name for this.