FireMonkey の画像効果の利用

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

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

画像への波紋効果の適用

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

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

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

1. FireMonkey アプリケーションを新規作成します（［ファイル｜新規作成｜FireMonkey HD アプリケーション］）。
2. フォームに TImage コンポーネントを配置します。それには、［ツール パレット］の検索ボックスに "image" と入力し、［TImage］コンポーネントをダブルクリックします。
   

   
   

   ［ツール パレット］で［TImage］コンポーネントを選択する
   

   
   

   
   

   フォーム デザイナに TImage コンポーネントを配置する
   

   
   

3. TImage コンポーネントがフォーム デザイナの中心に配置されていないことがわかります。図に示すように、画像領域のサイズをできるだけ大きくする必要があります。それには、フォーム デザイナで TImage コンポーネントを選択し、［オブジェクト インスペクタ］で Align プロパティを alClient に変更して、TImage コンポーネントのサイズをフォームのクライアント領域と同じにします。
   

   
   

   Align プロパティを alClient に変更する
   

   
   

4. 画像効果を適用する先の画像を選択します。TImage コンポーネントは Bitmap プロパティに画像を保持します。［オブジェクト インスペクタ］で Bitmap プロパティを選択し、［編集...］メニューを使って画像を選択します。
   

   
   

   TImage コンポーネントの画像を選択する
   

   
   

5. 次に、画像効果コンポーネントを選択します。［ツール パレット］の検索ボックスに "effect" と入力し、［TRippleEffect］を選択します。［ツール パレット］では数多くの効果が提供されています。これらの効果の詳細な説明は、API リファレンス（FMX.Filter.Effects）で読むことができます。
   

   
   

   
   

   これで RippleEffect コンポーネントが［構造］ペインに表示されます。
   

   
   

   
   

   効果を適用するには、効果コンポーネントを別のコンポーネントの子として定義する必要があります。この場合には、RippleEffect1 を Image1 の子と定義しなければなりません。それには、［構造］ペインで RippleEffect1 をドラッグして Image1 コンポーネントにドロップします。
   

   
   

   RippleEffect コンポーネントを Image1 コンポーネントの子にする
   

   
   

6. フォーム デザイナを見ると、RippleEffect が既に作用しています。
   

   
   

   フォーム デザイナの画像に波紋効果を適用する

7. プロパティを変更して、効果が画像にどう適用されるかを変更することもできます。たとえば Frequency プロパティを 20 に変更すると、効果が変更されて次の図のようになります。
   

   
   

   
   

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

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

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

   プロパティ	値	説明
   Duration	10	開始値から終了値までアニメーションで変化させるためにかける時間（秒単位）。
   Enabled	True	実行時の初期化中にアニメーションを開始します。
   Loop	True	アニメーションを無限に繰り返します。
   PropertyName	Phase	アニメーションで変化させるプロパティの名前を指定します。
   StopValue	20	アニメーションによるプロパティの変化はこの値に到達すると終了します。

   

   FloatAnimation1 のプロパティの設定
   
   

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