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

提供: RAD Studio
移動先: 案内検索

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


FireMonkey には、選択されたプロパティの値を時間が経つにつれて変更する、多種多様なアニメーション効果が組み込まれています。

Examples of アニメーション効果の例:

プロパティの種類 アニメーション効果のクラス
整数の任意のプロパティ TIntAnimation
実数の任意のプロパティ TFloatAnimation
TBounds プロパティで定義されるコンポーネントの場所 TRectAnimation
色を含む文字列または整数のプロパティ TColorAnimation
グラデーション(TGradient 型) TGradientAnimation
ビットマップ画像 TBitmapAnimation

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

ステップ 1: TFloatAnimation を使用して浮動小数点プロパティ値を変化させる

FireMonkey では、浮動小数点数を使用しているプロパティであればどれも、TFloatAnimation のアニメーション効果を使って変化させることができます。 では、アニメーション効果を使って値を変化させてみましょう。

  1. FireMonkey HD アプリケーションを新規作成します:
  2. フォーム デザイナに TRectangle コンポーネントを配置します。 それには、[ツール パレット]の検索ボックスに「rec」と入力し、[TRectangle]コンポーネントをダブルクリックします。
    Select TRectangle.png
    [ツール パレット]で[TRectangle]コンポーネントを選択する
    WhiteSpace50.png
    TRectangle on Form.png
    フォーム デザイナに配置された TRectangle コンポーネント
    WhiteSpace50.png
  3. TRectangle コンポーネントをフォーム デザイナに配置すると、フィルム アイコン(FilmIcon.png)の付いたプロパティがいくつか[オブジェクト インスペクタ]に表示されます。 このフィルム アイコンは、そのコンポーネント プロパティをアニメーションで変化させられることを表します。
    PropertiesForTRectangle.png
    次に示すのは、TFloatAnimation で変化させることが可能な代表的なプロパティです(コンポーネントによって異なります)。
    • [高さ]
    • Position.X
    • Position.Y
    • RotationAngle
    • RotationCenter.X
    • RotationCenter.Y
    • Scale.X
    • Scale.Y
    • StrokeThickness
    • XRadious
    • YRadious
    • [幅]

    WhiteSpace50.png
  4. プロパティの値を変更するには、RotationAngle プロパティのドロップダウン メニューをクリックし、[TFloatAnimation の新規作成]を選択します。
    CreateNewFloatAnimation.png
    WhiteSpace50.png
  5. これで TFloatAnimation コンポーネントが新しく作成されます。 [構造]ペインを見ると、FloatAnimation1Rectangle1 の子として定義されていることがわかります。
    FloatAnimationAtStructure.png
    メモ: アニメーション効果コンポーネントの効果は親コンポーネントに対して適用されることを覚えておいてください。
    WhiteSpace50.png
  6. [オブジェクト インスペクタ]には FloatAnimation1 コンポーネントのプロパティが表示されています。 以下のプロパティを表に示すように変更します。
    Property 説明
    Duration 5 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。
    Enabled True アプリケーションの起動時にアニメーションが開始します。
    Loop True アニメーションを無限に繰り返します。
    StopValue 360 アニメーションによるプロパティの変化はこの値に到達すると終了します。

    WhiteSpace50.png
    PropertiesOfFloatAnimation.png
    FloatAnimation1 のプロパティWhiteSpace50.png



    もう 1 つの重要なプロパティに PropertyName があり、自動的に定義されています。 ここでは、このプロパティは RotationAngle に設定されています。つまり、このアニメーションは親コンポーネントの RotationAngle プロパティの値に影響します。

    WhiteSpace50.png

  7. アプリケーションを実行します。 四角形コンポーネントがフォーム上で回転します。
    RectangleWithRotate.png
    WhiteSpace50.png
  8. 同じ手順で、任意の数値プロパティをアニメーション化することができます。


WhiteSpace50.png

ステップ 2: TColorAnimation を追加して色を変化させる

