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 > Geräteübergreifende Anwendung > Leere Anwendung).
2. Ziehen Sie eine TImage-Komponente auf das 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 Client, damit die TImage-Komponente dieselbe Größe wie der Client-Bereich des Formulars erhält.
   

   
   

   Ändern der Eigenschaft Align in Client
   

   
   

4. Wählen Sie das Bild aus, für das Sie den Bildeffekt anwenden möchten. Öffnen Sie im Objektinspektor über die Eigenschaft MultiResBitmap den MultiResBitmap-Editor.
   

   Hinweis: Die Eigenschaft MultiResBitmap ermöglicht Bilder in verschiedenen Skalierungen für unterschiedliche Geräteauflösungen vorzusehen.

   
   

   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 festgelegt werden. Ziehen Sie dazu im Strukturfenster RippleEffect1 auf die Komponente Image1.
   

   
   

   Festlegen der RippleEffect-Komponente als untergeordnete Komponente von Image1
   

   
   

6. Der Welleneffekt (RippleEffect) wird nun bereits im Formular-Designer angezeigt.
   

   
   

   Anwenden eines Welleneffekts für ein Bild im Formular-Designer

7. Wie dieser Effekt für 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 unter 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 TFloatAnimation1 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 der Eigenschaft, wenn dieser Wert erreicht ist.

   

   Festlegen der Eigenschaften von FloatAnimation1
   
   

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

Übernehmen mehrerer Effekte für ein Bild

FireMonkey unterstützt mehrere Effekte für Objekte nicht. Sie können mehrere Effekte aber implementieren, indem Sie einen TLayout-Container für jeden unterschiedlichen Effekt verwenden.

Zum Beispiel:

Um für das Bitmap eines TImageControl zwei Effekte zu verwenden, übernehmen Sie jeden Effekt in ein unterschiedliches TLayout:

1. Legen Sie eine TLayout-Komponente (erster Container) auf dem TForm ab.
2. Legen Sie eine weitere TLayout-Komponente (zweiter Container) auf dem TForm hierarchisch unter dem ersten Container ab.
3. Legen Sie ein TImageControl hierarchisch unter dem zweiten Container ab.
   1. Bearbeiten Sie die Eigenschaft Bitmap so, dass ein Bild geladen wird.
4. Legen Sie den Effekt TBlurEffect hierarchisch unter dem zweiten Container ab.
5. Legen Sie den Effekt TReflectionEffect hierarchisch unter dem ersten Container ab.

Die Effekte werden beim Entwurf und zur Laufzeit übernommen.

Die Ergebnisse werden in der Strukturansicht angezeigt.

Siehe auch

• MultiResBitmap-Editor
• Verwenden von Bitmaps mit Mehrfachauflösung

Beispiele

• FireMonkey Image Filters (Beispiel)