Verwenden von FireMonkey-Animationseffekten

Aus RAD Studio
Wechseln zu: Navigation, Suche

Nach oben zu FireMonkey Quick Start - Bild- und Animationseffekte


FireMonkey enthält viele verschiedene Typen von integrierten Animationseffekten, über die der Wert der ausgewählten Eigenschaft im Zeitverlauf geändert werden kann.

Beispiele von Animationseffekten:

Typ der Eigenschaft Klasse des Animationseffekts
Eigenschaften, die Integerwerte sind TIntAnimation
Eigenschaften, die reele Zahlen sind TFloatAnimation
Durch die Eigenschaft TBounds definierte Position von Komponenten TRectAnimation
String- oder Integer-Eigenschaften, die eine Farbe enthalten TColorAnimation
Verläufe (Typ TGradient) TGradientAnimation
Bitmap-Bilder TBitmapAnimation

In diesem Tutorial werden einige der grundlegenden Animationseffekte in einer FireMonkey-Anwendung behandelt.

Schritt 1: Ändern eines Gleitkommawertes mit TFloatAnimation

In FireMonkey kann jede Eigenschaft, die Gleitkommawerte enthält, mit Animationseffekten über TFloatingAnimation geändert werden. Im Folgenden werden einige Werte anhand von Animationseffekten geändert.

  1. Erstellen Sie eine neue Anwendung mithilfe von:
  2. Platzieren Sie im Formular-Designer eine TRectangle-Komponente. Geben Sie dazu in das Suchfeld der Tool-Palette rec ein, und doppelklicken Sie dann auf die Komponente TRectangle:
    Select TRectangle.png
    Auswählen einer TRectangle-Komponente in der Tool-Palette
    WhiteSpace50.png
    TRectangle on Form.png
    Die TRectangle-Komponente im Formular-Designer
    WhiteSpace50.png
  3. Nach dem Platzieren der TRectangle-Komponente im Formular-Designer werden im Objektinspektor mehrere Eigenschaften mit einem Filmsymbol (FilmIcon.png) angezeigt. Das Filmsymbol gibt an, dass diese Komponenteneigenschaften animiert werden können.
    PropertiesForTRectangle.png
    Die folgende Liste enthält typische Eigenschaften (komponentenabhängig), die mit TFloatingAnimation geändert werden können:
    • Height
    • Position.X
    • Position.Y
    • RotationAngle
    • RotationCenter.X
    • RotationCenter.Y
    • Scale.X
    • Scale.Y
    • StrokeThickness
    • XRadious
    • YRadious
    • Width

    WhiteSpace50.png
  4. Klicken Sie auf das Dropdown-Menü für die Eigenschaft RotationAngle, und wählen Sie dann Neue TFloatAnimation erstellen, um den Wert einer Eigenschaft zu ändern.
    CreateNewFloatAnimation.png
    WhiteSpace50.png
  5. Damit haben Sie eine neue TFloatAnimation-Komponente erstellt. Im Strukturfenster ist FloatAnimation1 als untergeordnete Komponente von Rectangle1 definiert.
    FloatAnimationAtStructure.png
    Hinweis: Der Effekt der Komponenten für Animationseffekte wird immer auf die übergeordnete Komponente angewendet.
    WhiteSpace50.png
  6. Im Objektinspektor werden die Eigenschaften der Komponente FloatAnimation1 angezeigt. Ändern Sie folgende Eigenschaften wie in der Tabelle beschrieben:
    Eigenschaft Wert Beschreibung
    Duration 5 Die Dauer (in Sekunden), die die Komponente vom Startwert bis zum Stoppwert animiert werden soll.
    Enabled True Die Animation beginnt beim Start der Anwendung.
    Loop True Wiederholt die Animation endlos.
    StopValue 360 Beendet die Animation dieser Eigenschaft, wenn dieser Wert erreicht ist.

    WhiteSpace50.png
    PropertiesOfFloatAnimation.png
    Eigenschaften für FloatAnimation1 WhiteSpace50.png


    Eine weitere wichtige Eigenschaft, die automatisch definiert wird, ist PropertyName. In diesem Beispiel ist diese Eigenschaft auf RotationAngle gesetzt; deshalb betrifft diese Animation den Wert der Eigenschaft RotationAngle der übergeordneten Komponente.

    WhiteSpace50.png

  7. Führen Sie die Anwendung aus. Die Rechteckkomponente dreht sich nun im Formular:
    RectangleWithRotate.png
    WhiteSpace50.png
  8. Sie können anhand dieser Schritte jede numerische Eigenschaft animieren.


WhiteSpace50.png

Schritt 2: Ändern der Farbe durch Hinzufügen von TColorAnimation

