Reproducing A Clever Animation Product, Part 10

Continuing on from yesterday, once we get the transforms into a nice compact list in time order by type and by element we can go ahead and define the tweens for each type of transformation stream. However, I noticed that I had a particular type of tween that took extra parameters.

The addTransformToList function, however, only allows for a single beginning and ending state parameter. What I chose to do today, which was needlessly complex, was to make the addTransformToList function handle strings with multiple parameters, separated by commas, if they are enclosed in parentheses. Here’s how the calls look, next to the original tween definitions:

Here you’ll notice that the starting and ending state parameters for the scale transformation are in the form "(1.0,1.0)" and "(2.0,2.0)". This is needlessly complex because I could just provide a single value for the scale factor in the addTransformToList function and use it for both the X and Y scale factors in the bcDefineScaleTween function. If I want to be able to manipulate the X and Y scales independently I can just use the scaleX and scaleY transforms, couldn’t I?

Well, I thought it was a good exercise so this is the way I did it. I wouldn’t do this a second before it was needed in a professional environment (in Agile and TDD space you don’t do anything until you absolutely need to, which is supposed to prevent you from taking detours to guild various lilies), but if the point of these exertions is just to learn then the occasional lily will get guilded.

Since I’ve chosen to support this type of compound parameter (and note that different CSS transform functions may take 2, 3, 4, 6, or even 16 parameters) I also found it necessary to do some checking to see if the formats are good. Note the calls to the parseStateDef near the beginning of the addTransformToList function. (I’m using the alert function as a placeholder. I would do something more elegant or “real” if I was going to release this code into the wild.)

The code that actually does the parsing and checking is here. For now I only test to see if the parameters are valid numbers, strings, or booleans. Everything else I don’t worry about for now. If the input value is a string I check to see if the first character is an open parenthesis, in which case it is sent off to the parseStringMultiple function to be broken into parts which are themselves tested separately.

OK, if I don’t get sidetracked I should be able to stitch everything back together and make it run again tomorrow.

This entry was posted in Tools and methods and tagged , , . Bookmark the permalink.

Leave a Reply