Verwenden von FireMonkey-Bildeffekten

Aus RAD Studio
Wechseln zu: Navigation, Suche

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.

GoldenGateBridge.png GoldenGateBridgeWithRippleEffect.png

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:
    SelectingTImage.png
    Auswählen einer TImage-Komponente in der Tool-Palette
    WhiteSpace50.png
    TImageOnFormDesigner.png
    Platzieren einer TImage-Komponente im Formular-Designer
    WhiteSpace50.png
  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.
    SetAlignForTImage.png TImageWithAlClient.png
    Ändern der Eigenschaft Align in Client
    WhiteSpace50.png
  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.
    GoldenGateBridgeOnForm.png
    Auswählen eines Bildes für eine TImage-Komponente
    WhiteSpace50.png
  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).
    SelectRippleEffect.png
    WhiteSpace50.png
    Die TRippleEffect-Komponente wird nun im Strukturfenster angezeigt.
    RippleEffectOnStructure.png
    WhiteSpace50.png
    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.
    SetRippleEffectAsChild.png RippleEffectAsChildOfImage.png
    Festlegen der RippleEffect-Komponente als untergeordnete Komponente von Image1
    WhiteSpace50.png
  6. Der Welleneffekt (RippleEffect) wird nun bereits im Formular-Designer angezeigt.
    RippleEffectInAction.png
    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.
    RippleEffectWithDifferentFrequency.png

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.
    SetFloatAnimationToRippleEffect.png
    WhiteSpace50.png
    Stellen Sie sicher, dass TFloatAnimation1 als untergeordnete Komponente von RippleEffect1 definiert ist.
    FloatAnimationAsChildOfRippleEffect.png
    WhiteSpace50.png
  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.

    FloatAnimationPropertyForRippleEffect.png

    Festlegen der Eigenschaften von FloatAnimation1
    WhiteSpace50.png

  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.

Multiple Effects Structure Panel.png

Siehe auch

Beispiele