Using FireMonkey Animation Effects

From RAD Studio
Jump to: navigation, search

Go Up to FireMonkey Quick Start Guide - Using Image and Animation Effects


FireMonkey provides many different types of built-in animation effects that modify the value of the selected property over time.

Examples of animation effects:

Type of property Animation Effects class
Any property that is an integer. TIntAnimation
Any property that is a real number. TFloatAnimation
Location of component defined by a TBounds property. TRectAnimation
Any string or integer property that contains a color. TColorAnimation
A gradient (type TGradient) TGradientAnimation
A bitmap picture TBitmapAnimation

In this tutorial, you will use several basic animation effects in a FireMonkey application.

Step 1: Using TFloatAnimation to Change a Floating Property Value

In FireMonkey, any property that uses floating numbers can be modified using animation effects through TFloatingAnimation. So, let’s change some values using animation effects.

  1. Create a new application using:
  2. Place a TRectangle component on the Form Designer. To do so, type rec in the search box on the Tool Palette, and then double-click the TRectangle component:
    Select TRectangle.png
    Selecting a TRectangle component on the Tool Palette
    WhiteSpace50.png
    TRectangle on Form.png
    TRectangle component on the Form Designer
    WhiteSpace50.png
  3. After you place a TRectangle component on the Form Designer, you see several properties that have a film icon (FilmIcon.png) in the Object Inspector. The film icon indicates that these component properties can be animated.
    PropertiesForTRectangle.png
    The following are typical properties (depending on the component) that you can change through TFloatingAnimation:
    • Height
    • Position.X
    • Position.Y
    • RotationAngle
    • RotationCenter.X
    • RotationCenter.Y
    • Scale.X
    • Scale.Y
    • StrokeThickness
    • XRadious
    • YRadious
    • Width

    WhiteSpace50.png
  4. To modify the value of a property, click the drop-down menu for the RotationAngle property, and then select Create New TFloatAnimation.
    CreateNewFloatAnimation.png
    WhiteSpace50.png
  5. Now the new TFloatAnimation component is created. You will see that, in the Structure pane, FloatAnimation1 is defined as a child of Rectangle1.
    FloatAnimationAtStructure.png
    Note: Please keep in mind that the effect of the animation-effect components applies to the parent component.
    WhiteSpace50.png
  6. The Object Inspector shows the properties for the FloatAnimation1 component. Change the following properties as described in the table:
    Property Value Description
    Duration 5 The amount of time (in seconds) to animate from the start value to the stop value.
    Enabled True The animation starts when the application starts.
    Loop True Repeats the animation indefinitely.
    StopValue 360 Terminates the animation of this property when it reaches this value.

    WhiteSpace50.png
    PropertiesOfFloatAnimation.png
    Properties for FloatAnimation1 WhiteSpace50.png


    Another important property, which is defined automatically, is PropertyName. In this case, this property is set to RotationAngle; therefore this animation affects the value of the RotationAngle property of its parent component.

    WhiteSpace50.png

  7. Execute the application. Now the rectangle component rotates on the form:
    RectangleWithRotate.png
    WhiteSpace50.png
  8. You can animate any numeric properties using the same steps.


WhiteSpace50.png

Step 2: Changing the Color by Adding TColorAnimation

As mentioned at the beginning of this tutorial, FireMonkey has many built-in animation effects. Next, you will apply a color animation to change the color of the rectangle, in addition to the rotation described in Step 1.

  1. Select the TColorAnimation component from the Tool Palette. To do so, type anim in the search box on the Tool Palette, and then double-click TColorAnimation:
    WhiteSpace50.png
    SelectColorAnimation.png
    WhiteSpace50.png
    ColorAnimationAtStructure.png
    TColorAnimation component is now on Structure pane.

    WhiteSpace50.png
  2. TColorAnimation1 is defined as a child of Form4 while FloatAnimation1 is defined as a child of Rectangle1 (as discussed at Step 1). Drag-and-drop ColorAnimation1 onto Rectangle1. Now ColorAnimation1 is defined as a child of Rectangle1, and therefore ColorAnimation1 affects Rectangle1:
    DnDColorAnimation.png
    WhiteSpace50.png
  3. The Object Inspector shows the properties for the TColorAnimation1 component. Change the following properties as described in the table.
    Property Value Description
    PropertyName Fill.Color Name of the property to animate.
    Enabled True The animation starts when the application starts.
    Duration 3 The amount of time (in seconds) to animate from the start value to the stop value.
    Loop True Repeats the animation indefinitely.
    AutoReverse True Animates backward after animating forward.
    StopValue Red Terminates the animation of this property when it reaches this value.

    WhiteSpace50.png
    PropertiesOfColorAnimation.png
    Properties for ColorAnimation1
    WhiteSpace50.png

  4. Execute the application. Now the rectangle component rotates on the form and has its color changed to red:
    RotateWithColor.png
    WhiteSpace50.png

WhiteSpace50.png

Step 3: Changing the Image by Using TBitmapAnimation

The last step in this tutorial is using a bitmap animation with an image component.

  1. Create a new FireMonkey application, as in Step 1 of this tutorial.
    WhiteSpace50.png
  2. Place a TImage component (Image1) on the Form Designer.
    WhiteSpace50.png
  3. Place a TBitmapAnimation component on the Form Designer. Using the Structure View, set this component (BitmapAnimation1) as a child of Image1:
    BitmapAnimation.png
    WhiteSpace50.png
  4. Set the properties of BitmapAnimation1 on the Object Inspector as follows:
    Property Value Description
    PropertyName Bitmap Name of the property to animate.
    Enabled True The animation starts when the application starts.
    Duration 10 The amount of time (in seconds) to animate from the start value to the stop value.
    Loop True Repeats the animation indefinitely.
    AutoReverse True Animates backward after animating forward.
    StartValue BitmapAnimation1.png Starts the animation of this property from this bitmap image.
    StopValue BitmapAnimation5.png Terminates the animation of this property when it reaches this bitmap image.

    WhiteSpace50.png

  5. Set the StartValue and EndValue properties. These properties hold the picture as initial image and final image. Click the Edit menu, and then select your favorite pictures using the Bitmap Editor.
    EditBitmapAnimation.png
    WhiteSpace50.png
  6. Execute the application. Now these two pictures are animated over time:
    BitmapAnimation1.pngBitmapAnimation2.pngBitmapAnimatio3.pngBitmapAnimation4.pngBitmapAnimation5.png

See Also

Samples