Nach oben zu FireMonkey Quick Start - Bild- und Animationseffekte

Inhaltsverzeichnis

1 Schritt 1: Ändern eines Gleitkommawertes mit TFloatAnimation
2 Schritt 2: Ändern der Farbe durch Hinzufügen von TColorAnimation
3 Schritt 3: Ändern des Bildes mit TBitmapAnimation
4 Siehe auch
- 4.1 Beispiele

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.

Erstellen Sie eine neue Anwendung mithilfe von:
- Datei > Neu > Geräteübergreifende Anwendung > Leere Anwendung
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:

Auswählen einer TRectangle-Komponente in der Tool-Palette

Die TRectangle-Komponente im Formular-Designer
Nach dem Platzieren der TRectangle-Komponente im Formular-Designer werden im Objektinspektor mehrere Eigenschaften mit einem Filmsymbol () angezeigt. Das Filmsymbol gibt an, dass diese Komponenteneigenschaften animiert werden können.

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
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.
Damit haben Sie eine neue TFloatAnimation-Komponente erstellt. Im Strukturfenster ist FloatAnimation1 als untergeordnete Komponente von Rectangle1 definiert.

Hinweis: Der Effekt der Komponenten für Animationseffekte wird immer auf die übergeordnete Komponente angewendet.

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.

Eigenschaften für FloatAnimation1

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.

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

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.

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:

Die TColorAnimation-Komponente wird nun in der Strukturansicht angezeigt.
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:

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.

Eigenschaften für ColorAnimation1

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

Schritt 3: Ändern des Bildes mit TBitmapAnimation

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

Erstellen Sie eine neue FireMonkey-Anwendung, wie in Schritt 1 dieses Tutorials beschrieben.
Platzieren Sie im Formular-Designer eine TImage-Komponente (Image1).
Platzieren Sie im Formular-Designer eine TBitmapAnimation-Komponente. Legen Sie im Strukturfenster diese Komponente (BitmapAnimation1) als untergeordnete Komponente von Image1 fest:

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		Beginnt die Animation dieser Eigenschaft mit diesem Bitmap-Bild.
StopValue		Beendet die Animation dieser Eigenschaft, wenn dieses Bitmap-Bild erreicht ist.

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.
Führen Sie die Anwendung aus. Diese beiden Bilder werden nun im Zeitverlauf geändert: