アニメーションを受けるコントロールを変更する方法(サンプル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のようになります。
![図17 サンプル3の実行時の画面 図17 サンプル3の実行時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_17.gif)
![図18 サンプル3のOnHoverOverイベント時の画面 図18 サンプル3のOnHoverOverイベント時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_18.gif)
![図19 サンプル3のOnHoverOutイベント時の画面 図19 サンプル3のOnHoverOutイベント時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_19.gif)
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)。
![図20 サンプル4のフォームレイアウト画面 図20 サンプル4のフォームレイアウト画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_20.gif)
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のようになります。
![図21 サンプル4の実行時の画面 図21 サンプル4の実行時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_21.gif)
![図22 サンプル4のOnHoverOverイベント時の画面 図22 サンプル4のOnHoverOverイベント時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_22.gif)
![図23 サンプル4のOnHoverOutイベント時の画面 図23 サンプル4のOnHoverOutイベント時の画面](http://cz-cdn.shoeisha.jp/static/images/article/883/883_23.gif)
Fadeの調整は最小、最大の半透明値を設定することで対象のコントロールのFadeが遷移します。FadeInとFadeOutを、OnHoverイベントやOnMouseイベントで使用する時には最小値と最大値の設定を同じ値にすることで、滑らかなFadeが実装されます(異なる場合は少し不自然なFadeになります)。Opacity
プロパティの値は1.0が最大で、0.0が最小となっています。FadeIn Animation、FadeOut Animationの特徴として、タグ内に属性を指定しない場合はそれぞれ最小値が0.0に、最大値が1.0に設定されます。