Chapter 10. Creating and Applying Animations

Table of Contents

Animation Action
Timer Keyframe Animations
Screen Transition Animations

Animation Action

The Engine supports user defined animations using the animation action, gra.animate. This action starts executing an animation immediately, monitors the animation, and applies the specified changes as they have been defined by the user in Designer.

An animation is a named block of operations that will perform changes on Storyboard data values at a pre-determined frame rate. The individual data changes that occur within an animation are referred to as animation steps.

An animation step contains the following information:


The key is a reference to the data object that is going to be changed over the course of the animation. In general, keys are numeric items such as x or y position, width, height or transparency (alpha) values. However, it is possible with 0 duration animation steps to apply a change to any variable at a point in the animation. This includes text or images.


This is the time in milliseconds from the time that the animation was started that this particular change will start to occur.


This is the time in milliseconds over which the change will occur. This value may be 0 for changes that are not numeric (i.e. text or image values) or if the animation step is defined to occur at the start or end of the animation block.


For non-zero duration animation steps, this is the change curve that will be applied to the numeric value from its start value to the end value. Example rates include linear, ease in (easein), ease out (easeout), ease in out (easeinout) or bounce.

starting value

This represents the starting value of the animation. The starting value can be either a specific value or variable reference, or it can be specified as the current value of the animation key at the time that the animation starts. Using the current value is good for animations that need to work generically to achieve some end value.

end value

This represents the end value of the animation. The end value can be either a specific value or variable reference or it can be specified as an offset from the starting value rather than as an absolute value. Using an offset (or delta) in an animation makes it easy to perform incremental animations on objects.

Animation steps are all synchronized within an animation block so that their data changes will occur in a synchronized manner. While it is possible to specify arbitrary time offsets and durations, these values will be mapped onto the nearest synchronized frame slot. The frame slots are dictated by the frame rate of the animation block.

Animation instances can be labelled with a string id which is an identifier used to provide exclusive execution. It is possible for many animations to run concurrently, however if two animations have the same id value, then only the last one invoked will actually run. For example, if you have an animation to shrink and grow a control, then you only want one of either the shrink or grow operations to occur at one time. This can be achieved by having the shrink and grow animation actions share the same identifier.

Animations may be stopped at any time by using the animation stop action, gra.animate.stop.