The SceneGraph API includes several nodes to animate screen elements. You can move screen elements around, make them disappear and reappear, and change color. Animating screen elements requires the use of one of the node classes derived from AnimationBase, which must include a child interpolator node to actually achieve a specific animation effect. The animation and interpolator node classes are:
- Animation
- SequentialAnimation
- ParallelAnimation
- FloatFieldInterpolator
- Vector2DFieldInterpolator
- ColorFieldInterpolator
All animations require that you target a specific field of a specific renderable node or group of renderable nodes. You must also start (and stop, if wanted) the animation in BrightScript code by setting the value of the animation control field.
The child interpolator nodes each operate on different types of target node field values. The FloatFieldInterpolator node class operates on target node field values of type float, which includes the opacity and rotation fields. Use a FloatFieldInterpolator node to fade the target node in or out of visibility, or to rotate the target node. The Vector2DFieldInterpolator operates on target node field values of type vector2d, which includes the translation and scale fields. Use a Vector2DFieldInterpolator node to move the target node around the screen display, or to enlarge or shrink it. The ColorFieldInterpolator node class operates on target node fields of type color, so can be used to change the color of a target node that includes a color field.
The child interpolator nodes each include two field arrays: key and keyValue. These two arrays must contain the same number of elements in order for the animation to work. The key field array contains the fractional values of the animation duration at which the target node field value in the corresponding keyValue array position will be set.
The following summarizes how to achieve certain animation effects.
| Effect | Interpolator | Target Field | Notes |
|---|---|---|---|
| Move | Vector2DFieldInterpolator | translation | You can move the element off the screen entirely, or over/under other elements at different z-order positions in the SceneGraph |
| Enlarge/Shrink | Vector2DFieldInterpolator | scale | Set the target scaleRotateCenter field to specify the point around which the element enlarges/shrinks |
| Fade-In/Out | FloatFieldInterpolator | opacity | The opacity field ranges in value from 1.0 (fully opaque and visible) to 0.0 (fully transparent and invisible) by setting the alpha channel of screen elements. |
| Rotate | FloatFieldInterpolator | rotation | Set the target scaleRotateCenter field to specify the point around which the element rotates |
| Change Color | ColorFieldInterpolator | color | The interpolator for the color field ranges through the HSV color space bounded by the low and high color values set in the keyValue field array. For example, if the low color value in the keyValue field array is set to the bottom of the HSV color space, and the high color value is set to the top of the HSV color space, the interpolator will range the animation throughout the entire HSV color space, with perhaps surprising (but not unpredictable) results. You should carefully choose the low and high key values to achieve a desired color animation result. |
You can try out these concepts by downloading and installing this sample: SimpleAnimation.zip. It shows a number of animation types, including opacity, translation, and color animations.
Attachments:
SimpleAnimation.zip (application/octet-stream)
SimpleAnimation.zip (application/zip)
SimpleAnimation.zip (application/zip)
SimpleAnimation.zip (application/zip)