このチュートリアルの最初に述べたように、FireMonkey には数多くのアニメーション効果が組み込まれています。 ステップ 1 で説明した回転に加えて、今度は、色アニメーションを適用して四角形の色を変化させます。

  1. [ツール パレット]で[TColorAnimation]コンポーネントを選択します。 それには、[ツール パレット]の検索ボックスに「anim」と入力し、[TColorAnimation]をダブルクリックします。
    WhiteSpace50.png
    SelectColorAnimation.png
    WhiteSpace50.png
    ColorAnimationAtStructure.png
    TColorAnimation コンポーネントが[構造]ペインに追加されます。

    WhiteSpace50.png
  2. FloatAnimation1Rectangle1 の子として定義されていますが(ステップ 1 で説明したとおり)、TColorAnimation1 は Form4 の子として定義されています。 ColorAnimation1Rectangle1 にドラッグ アンド ドロップします。 これで、ColorAnimation1Rectangle1 の子として定義され、ColorAnimation1Rectangle1 に影響するようになりました。
    DnDColorAnimation.png
    WhiteSpace50.png
  3. [オブジェクト インスペクタ]には TColorAnimation1 コンポーネントのプロパティが表示されています。 以下のプロパティを表に示すように変更します。
    Property 説明
    PropertyName Fill.Color アニメーションで変化させるプロパティの名前。
    Enabled True アプリケーションの起動時にアニメーションが開始します。
    Duration 3 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。
    Loop True アニメーションを無限に繰り返します。
    AutoReverse True 通常のアニメーションが終わった後、逆向きにアニメーションが行われます。
    StopValue アニメーションによるプロパティの変化はこの値に到達すると終了します。

    WhiteSpace50.png
    PropertiesOfColorAnimation.png
    ColorAnimation1 のプロパティ
    WhiteSpace50.png

  4. アプリケーションを実行します。 今度は、四角形コンポーネントがフォーム上で回転し、さらにその色が赤へと変化します。
    RotateWithColor.png
    WhiteSpace50.png

WhiteSpace50.png

ステップ 3: TBitmapAnimation を使用して画像を変化させる

このチュートリアルの最後のステップでは、画像コンポーネントにビットマップ アニメーションを適用します。

  1. このチュートリアルのステップ 1 と同様に、FireMonkey アプリケーションを新規作成します。
    WhiteSpace50.png
  2. フォーム デザイナに TImage コンポーネント(Image1)を配置します。
    WhiteSpace50.png
  3. フォーム デザイナに TBitmapAnimation コンポーネントを配置します。 [構造]ビューで、このコンポーネント(BitmapAnimation1)を Image1 の子に設定します。
    BitmapAnimation.png
    WhiteSpace50.png
  4. BitmapAnimation1 のプロパティを[オブジェクト インスペクタ]で次のように設定します。
    Property 説明
    PropertyName Bitmap アニメーションで変化させるプロパティの名前。
    Enabled True アプリケーションの起動時にアニメーションが開始します。
    Duration 10 開始値から終了値までアニメーションで変化させるためにかける時間(秒単位)。
    Loop True アニメーションを無限に繰り返します。
    AutoReverse True 通常のアニメーションが終わった後、逆向きにアニメーションが行われます。
    StartValue BitmapAnimation1.png プロパティのアニメーションをこのビットマップ画像から開始します。
    StopValue BitmapAnimation5.png アニメーションによるプロパティの変化はこのビットマップ画像に到達すると終了します。

    WhiteSpace50.png

  5. StartValue プロパティと EndValue プロパティを設定します。 この 2 つのプロパティは、最初の画像と最後の画像を保持します。 [編集...]メニューをクリックし、ビットマップ エディタを使って好きな画像を選択します。
    EditBitmapAnimation.png
    WhiteSpace50.png
  6. アプリケーションを実行します。 時間が経つにつれて、2 つの画像がアニメーションで変化します。
    BitmapAnimation1.pngBitmapAnimation2.pngBitmapAnimatio3.pngBitmapAnimation4.pngBitmapAnimation5.png

関連項目

サンプル