FireMonkey のアニメーション効果の利用
FireMonkey クイック スタート ガイド - 画像効果とアニメーション効果の利用 への移動
目次
FireMonkey には、選択されたプロパティの値を時間が経つにつれて変更する、多種多様なアニメーション効果が組み込まれています。
Examples of アニメーション効果の例:
プロパティの種類 | アニメーション効果のクラス |
---|---|
整数の任意のプロパティ | TIntAnimation |
実数の任意のプロパティ | TFloatAnimation |
TBounds プロパティで定義されるコンポーネントの場所 | TRectAnimation |
色を含む文字列または整数のプロパティ | TColorAnimation |
グラデーション(TGradient 型) | TGradientAnimation |
ビットマップ画像 | TBitmapAnimation |
このチュートリアルでは、いくつかの基本的なアニメーション効果を FireMonkey アプリケーションで使用してみます。
ステップ 1: TFloatAnimation を使用して浮動小数点プロパティ値を変化させる
FireMonkey では、浮動小数点数を使用しているプロパティであればどれも、TFloatAnimation のアニメーション効果を使って変化させることができます。 では、アニメーション効果を使って値を変化させてみましょう。
-
FireMonkey HD アプリケーションを新規作成します:
-
- [ファイル|新規作成|マルチデバイス アプリケーション|空のアプリケーション]
-
-
フォーム デザイナに TRectangle コンポーネントを配置します。 それには、[ツール パレット]の検索ボックスに「rec」と入力し、[TRectangle]コンポーネントをダブルクリックします。
[ツール パレット]で[TRectangle]コンポーネントを選択する
フォーム デザイナに配置された TRectangle コンポーネント
-
TRectangle コンポーネントをフォーム デザイナに配置すると、フィルム アイコン()の付いたプロパティがいくつか[オブジェクト インスペクタ]に表示されます。 このフィルム アイコンは、そのコンポーネント プロパティをアニメーションで変化させられることを表します。
次に示すのは、TFloatAnimation で変化させることが可能な代表的なプロパティです(コンポーネントによって異なります)。- [高さ]
- Position.X
- Position.Y
- RotationAngle
- RotationCenter.X
- RotationCenter.Y
- Scale.X
- Scale.Y
- StrokeThickness
- XRadious
- YRadious
- [幅]
-
プロパティの値を変更するには、RotationAngle プロパティのドロップダウン メニューをクリックし、[TFloatAnimation の新規作成]を選択します。
-
これで TFloatAnimation コンポーネントが新しく作成されます。 [構造]ペインを見ると、FloatAnimation1 が Rectangle1 の子として定義されていることがわかります。
- メモ: アニメーション効果コンポーネントの効果は親コンポーネントに対して適用されることを覚えておいてください。
- メモ: アニメーション効果コンポーネントの効果は親コンポーネントに対して適用されることを覚えておいてください。
-
[オブジェクト インスペクタ]には FloatAnimation1 コンポーネントのプロパティが表示されています。 以下のプロパティを表に示すように変更します。
Property 値 説明 Duration 5 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。 Enabled True アプリケーションの起動時にアニメーションが開始します。 Loop True アニメーションを無限に繰り返します。 StopValue 360 アニメーションによるプロパティの変化はこの値に到達すると終了します。
- もう 1 つの重要なプロパティに PropertyName があり、自動的に定義されています。 ここでは、このプロパティは RotationAngle に設定されています。つまり、このアニメーションは親コンポーネントの RotationAngle プロパティの値に影響します。
- もう 1 つの重要なプロパティに PropertyName があり、自動的に定義されています。 ここでは、このプロパティは RotationAngle に設定されています。つまり、このアニメーションは親コンポーネントの RotationAngle プロパティの値に影響します。
-
アプリケーションを実行します。 四角形コンポーネントがフォーム上で回転します。
- 同じ手順で、任意の数値プロパティをアニメーション化することができます。
ステップ 2: TColorAnimation を追加して色を変化させる
このチュートリアルの最初に述べたように、FireMonkey には数多くのアニメーション効果が組み込まれています。 ステップ 1 で説明した回転に加えて、今度は、色アニメーションを適用して四角形の色を変化させます。
-
[ツール パレット]で[TColorAnimation]コンポーネントを選択します。 それには、[ツール パレット]の検索ボックスに「anim」と入力し、[TColorAnimation]をダブルクリックします。
TColorAnimation コンポーネントが[構造]ペインに追加されます。
-
FloatAnimation1 は Rectangle1 の子として定義されていますが(ステップ 1 で説明したとおり)、TColorAnimation1 は Form4 の子として定義されています。 ColorAnimation1 を Rectangle1 にドラッグ アンド ドロップします。 これで、ColorAnimation1 が Rectangle1 の子として定義され、ColorAnimation1 が Rectangle1 に影響するようになりました。
-
[オブジェクト インスペクタ]には TColorAnimation1 コンポーネントのプロパティが表示されています。 以下のプロパティを表に示すように変更します。
Property 値 説明 PropertyName Fill.Color アニメーションで変化させるプロパティの名前。 Enabled True アプリケーションの起動時にアニメーションが開始します。 Duration 3 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。 Loop True アニメーションを無限に繰り返します。 AutoReverse True 通常のアニメーションが終わった後、逆向きにアニメーションが行われます。 StopValue 赤 アニメーションによるプロパティの変化はこの値に到達すると終了します。 -
アプリケーションを実行します。 今度は、四角形コンポーネントがフォーム上で回転し、さらにその色が赤へと変化します。
ステップ 3: TBitmapAnimation を使用して画像を変化させる
このチュートリアルの最後のステップでは、画像コンポーネントにビットマップ アニメーションを適用します。
-
このチュートリアルのステップ 1 と同様に、FireMonkey アプリケーションを新規作成します。
-
フォーム デザイナに TImage コンポーネント(Image1)を配置します。
-
フォーム デザイナに TBitmapAnimation コンポーネントを配置します。 [構造]ビューで、このコンポーネント(BitmapAnimation1)を Image1 の子に設定します。
-
BitmapAnimation1 のプロパティを[オブジェクト インスペクタ]で次のように設定します。
Property 値 説明 PropertyName Bitmap アニメーションで変化させるプロパティの名前。 Enabled True アプリケーションの起動時にアニメーションが開始します。 Duration 10 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。 Loop True アニメーションを無限に繰り返します。 AutoReverse True 通常のアニメーションが終わった後、逆向きにアニメーションが行われます。 StartValue プロパティのアニメーションをこのビットマップ画像から開始します。 StopValue アニメーションによるプロパティの変化はこのビットマップ画像に到達すると終了します。 -
StartValue プロパティと EndValue プロパティを設定します。 この 2 つのプロパティは、最初の画像と最後の画像を保持します。 [編集...]メニューをクリックし、ビットマップ エディタを使って好きな画像を選択します。
-
アプリケーションを実行します。 時間が経つにつれて、2 つの画像がアニメーションで変化します。
関連項目
サンプル
- FireMonkey HD アニメーション サンプル
- FireMonkey 3D アニメーション サンプル