FireMonkey アニメーション効果の使用例

投稿者:: Chikako Yonezawa

概要: Delphi/C++Builder/RAD Studio XE2 でサポートされた FireMonkey のアニメーション効果を使用して、ユーザービリティに優れたアプリケーションを作成することが可能です。

    はじめに

Delphi/C++Builder/RAD Studio XE2 でサポートされた FireMonkey には多様な効果とアニメーション機能が備わっています。

例えば、現在フォーカスのあるコントロールがどれなのかを分かりやすく示すには、GlowEffect などの効果を使用し、コントロールにフォーカスのある時のみ、効果を適用させるという方法を使います。以下の簡単なサンプルアプリケーションでその効果を確認してみましょう。

    サンプルアプリケーション1

  1. IDEのメニューより [ファイル|新規作成|FireMonkey HD アプリケーション – Delphi]、または [ファイル|新規作成|FireMonkey HD アプリケーション –C++Builder] を選択します。

Hide image
Click to see full-sized image

  1. ツールパレットから、フォーム上に TEditを 2 つ置きます。

Hide image
Click to see full-sized image

  1. ツールパレットから、フォーム上にGlowEffect を 2つ置き、構造ペイン上で GlowEffectをドラッグして、 Edit側にドロップするという動作により、それぞれの TEditの子コンポーネントとて設定します。

Hide image
Click to see full-sized image

  1. オブジェクトインスペクタ上で、フォーカスが当たった時だけ GlowEffect効果を実行するよう、GlowEffect1, GlowEffect2 の双方に次の設定を行います。

プロパティ名

設定値

Enabled

False

Trigger

IsFocused=true

   

Hide image

  1. キーボードの [F9] ボタンを押し、作ったアプリケーションを実行します。ここまでコードは1行も記述していません。

実行して Tabキーや、マウスで、2 つの入力ボックスを行き来してみると、現在フォーカスのある Edit側のみ効果が実行され、どこに対して入力を行っているかが非常にわかりやすくなります。

Hide image
Click to see full-sized image

次に、入力エラーがあった場合、その箇所を分かりやすく表示するために、アニメーション効果を使う方法があります。こちらも簡単なサンプルアプリケーションで確認できます。

    サンプルアプリケーション 2

サンプルアプリケーション 1に機能を追加します。

  1. ツールパレットから、フォーム上に TButton を置きます。今回はこのボタンが押された時に Edit1側の GlowEffect の色を変え、更に警告状態が分かるようなアニメーションを追加します。

Hide image
Click to see full-sized image

  1. ツールパレットから、フォーム上に TFloatAnimation を置き、構造ペイン上で FloatAnimation1 をドラッグして、GlowEffect1 にドロップし、GlowEffect1 の子コンポーネントとします。

Hide image

  1. オブジェクトインスペクタ上で、FloatAnimation1 に次の設定を行います。

プロパティ名

設定値

AutoRevers

True

Duration

0.5

Inverse

True

Loop

True

PropertyName

Softness

StartValue

0.1

StopValue

0.5

   

Hide image

この設定により 0.5 秒間隔で、GlowEffect1 の Softness プロパティの値が変化します。

  1. 設計画面上で Button1 コンポーネントをマウスでダブルクリックし、OnClick イベントハンドラを生成します。
  2. 生成されたイベントハンドラに、以下のコードを記述します。

Delphiの場合

   GlowEffect1.GlowColor := claRed;  // 色を赤に変えます
   FloatAnimation1.Start;  // アニメーションを開始させます
   Edit1.SetFocus;  // フォーカスを Edit1に移動します

C++Builder の場合

  GlowEffect1->GlowColor = claRed;  // 色を赤に変えます
  FloatAnimation1->Start();  // アニメーションを開始させます
  Edit1->SetFocus();  // フォーカスを Edit1に移動します
  1. キーボードの [F9] ボタンを押し、作ったアプリケーションを実行します。

Button1 をクリックすると Edit1 の周りが赤く点滅するように表示されます。

Hide image

    まとめ

このように FireMonkey のアニメーション効果を使うことにより、今まで作成してきたアプリケーションを更にユーザービリティに優れたものにすることが可能です。

次からのサーバー応答:: ETNASC02