AFsoft WebSite (AFsoft.JP)

DelphiXE3　[FMX] カラーアニメーション（ColorAnimation）2013/11/05

　
前回は [Common Controls]内のタブコントロール(TabControl)について見てみました。これだけで[Common Controls]内は終了となります。次は[Animations]内について見ていきます。
　
[Animations]内

FMX

　
ここでいうアニメーションとは、メディアプレイヤーのような動画再生ということではなく、色を徐々に変えていく等のようなアニメーション効果の事を指すようです。こういった事を専用で行うコンポーネントは Delphi2010・VCLアプリケーションには無かったと思われます。
　
まずはその中の最初のコンポーネント　カラーアニメーション（ColorAnimation）から。ヘルプより。

オブジェクトの TColor 型のプロパティに付加することで、その値を徐々に変化させます。
　
次のいずれかの方法で、親オブジェクト TFmxObject に TColorAnimation を付加することができます。
　
・親オブジェクトを選択し、［ツールパレット］で［TColorAnimation］をダブルクリックします。その後、アニメーション化したい親オブジェクトのプロパティの名前を PropertyName に設定します。
・親オブジェクトの［オブジェクトインスペクタ］で、アニメーション化したいプロパティの横のフィルムアイコンをダブルクリックします。これによって PropertyName が割り当てられます。
・TColorAnimation のインスタンスを動的に作成し、その親として親オブジェクトを割り当てます。その後、PropertyName を設定します。
　
TColorAnimation の StopValue プロパティに、アニメーションで変化させる値の終了値を割り当てます。Duration プロパティに、アニメーションを継続する秒数を設定します。プロパティの現在の値とは異なる値からアニメーションを開始したい場合には、StartValue を設定し、StartFromCurrent を False に設定します。アニメーションを何度も繰り返す場合には、Loop プロパティを使用します。開始および停止には Start メソッドおよび Stop メソッドを使用します。または TColorAnimation の［オブジェクトインスペクタ］で Enabled プロパティを設定すると、実行時に開始されます。AnimationType および Interpolation を設定すると、アニメーションの変化速度を制御することができます。

　
OnFinish

アニメーションが停止された後に呼び出されるイベントハンドラです。
　
Start を呼び出すプロシージャが完了してアニメーションが開始された後、Duration の秒数間、継続されます。アニメーションが完了した後に必要な処理を、OnFinish イベントハンドラ内に配置します。OnFinish は、Loop プロパティが True の場合、Stop メソッドが呼び出されない限り、呼び出されません。
　
OnFinish は、アニメーションの完了を監視し応答するには、適切な場所です。

OnProcess

アニメーションの処理中に呼び出されるイベントハンドラ。
　
OnProcess は、アニメーションによって制御される値が変更されるたびに、繰り返し呼び出されます。アニメーションが親オブジェクトの見た目を変更させた場合、親オブジェクトは自動的に再描画されます。OnProcess 内での処理が、親の境界ボックスの外側の描画を発生させた場合、そのフォームの Invalidate メソッドを呼び出します。
　
OnProcess は、アニメーション内での変更を監視し応答するには、適切な場所です。OnProcess を、親の OnPaint イベントの代わりに使用します。
　
Sender は、TAnimation およびその親オブジェクトが属するフォームです。

AnimationType

このアニメーションの補間が、アニメーションプロパティに対してどのように適応されるかを設定します。

atIn：開始値から開始
atOut：終了値から開始され、開始値に向けて逆方向に
atInOut：開始値および終了値の両方から開始され、中央の点で接します

AutoReverse

前にアニメーションした後、逆にアニメーションします。

Delay

アニメーションを開始するまで待機する秒数

Duration

開始値から終了値までの、アニメーションする時間（秒数）

Interpolation

アニメーションによって制御されている値が時間の経過と共にどのように変化するのかを設定します。※１

Inverse

前方の代わりに後方へとアニメーションします。

Loop

アニメーションを無制限に繰り返します。

PropertyName

アニメーションするプロパティの名前。

StartFromCurrent

このプロパティのアニメーションを、現在値から開始します。

StartValue

このプロパティのアニメーションを、この値から開始します。

StopValue

このプロパティのアニメーションが、指定の値に到達した際に、停止します。

Trigger

親オブジェクトのプロパティの状態であり、アニメーションを開始するために使用することができます。

