Skip to content

Tweening Rewrite

I rewrote the tweening engine. Through some random testing, its not too different in speed from the old one:

26 28
25 29
27 27
25 27
13 29
27 27
26 27
25 14
32 18
25 25
25 13
26 15
27 16
22 27
25 16
25 15
27 26
14 26
13 27
25 15
25 25

Somehow, nothing’s very consistant. The new one looks a bit slower (btw, the first one is the old one, the latter is the new). But its negligable. Its much better, much more reliable in terms of tweening results.

There were two ways to handle the rewrite, from the file-format level, where modifications are from the way shapes are exported in Ax.dumpshapes() (a function shared in part with onlypaths). This would affect virtually everything and cause a format incompatability the current format. Or the other way would be at the tween engine level, where it would have to do an extra step in organizing things before processing. I chose the easier (and more transparent) one, being the latter. It will continue having full support for current animations, and for the most part will render things the exact same (See previous post for details).

In the process of rewriting the engine, I split tween.js (which wasnt too big anyway) into two files: tween.js and tween_core.js. Some of the tween.js functions aren’t going to be needed in a standalone player, and I want the ability to use the same files for a standalone player as the core project. Some of the tween.js functions (Ax.tween, Ax.getSFTween) are only needed in the app and are not really “core”.

The core functions are prettymuch the same, except the tweening engine, which is confined to a single tween. What the tween engine does is to arrange the data and feed it to the “sub-core” of the system which does the actual mathematical tweening.

That “sub-core” has not changed at all during the rewrite, but the way the shapes are fed in to this has changed dramatically. Its no longer an unordered list where you simply “hope” that things are organized well (btw, this works fine as long as shapes aren’t being deleted). Here, shapes are organized by their unique identifier (ID) where they actually serve a purpose for identifying a shape.

To do this, you have to first loop through the unordered array list and put them in an object identified by their id attribute. You loop through the object with a for(… in …) loop and do the tweening magic. Then you have to loop over again and put it back in an unordered list and return it.

its a great deal more complicated than the old one, which was pretty lightweight, but things don’t output right. Its sort of like this project of mine where I had to calculate the median. I built a very simple one-liner to do the job, for the most part, it worked fine, but it was slightly off, and I ended up abandoning it.

Posted in Ajax Animator.

0 Responses

Stay in touch with the conversation, subscribe to the RSS feed for comments on this post.

Some HTML is OK

or, reply to this post via trackback.