I got my copy of RAD Studio XE2 last night and since then I’ve been busy exploring what it has on offer, especially FireMonkey. One of the exciting things about it is animations and how easy it is to create them.
I’ll start by walking you through a rather simple (and frankly, pointless) application and then show some of the options in more detail.
So, fire up Delphi and create a new application, using the option to create a FireMonkey application. On the tool palette select any of the components under Standard and plonk it on the form. I chose a check box, but it doesn’t really matter.
All that should be pretty familiar, but here’s where things start to diverge. In FireMonkey any control can have children. That has some interesting implications, but for now go back to the tool palette select the TFloatAnimation (under the Animations page). Drop it on the page by clicking on top of the checkbox you just added.
The first thing you’ll probably notice (or not notice) is that it doesn’t show up in the form designer, but you should see it added as a child of the check box in the structure pane. If not just drag and drop it within the structure pane to where it should be.
Now, making sure you’re editing the FloatAnimation in the Object Inspector, edit the following properties:
Duration: 4
Enabled: True
Loop: True
PropertyName: Position.X
StopValue: 400
Hit F9 to compile and run, and you’ll have a check box repeatedly sliding across the window.
And yes, animation really is that easy. It’s pointless, of course, to animate check boxes, but FireMonkey includes a wide array of shapes in both 2D and 3D which can be used to create swish designs.
The TFloatAnimation animates a simple numerical value. Having used Delphi for years I wanted to say integer value there but values in FireMonkey are actually doubles, as they need to be for the complex scaling and animation that is going on there.
Look in the Animations page of the palette and you’ll see other animations for such things as simple colours, colour gradients and rectangles and the intriguing TPathAnimation, which I’ve yet to investigate but appears to be able to do some complex scripting.
Lets take a more detailed look at the TFloatAnimation and what it can do (and other animations have a pretty similar set of properties).
PropertyName is the name of the property to animate and below is what shows as available for my check box control:
It seems to do a good job of finding every available usable property.
Interestingly, PropertyName is actually a string property. So, you can easily set it at run time. I did a test, and if it’s not a valid property name, FireMonkey just ignores it, rather than raising an exception.
Interpolation lets you choose the algorithm for the animation. The default is linear, the full list of options is below:
In the example above we checked the Enabled property to initiate the animation. In code you can also use the Start and Stop methods to start and stop the animation. Or you can investigate the Trigger and TriggerInverse properties.
These start and stop the animation depending on the value of a property. Sadly the choice of properties appears to be pre-defined, though I imaging there must be some way to modify this with custom controls, or by subclassing the Animation control. Here are the available values:
Interestingly, you can specify more than one option, eg. ‘IsFocused=true;IsOpen=true’.
However, I did notice some odd behaviour in my testing. Setting on Focused=true as a trigger for the example above, if I tabbed into the control all worked fine, but selecting it caused the animation to skip to the end and stop (even if Repeat was set). I’m sure this will be fixed in an update.
The TriggerInverse value sets a trigger to run the animation backwards. However, you may prefer to create two animation objects with opposing triggering options to use a non-linear animation. Putting that in simple terms, if you use a ‘bounce’ interpolation (which causes the value to bounce around the start value), using TriggerInverse would cause it to bounce backwards, but using a second animation it would (could) bounce around the final value before getting back to the start value.
As to the other significant properties, Delay and Duration set a pause before starting the animation, and the time (in seconds) the animation takes.
AutoReverse and Loop should be fairly obvious. I noticed in testing that if I set AutoReverse to true the animation would start at the finish point. But further investigation appears to show that that was just an effect of the animation starting before the controls had been fully drawn on screen.
StartValue and StopValue are again obvious. Inverse runs the animation backwards.
One final property is AnimationType. Going back to our example with the itBounce interpolation, atIn caused the value to bounce around the start value eventually stopping at the stop value. atOut smoothly moves from the start value and bounces around the stop value. atInOut does both of the above: bouncing around both the start and top values.