Verwenden von FireMonkey-Bildeffekten

Nach oben zu FireMonkey Quick Start - Bild- und Animationseffekte

FireMonkey enthält viele verschiedene Typen von integrierten Bildeffekten, über die einzelne Bilder oder eine Bildergruppe zur Erzielung verschiedenster visueller Effekte geändert werden können.

Auswirkungen eines Welleneffekts auf ein Bild

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

Schritt 1: Übernehmen eines Effekts für ein Bild

Das Übernehmen eines Effektes für ein Bild ist in FireMonkey ein sehr einfacher Vorgang. Sie erstellen eine Komponente, die ein Bild enthält, und verwenden dann eine Bildeffektkomponente.

1. Erstellen Sie eine neue FireMonkey-Anwendung (Datei > Neu > FireMonkey-HD-Anwendung).
2. Platzieren Sie eine TImage-Komponente auf dem Formular. Geben Sie dazu in das Suchfeld der Tool-Platte image ein, und doppelklicken Sie dann auf die Komponente TImage:
   

   
   

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

   
   

   
   

   Platzieren einer TImage-Komponente im Formular-Designer
   

   
   

3. Die TImage-Komponente wird nicht in der Mitte des Formular-Designers platziert. Wie in der folgenden Abbildung gezeigt, müssen Sie die Größe des Bildbereichs so groß wie möglich festlegen. Wählen Sie dazu die TImage-Komponente im Formular-Designer aus, und ändern Sie im Objektinspektor die Eigenschaft Align in alClient, damit die TImage-Komponente dieselbe Größe wie der Client-Bereich des Formulars erhält.
   

   
   

   Ändern der Eigenschaft Align in alClient
   

   
   

4. Wählen Sie das Bild aus, für das Sie den Bildeffekt anwenden möchten. Die TImage-Komponente enthält das Bild in der Eigenschaft Bitmap. Wählen Sie im Objektinspektor die Eigenschaft Bitmap aus, und wählen Sie mithilfe des Menüeintrags Bearbeiten ein Bild aus.
   

   
   

   Auswählen eines Bildes für eine TImage-Komponente
   

   
   

5. Jetzt können Sie eine Bildeffektkomponente auswählen. Geben Sie in das Suchfeld der Tool-Palette effect ein, und wählen Sie TRippleEffect aus. Die Tool-Palette enthält zahlreiche Effekte. Detaillierte Erläuterungen zu diesen Effekten finden Sie in der API-Referenz (FMX.Filter.Effects).
   

   
   

   
   

   Die TRippleEffect-Komponente wird nun im Strukturfenster angezeigt.
   

   
   

   
   

   Damit ein Effekt angewendet werden kann, muss eine Effektkomponente als untergeordnete Komponente einer anderen Komponente definiert sein. Für dieses Beispiel soll RippleEffect1 als untergeordnete Komponente von Image1 definiert werden. Ziehen Sie dazu im Strukturfenster RippleEffect1 auf die Komponente Image1.
   

   
   

   Festlegen der RippleEffect-Komponente als untergeordnete Komponente von Image1
   

   
   

6. Nun wird der Welleneffekt (RippleEffect) bereits im Formular-Designer angezeigt.
   

   
   

   Anwenden eines Welleneffekts auf ein Bild im Formular-Designer

7. Wie dieser Effekt auf das Bild angewendet wird, können Sie durch Ändern einiger Eigenschaften festlegen. Wenn Sie beispielsweise die Eigenschaft Frequency in 20 ändern, wird ein Effekt, wie in der folgenden Abbildung dargestellt, erzielt.
   

   
   

   
   

Schritt 2: Anwenden eines Animationseffekts für eine Eigenschaft eines Bildeffekts

Wie in FireMonkey-Animationseffekte beschrieben, können Animationseffekte für alle numerischen Eigenschaften verwendet werden (Ändern des Wertes im Zeitverlauf). In diesem Schritt wird ein typischer Animationseffekt, TFloatAnimation, für diese Beispielanwendung eingesetzt.

1. Wählen Sie im Strukturfenster RippleEffect1 aus.
2. Wählen Sie im Objektinspektor die Eigenschaft Phase und im Dropdown-Menü Neue TFloatAnimation erstellen aus.
   
   
   Stellen Sie sicher, dass TFloatAnimation als untergeordnete Komponente von RippleEffect1 definiert ist.
   
   
   
3. Ändern Sie die Eigenschaften von FloatAnimation1 wie folgt:

   Eigenschaft	Wert	Beschreibung
   Duration	10	Die Dauer (in Sekunden), die die Komponente vom Startwert bis zum Stoppwert animiert werden soll.
   Enabled	True	Beginnt die Animation während der Initialisierung der Laufzeit.
   Loop	True	Wiederholt die Animation endlos.
   PropertyName	Phase	Gibt den Namen der zu animierenden Eigenschaft an.
   StopValue	20	Beendet die Animation dieser Eigenschaft, wenn dieser Wert erreicht ist.

   

   Festlegen der Eigenschaften von FloatAnimation1
   
   

4. Führen Sie die Anwendung aus. Nun wird der Welleneffekt im Zeitverlauf verändert.