FireMonkey: 設計時、スタイルにアニメーション効果を適用する

投稿者:: Chikako Yonezawa

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

    はじめに

この記事は次の 2つの記事をご覧いただいていることを前提にしております。

Delphi/C++Builder/RAD Studio XE2 でサポートされた FireMonkey では、各コンポーネントのルック アンド フィールは、スタイルとして定義し、そのスタイルをコンポーネントに割り当てるという方法を採用しています。FireMonkey では、アプリケーションに別のスタイルを適用するだけで、アプリケーション全体のルック アンド フィールを簡単に変更できます。

更に、このスタイルにはアニメーションの効果を適用することができます。

実際にサンプルアプリケーションを作って動作を確認してみましょう。

    サンプルアプリケーションの作成

標準のコンポーネントで、スタイルにアニメーション効果を適用しているものがありますので、このコンポーネントを配置したアプリケーションを作成します。

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

  3. ツールパレットからフォーム上に TSpeedButton コンポーネントを配置します。

Hide image
Click to see full-sized image

今回のサンプルアプリケーションの設計はこれだけです。

この SpeedButton コンポーネントですが、VCL の同名のコンポーネントのように設計画面上で、ボタンらしい表示が全く行われていません。大きさを変更しても、特に外枠が記述されている訳ではなく?な感じですが、キーボードで [F9]ボタンを押し、ビルドして実行してみましょう。

Hide image

ボタンらしきものが何も表示されておらず、単に Textプロパティに記載されていた SpeedButton1 という文字が表示されているだけです。

しかし、この SpeedButton の上にマウスカーソルを移動すると…

Hide image

ボタンが浮かび上がってきました。この色が浮き上がる動作にアニメーション効果が使用されています。

ところが、アプリケーションを終了させ、設計画面に戻り、オブジェクトインスペクタで確認してもアニメーション効果らしき設定が行われている部分は見当たりません。

標準の TSpeedButton のスタイルにはアニメーション効果が設定されており、これが作用してこのような動作を行っているのです。

では、どのようにスタイルにアニメーション効果が設定されているのかを確認してみましょう。

  1. 設計画面上で、SpeedButton1 をマウスで選択し、マウスの右ボタンをクリックして表示されたポップアップメニューより「カスタムスタイルの編集」を選択して、スタイルエディタに画面を切り替えます。
  2. Hide image

  3. スタイルエディタの画面に切り替わったら、右側にあるリストの SpeedButton1Style の左にある▲をマウスでクリックしてスタイルの内容を展開します。

Hide image
Click to see full-sized image

展開されたスタイルの内容を見ると、ここに複数のアニメーションコンポーネントが含まれています。

このアニメーションコンポーネントが、先程マウスがコンポーネント上に移動したときに、ボタン自身を浮き上がらせる表示を行っていた部分となります。

このリスト上の TFloatAnimation をマウスでクリックし、オブジェクトインスペクタ側を確認すると、SpeedButton のコントロールの不透明度を設定する Opacity プロパティに対し、Trigger/TriggerInverse プロパティで IsMouseOver=true, IsMouseOver=false がそれぞれ設定されています。

Hide image

Trigger プロパティには、このアニメーションを開始するためのイベント動作が、TriggerInverse プロパティには、このアニメーションを逆方向に開始するためのイベント動作が設定されているために、 マウスがコンポーネント上に移動したとき現れ、コンポーネント上から移動したときに消えるという仕掛けになっています。

色の変更のアニメーションは4つ設定されている TColorAnimationコンポーネントで行われています。

これは 2つずつペアになっています。スタイルエディタ上の TFloatAnimation下の TColorAnimation とその下の TColorAnimationをマウスでクリックして、オブジェクトインスペクタで確認します。

Hide image
Click to see full-sized image

アニメーションの対象となる PropertyName プロパティには Fill.Color が、また StartValue/StopValue プロパティにはそれぞれ同じ色が交互に設定されています。

アニメーションを開始させる動作を指定する Trigger プロパティを確認すると、一方は

IsMouseOver=true;IsPressed=false

もう一方は

IsMouseOver=false;IsPressed=false

となっており、ボタンが押されていない状態で、マウスがコントロール上にある場合と、コントロール外に移動した際にアニメーションが動作するように設定が行われています。

他の 2つの TColorAnimationは、ボタンが押されている場合でという条件(IsPressed=true)とボタンを押したときの色が違っているだけのアニメーション設定になります。

表でまとめてみましょう。

IsMouseOver = true

IsMouseOver = false

IsPressed = false

ボタンが白(#FFEFEFEF)から黄色(#FFFFD541)に 0.2秒(Duration)かけて変化

ボタンが黄色(#FFFFD541)から白(#FFEFEFEF)に 0.2秒(Duration)かけて変化

IsPressed = true

ボタンが濃い黄色(#FFDCAE0D)から黄色(#FFFFD541)に 0.2(Duration)かけて変化

逆方向の動作(Inverse)が Trueに設定されているのでボタンが黄色(#FFFFD541)から濃い黄色(#FFDCAE0D)に 0.2秒(Duration)かけて変化

     

    まとめ

このように、コードを記載せず、単純にプロパティの設定だけでアニメーション効果を設定することができ、更に、スタイルとして定義しているので、他のコンポーネントでも、このスタイル名を指定するだけで同じ効果を得ることが可能です。

例えば、エラーが発生したときだけメッセージを原因となる個所に表示する、操作手順を順に案内するというような効果を適用したい場合などに、このようなアニメーション効果が使用できます。



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