アニメーションを受けるコントロールを変更する方法（サンプル3）
ここまでのアニメーションはすべてAnimationExtenderコントロールのTargetControlIDプロパティに設定されたコントロールに対して行われています。しかし、各アニメーションにAnimationTargetプロパティにコントロールIDを指定することで、指定されたコントロールに対してアニメーションを実行することが可能になります。
サンプル3概要
ページ上にButtonコントロールとPanelコントロールを配置し、プロパティ設定はデフォルトの状態にします。このサンプルのフォームレイアウトもサンプル1と同じです。Buttonコントロールの上にマウスがある場合にPanelコントロールの色を紫に変更し、コントロールからマウスが離れると赤色に変更するためのコードは次のようになります。
<ajaxToolkit:AnimationExtender ID="AnimationExtender1" runat="server" TargetControlID="Button1"> <Animations> <OnHoverOver> <Color AnimationTarget="Panel1" Duration="1." Fps="5" StartValue="#ffffff" EndValue="#800080" Property="style" PropertyKey="backgroundColor" /> </OnHoverOver> <OnHoverOut> <Color AnimationTarget="Panel1" Duration=".5" Fps="30" StartValue="#800080" EndValue="#DC143C" Property="style" PropertyKey="backgroundColor" /> </OnHoverOut> </Animations> </ajaxToolkit:AnimationExtender>
実行時の画面は図17のようになります。OnHoverOverのイベントが発生している時は図18のようになり、OnHoverOutのイベントが発生している時には図19のようになります。
AnimationTargetプロパティの注意点として、ASP.NETのコントロールIDを設定すべきではないという点です。AnimationTargetプロパティに設定するIDはClientIDプロパティを使用する必要があります。例えば、マスターページを使用しているページに対してAnimationTargetプロパティを設定する場合は[ctl00_ContentPlaceHolderID_コントロール名]というように設定します。ページ内に名前付コンテナを使用していない場合、ASP.NETのコントロールIDを直接入力することも可能です。
コントロールのFadeを調整する方法（サンプル4）
アニメーションの動作の1つにコントロールのFade（はっきり表示もしくはぼんやり表示）を調整するFadeIn Animation、FadeOut Animationがあります。
サンプル4概要
ページ上にLabelコントロールとPanelコントロールを配置します。プロパティ設定はPanelのBackColorプロパティだけ任意の色に設定してください（図20）。
Labelコントロールの上にマウスがある場合にPanelコントロールのFadeをはっきり表示し、コントロールからマウスが離れるとぼんやり表示させるコードは次のようになります。
<ajaxToolkit:AnimationExtender ID=" AnimationExtender1" runat="server" TargetControlID="Label1"> <Animations> <OnLoad> <OpacityAction AnimationTarget="Panel1" Opacity=".2" /> </OnLoad> <OnHoverOver> <FadeIn AnimationTarget="Panel1" Duration=".25" Fps="20" MinimumOpacity=".2" MaximumOpacity="1." /> </OnHoverOver> <OnHoverOut> <FadeOut AnimationTarget="Panel1" Duration=".25" Fps="20" MinimumOpacity=".2" MaximumOpacity="1." /> </OnHoverOut> </Animations> </ajaxToolkit:AnimationExtender>
実行時の画面は図21のようになります。OnHoverOverのイベントが発生している時は図22のようになり、OnHoverOutのイベントが発生している時には図23のようになります。
Fadeの調整は最小、最大の半透明値を設定することで対象のコントロールのFadeが遷移します。FadeInとFadeOutを、OnHoverイベントやOnMouseイベントで使用する時には最小値と最大値の設定を同じ値にすることで、滑らかなFadeが実装されます（異なる場合は少し不自然なFadeになります）。Opacityプロパティの値は1.0が最大で、0.0が最小となっています。FadeIn Animation、FadeOut Animationの特徴として、タグ内に属性を指定しない場合はそれぞれ最小値が0.0に、最大値が1.0に設定されます。