TTrigger：
アニメーションの親オブジェクトの状態を示します。
TTrigger は、アニメーションの親の論理型プロパティの状態を示す文字列です。該当するプロパティには次のものがあります。
IsMouseOver
IsFocused
IsVisible
IsDragOver
IsOpen
TTrigger に割り当てられる文字列は、上記プロパティいずれかの名前の後に "=true" または "=false" を付けたものになります。

TriggerInverse

親オブジェクトのプロパティの状態であり、アニメーションを逆方向に開始するために使用することができます。

　
※１：Interpolationの型（ヘルプより）

itLinear	線形補間。このアニメーションが適用されるプロパティ値は、時間と共に一定の割合で変化します。
itQuadratic	開始点と終了点の間のパスに 2 次関数が適用されます。パスの傾きは開始点で 0 であり、時間と共に常に増加します。終了点がパス上にくるよう、関数にはスカラが適用されます。
itCubic	補間は y = x**3 という形式になります。パスの傾きは開始点で 0 であり、パスを進むにつれて 2 次関数の場合よりもさらに速く増加します。
itQuartic	補間は y = x**4 という形式になります。パスの傾きは開始点で 0 であり、パスを進むにつれて 2 次関数の場合よりもさらに速く増加します。
itQuintic	補間は y = x**5 という形式になります。パスの傾きは開始点で 0 であり、パスを進むにつれて 2 次関数の場合よりもさらに速く増加します。
itSinusoidal	補間は y = sin(x) という形式になります。パスの傾きは開始点で 0 であり、サイン曲線の最初の変曲点（x=pi）が終了点になります。
itExponential	補間は y = e**xという形式になります。パスの傾きは開始点で 1 であり、パスを進むにつれて 2 次関数の場合よりもさらに速く増加します。
itCircular	この補間では、開始点と終了点の間のパスは円周の 4 分の 1 です。パスの傾きは開始点で 0 であり、終了点で垂直になります。
itElastic	パスは幾何学的補間に合致しません。値（y 座標）は減少して開始値に向かって戻る可能性がありますが、時間（x の値）は常に正の方向に進まなければなりません。
itBack	パスは幾何学的補間に合致しません。値（y 座標）は減少して開始値に向かって戻る可能性がありますが、時間（x の値）は常に正の方向に進まなければなりません。
itBounce	パスは跳ねるボールを表します。パスは、開始点と終了点を結ぶ直線から湾曲が離れていく複数の円曲線から構成されます。曲線どうしは尖った点で接続されます。

補間で指定されたパスは、TAnimation と TFloatAnimation のいくつかのプロパティの影響を受ける可能性があります。上記の説明は次の条件でのものです：
・StartFromCurrent = True
・AnimationType = atIn
AnimationType を atOut に設定すると、上の説明で開始点について述べたことがすべて、終了点に適用されます。これらのアニメーションプロパティの効果については、各プロパティのドキュメントを参照してください。

というわけで、試してみます。
　
カラーアニメーションを配置し、PropertyNameプロパティを、右端[▼]ボタンをクリックして選択出来る「Fill.Color」にします。この親オブジェクト＝Form1 の Fill.Colorプロパティ、という事ですね。
　
次に、フォーム Form1 の Fill.Kind プロパティを「bkSolid」にします。これをしないと「指定色で塗り潰し」になりませんので。

次に、
カラーアニメーションをいつ開始するのか分からないのでボタンを配置し、ボタンをクリックしたらアニメーション開始することにします。

procedure TForm1.
　Button1Click(Sender: TObject);
begin
　ColorAnimation1.Enabled
　　:= True ;
end;

「ColorAnimation1.Start ;」でも構いません。

　
保存・コンパイル（ビルド）・実行を行います。

開始ボタンをクリック
↓

白色が徐々に黒色になっていきます
（変化は速いですが）

　
１回で終了しますが、何度も繰り返したい場合は、Loopプロパティを「True」にすれば良いでしょう。
　　白→（アニメ）→黒→白→（アニメ）→黒→白→…
となります。これを、
　　白→（アニメ）→黒→（アニメ）→白→（アニメ）→黒→（アニメ）→白→…
としたい場合は、
AutoReverseプロパティを「True」にすれば良いでしょう。
　
ループを止めたい場合は、
　　ColorAnimation1.Enabled := False ;
又は
　　ColorAnimation1.Stop ;
で良いようです。
　
　

バッチファイル
ＢＡＳＩＣ
C言語のお勉強
拡張子な話
DOSプログラム
Delphi
>Delphi入門編
>Delphi2010
>DelphiXE3
▲2013/11/04
　2013/11/05
▼2013/11/06
　
シェアウェア
Script!World
データベース
　