FireMonkey の画像効果の利用

提供: Appmethod Topics
移動先: 案内検索

FireMonkey クイック スタート ガイド - 画像効果とアニメーション効果の利用 への移動


FireMonkey には、画像を個別に、または別の画像と組み合わせて変更し、さまざまなビジュアル効果を得るための、多種多様な画像効果が組み込まれています。

GoldenGateBridge.png GoldenGateBridgeWithRippleEffect.png

画像への波紋効果の適用

このチュートリアルでは、いくつかの基本的な画像効果を FireMonkey アプリケーションで使用してみます。

ステップ 1:画像に効果を適用する

FireMonkey では、画像に画像効果を適用する作業は簡単です。画像を保持するコンポーネントを作成し、いずれかの画像効果コンポーネントを適用するだけです。

  1. FireMonkey アプリケーションを新規作成します([ファイル|新規作成|マルチデバイス アプリケーション空のアプリケーション)。
  2. フォームに TImage コンポーネントを配置します。それには、[ツール パレット]の検索ボックスに "image" と入力し、[TImage]コンポーネントをダブルクリックします。
    SelectingTImage.png
    [ツール パレット]で[TImage]コンポーネントを選択する
    WhiteSpace50.png
    TImageOnFormDesigner.png
    フォーム デザイナに TImage コンポーネントを配置する
    WhiteSpace50.png
  3. TImage コンポーネントがフォーム デザイナの中心に配置されていないことがわかります。図に示すように、画像領域のサイズをできるだけ大きくする必要があります。それには、フォーム デザイナで TImage コンポーネントを選択し、[オブジェクト インスペクタ]で Align プロパティを Client に変更して、TImage コンポーネントのサイズをフォームのクライアント領域と同じにします。
    SetAlignForTImage.png TImageWithAlClient.png
    Align プロパティを Client に変更する
    WhiteSpace50.png
  4. 画像効果を適用する先の画像を選択します。[オブジェクト インスペクタ]MultiResBitmap プロパティから MultiResBitmap エディタを開きます。
    メモ: MultiResBitmap プロパティを使用すると、さまざまな解像度のデバイス向けに、さまざまな縮尺の画像を設定することができます。
    GoldenGateBridgeOnForm.png
    TImage コンポーネントの画像を選択する
    WhiteSpace50.png
  5. 次に、画像効果コンポーネントを選択します。[ツール パレット]の検索ボックスに "effect" と入力し、[TRippleEffect]を選択します。[ツール パレット]では数多くの効果が提供されています。これらの効果の詳細な説明は、API リファレンス(FMX.Filter.Effects)で読むことができます。
    SelectRippleEffect.png
    WhiteSpace50.png
    これで RippleEffect コンポーネントが[構造]ペインに表示されます。
    RippleEffectOnStructure.png
    WhiteSpace50.png
    効果を適用するには、効果コンポーネントを別のコンポーネントの子として定義する必要があります。この場合には、RippleEffect1 を Image1 の子と定義しなければなりません。それには、[構造]ペインで RippleEffect1 をドラッグして Image1 コンポーネントにドロップします。
    SetRippleEffectAsChild.png RippleEffectAsChildOfImage.png
    RippleEffect コンポーネントを Image1 コンポーネントの子にする
    WhiteSpace50.png
  6. フォーム デザイナを見ると、RippleEffect が既に作用しています。
    RippleEffectInAction.png
    フォーム デザイナの画像に波紋効果を適用する
  7. プロパティを変更して、効果が画像にどう適用されるかを変更することもできます。たとえば Frequency プロパティを 20 に変更すると、効果が変更されて次の図のようになります。
    RippleEffectWithDifferentFrequency.png

ステップ 2:画像効果のプロパティにアニメーション効果を適用する

FireMonkey のアニメーション効果」で説明しているように、数値プロパティにはアニメーション効果(時間が経つにつれて値が変更される)を指定できます。このステップでは、典型的なアニメーション効果の 1 つである TFloatAnimation をサンプル アプリケーションに適用します。

  1. [構造]ペインで RippleEffect1 を選択します。
  2. [オブジェクト インスペクタ]で Phase プロパティを選択し、ドロップダウン メニューから[TFloatAnimation の新規作成]を選択します。
    SetFloatAnimationToRippleEffect.png
    WhiteSpace50.png
    FloatAnimation1 が RippleEffect1 の子として定義されていることを確認してください。
    FloatAnimationAsChildOfRippleEffect.png
    WhiteSpace50.png
  3. FloatAnimation1 のプロパティを次のように変更します。
    プロパティ 説明

    Duration

    10

    開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。

    Enabled

    True

    実行時の初期化中にアニメーションを開始します。

    Loop

    True

    アニメーションを無限に繰り返します。

    PropertyName

    Phase

    アニメーションで変化させるプロパティの名前を指定します。

    StopValue

    20

    アニメーションによるプロパティの変化はこの値に到達すると終了します。

    FloatAnimationPropertyForRippleEffect.png

    FloatAnimation1 のプロパティの設定
    WhiteSpace50.png

  4. アプリケーションを実行します。時間が経つと波紋効果がどのように進行するかを確認できます。

画像への複数の効果の適用

FireMonkey ではオブジェクトに対する複数の効果の適用をサポートしていませんが、効果ごとに 1 つのコンテナ TLayout を使用することで、それを実装することができます。

次に例を示します。

TImageControlBitmap に 2 つの効果を適用するには、それぞれの効果を別の TLayout に適用します。手順は次のとおりです。

  1. TForm 上に TLayout(1 番目のコンテナ)を配置します。
  2. 1 番目のコンテナの下の階層になるよう、TForm 上にもう 1 つの TLayout(2 番目のコンテナ)を配置します。
  3. 2 番目のコンテナの下に TImageControl を配置します。
    1. Bitmap プロパティを編集して画像を読み込みます。
  4. 2 番目のコンテナの下に効果 TBlurEffect を配置します。
  5. 1 番目のコンテナの下に効果 TReflectionEffect を配置します。

これらの効果は、設計時と実行時に適用されます。

上記手順の結果、[構造]パネルは次のようになっています。

Multiple Effects Structure Panel.png

関連項目