Wie am Anfang dieses Tutorials bereits erwähnt, verfügt FireMonkey über viele integrierte Animationseffekte. Im nächsten Schritt wird eine Farbanimation angewendet, um zusätzlich zur Drehung aus Schritt 1 auch die Farbe des Rechtecks zu ändern.

  1. Wählen Sie in der Tool-Palette die Komponente TColorAnimation aus. Geben Sie dazu in das Suchfeld der Tool-Platte anim ein, und doppelklicken Sie dann auf TColorAnimation:
    WhiteSpace50.png
    SelectColorAnimation.png
    WhiteSpace50.png
    ColorAnimationAtStructure.png
    Die TColorAnimation-Komponente wird nun in der Strukturansicht angezeigt.

    WhiteSpace50.png
  2. TColorAnimation1 ist als untergeordnete Komponente von Form4 definiert und FloatAnimation1 als untergeordnete Komponente von Rectangle1 (siehe Schritt 1). Legen Sie per Drag&Drop ColorAnimation1 auf Rectangle1 ab. ColorAnimation1 ist jetzt als untergeordnete Komponente von Rectangle1 definiert, und deshalb wirkt sich ColorAnimation1 auf Rectangle1 aus:
    DnDColorAnimation.png
    WhiteSpace50.png
  3. Im Objektinspektor werden die Eigenschaften der TColorAnimation1-Komponente angezeigt. Ändern Sie folgende Eigenschaften wie in der Tabelle beschrieben.
    Eigenschaft Wert Beschreibung
    PropertyName Fill.Color Name der zu animierenden Eigenschaft.
    Enabled True Die Animation beginnt beim Start der Anwendung.
    Duration 3 Die Dauer (in Sekunden), die die Komponente vom Startwert bis zum Stoppwert animiert werden soll.
    Loop True Wiederholt die Animation endlos.
    AutoReverse True Führt die Animation erst vorwärts und dann rückwärts aus.
    StopValue Red Beendet die Animation dieser Eigenschaft, wenn dieser Wert erreicht ist.

    WhiteSpace50.png
    PropertiesOfColorAnimation.png
    Eigenschaften für ColorAnimation1
    WhiteSpace50.png

  4. Führen Sie die Anwendung aus. Die Rechteckkomponente dreht sich nun im Formular und deren Farbe wird in Rot geändert:
    RotateWithColor.png
    WhiteSpace50.png

WhiteSpace50.png

Schritt 3: Ändern des Bildes mit TBitmapAnimation

Im letzten Schritt dieses Tutorials wird eine Bitmap-Animation mit einer Bildkomponente verwendet.

  1. Erstellen Sie eine neue FireMonkey-Anwendung, wie in Schritt 1 dieses Tutorials beschrieben.
    WhiteSpace50.png
  2. Platzieren Sie im Formular-Designer eine TImage-Komponente (Image1).
    WhiteSpace50.png
  3. Platzieren Sie im Formular-Designer eine TBitmapAnimation-Komponente. Legen Sie im Strukturfenster diese Komponente (BitmapAnimation1) als untergeordnete Komponente von Image1 fest:
    BitmapAnimation.png
    WhiteSpace50.png
  4. Legen Sie im Objektinspektor die Eigenschaften von BitmapAnimation1 wie folgt fest:
    Eigenschaft Wert Beschreibung
    PropertyName Bitmap Name der zu animierenden Eigenschaft.
    Enabled True Die Animation beginnt beim Start der Anwendung.
    Duration 10 Die Dauer (in Sekunden), die die Komponente vom Startwert bis zum Stoppwert animiert werden soll.
    Loop True Wiederholt die Animation endlos.
    AutoReverse True Führt die Animation erst vorwärts und dann rückwärts aus.
    StartValue BitmapAnimation1.png Beginnt die Animation dieser Eigenschaft mit diesem Bitmap-Bild.
    StopValue BitmapAnimation5.png Beendet die Animation dieser Eigenschaft, wenn dieses Bitmap-Bild erreicht ist.

    WhiteSpace50.png

  5. Setzen Sie die Eigenschaften StartValue und EndValue. Diese Eigenschaften enthalten das Startbild und das Endbild. Klicken auf dem Menüeintrag Bearbeiten, und wählen Sie die gewünschten Bilder im Bitmap-Editor aus.
    EditBitmapAnimation.png
    WhiteSpace50.png
  6. Führen Sie die Anwendung aus. Diese beiden Bilder werden nun im Zeitverlauf geändert:
    BitmapAnimation1.png BitmapAnimation2.png BitmapAnimatio3.png BitmapAnimation4.png BitmapAnimation5.png

Siehe auch

Beispiele