FMX.AnimationDemoHD Sample
This sample illustrates how to create HD animations with FireMonkey.
Contents
Location
You can find the AnimationDemoHD sample project at:
- Start | Programs | Embarcadero RAD Studio 10.2 Tokyo | Samples and then navigate to:
CPP\Multi-Device Samples\User Interface\AnimationDemoHD
- Subversion Repository:
Description
The AnimationDemoHD sample animates several visual objects on a FireMonkey form. To this end, the sample uses TColorAnimation, TFloatAnimation, TPathAnimation, and TBitmapAnimation.
How to Use the Sample
- Navigate to the location given above, and open AnimationDemoHD.cbproj.
- Select the target platform.
- Press F9 or choose Run > Run.
- See the different animations.
Files
File in C++ | Contains |
---|---|
AnimationDemoHD.cbproj |
The project itself. |
aniform.fmx |
The main form where the components are located. |
AnimationDemoHDPCH.h, AnimationDemoHD.cpp |
Used to define and implement the sample. |
Classes
TForm1 is the main form that represents the main window of the sample. It contains the following components:
- Three TAniIndicator objects labeled as AniIndicator1, AniIndicator2 and AniIndicator3.
- A TEllipse object labeled as Ellipse1 that contains:
- A TFloatAnimation object labeled as FloatAnimation1.
- A TText object labeled as Text1.
- A TImage object labeled as Image1 that contains:
- A TBitmapAnimation object labeled as BitmapAnimation1.
- A TText object labeled as Text4.
- A TLabel object labeled as Label1.
- A TPath object labeled as Path1.
- A TRectangle object labeled as Rectangle1 that contains:
- A TColorAnimation object labeled as ColorAnimation1.
- A TText object labeled as Text2.
- A TRectangle object labeled as Rectangle2 that contains:
- A TFloatAnimation object labeled as FloatAnimation2.
- A TText object labeled as Text3.
- A TRectangle object labeled as Rectangle3 that contains:
- A TFloatAnimation object labeled as FloatAnimation4.
- A TText object labeled as Text5.
- A TRoundRect object labeled as RoundRect1 that contains:
- A TPathAnimation object labeled as PathAnimation1.
- A TText object labeled as Text6.
- A TText object labeled as Text7.
- A TPathAnimation object labeled as PathAnimation2.
Implementation
- The sample uses:
- TAniIndicator to represent an animated spinning indicator used for illustrating an indefinite waiting time for application processes.
- TLabel to display text in FireMonkey forms.
- TEllipse to define a 2D ellipse shape.
- TRectangle to define a 2D rectangle shape.
- TRoundRect to define a 2D rectangle shape with rounded corners.
- TText to define 2D text object.
- TPath to define 2D path-type shapes representing groups of connected curves and lines.
- TPathAnimation to move a visual object on a specified path.
- TImage to display and define 2D image components.
- TBitmapAnimation to change the display of an image over time.
- TColorAnimation to change the color of a FireMonkey object over time.
- TFloatAnimation attached to a 3D object in order to animate it.
When you run the application, you see several animated FireMonkey objects. The animations do the following:
- FloatAnimation1 is attached to Ellipse1. It has the PropertyName set to
RotationAngle
with the StartValue set to0
and the StopValue set to360
. This means that the ellipse rotates from 0 degrees to 360 degrees. Moreover, Its Loop property is set toTrue
, in order to repeat the animation. - FloatAnimation2 is attached to Rectangle2. It has the PropertyName set to
Opacity
, which means that the animation customizes the transparency of the rectangle. Moreover, the Loop property of the animation is set toTrue
, which means that the animation is repeatedly executed. - FloatAnimation4 is attached to Rectangle3. It has the PropertyName property set to
Position.X
, which means that the animation moves the rectangle through the X axis. - PathAnimation1 is attached to RoundRect1. It makes the round rectangle follow the path determined by the Path1 object. The duration property of the animation indicates that the rectangle completes the path in 6 seconds.
- PathAnimation2 is attached to Text7. It makes the text follow the path determined by the Path1 object. The duration property of the animation indicates that the text completes the path in 3 seconds.
- ColorAnimation1 is attached to Rectangle1. It has the PropertyName property set to
Fill.Color
. It fills the shape with a certain color. - BitmapAnimation1 is attached to Image1. It has the PropertyName property set to
Bitmap
and the Trigger and TriggerInverse properties set toIsMouseOver=true
andIsMouseOver=false
, respectively. This means that Image1 changes when the mouse is on the image. The inverse of the animation starts when the mouse leaves the image.
Uses
- FMX.StdCtrls.TAniIndicator
- FMX.Objects.TText
- FMX.StdCtrls.TLabel
- FMX.Objects.TEllipse
- FMX.Objects.TRectangle
- FMX.Objects.TRoundRect
- FMX.Objects.TPath
- FMX.Objects.TImage
- FMX.Ani.TColorAnimation
- FMX.Ani.TFloatAnimation
- FMX.Controls.TPathAnimation
- FMX.Ani.TBitmapAnimation
See Also
Samples
- FireMonkey 3D Animation sample
- FireMonkey 3D GUI sample
- FireMonkey First App3D sample
- FireMonkey TFmxObject AnimateFloat (C++)
- FireMonkey Attach TAnimation (C++)