Ajax対応コントロールでJavaScriptレス アニメーションを実装する

AnimationExtenderコントロール（ASP.NET AJAX Control Toolkit）の利用方法を学習する

コントロールを隠す方法とスタイルを変更する方法（サンプル6）

　アニメーションの動作の中で変わっている物として、ターゲットのコントロールその物を隠してしまうHide Actionがあります。また、対象のコントロールのスタイルの一部を設定するStyle Actionがあります。

サンプル6概要

　ページ上にLabelコントロールとPanelコントロールを配置します。プロパティ設定はPanelのBackColorプロパティだけ任意の色に設定してください（図30）。

図30 サンプル6のフォームレイアウト画面

　以下のようなソースを記述します。

default.aspx（一部）

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" 
        runat="server" TargetControlID="Label1">
    <Animations>
        <OnHoverOver>
            <Sequence>
                <StyleAction AnimationTarget="Panel1" 
                    Attribute="display" Value=""/>
            </Sequence>
        </OnHoverOver>
        <OnHoverOut>
            <Sequence>
                <HideAction AnimationTarget="Panel1" />
            </Sequence>
        </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>
<ajaxToolkit:AnimationExtender ID="AnimationExtender2" 
        runat="server" TargetControlID="Panel1">
    <Animations>
        <OnClick>
            <Sequence>
                <Resize Fps="10" Duration=".5" Width="200" 
                    Height="300" Unit="px" />
            </Sequence>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>

　実行すると、実行直後の画面は図31のようになります。OnHoverOverのイベントが発生している時は図31のようになり、OnHoverOutのイベントが発生している時には図32のようになります。また、先にPanelのOnClickイベント終了後は図33のようになります。

図31 サンプル6の実行時とOnHoverOverイベント時の画面

図32 サンプル6のOnHoverOutイベント時の画面

図33 サンプル6のOnClickイベント時の画面

　実行時にはPanelコントロールが表示されていますが、Labelコントロールの上にマウスが移動した後にLabelコントロールからマウスが離れると、Panelコントロールは隠れます。もし、Label上にマウスがある場合はPanelコントロールが表示されます。

　また、実行後最初にPanelコントロールをクリックすることで、Panelコントロールのサイズは拡大されますが、Panelコントロールが隠れている時にPanelコントロールがあった場所をクリックしても、Panelコントロールは拡大されません。

　実行すると分かるのですが、姿が隠れている間は、たとえ、そのコントロールにアニメーションを付加していても、実行させることはできません。主にこのコントロールはプロパティを付加させないで利用することが多くなるでしょう。Style Actionはスタイルの中でどれか1種類だけ設定を変更させることができます。複数のスタイルの変更を行いたい場合はその数だけStyle Actionを用意する必要があります。Style ActionはAttributeプロパティに対象のプロパティ名を、Valueにその値を記述することで動作します。

アニメーションリファレンス

　最後に今回利用しなかったアニメーションも含めて、すべてのアニメーションと利用可能なプロパティをまとめてみました。各プロパティの詳細については実際にリファレンスを見て調べてください。

図34 アニメーションとプロパティ

まとめ

　本稿ではControl ToolkitのAnimationExtenderコントロールに絞り、アニメーションの解説と同時に基本的なサンプルを用いたWebページを実装してみました。プロパティウィンドウからの設定ができない、インテリセンスが効かないといったコントロールですので少し難易度が高かったと思います。そこで、本稿ではサンプルを多めに用意しましたがアニメーションの数が多いため、今回すべてのアニメーションに触れることができませんでした。リファレンスを参考にして、ぜひ他のアニメーションも利用して遊んでみてください。

　また、本稿ではあくまで基本的な部分にしか触れていませんので、もっと知りたい方はAnimation Referenceを参考にしてください。

参考資料

1. ASP.NET AJAX（公式ページ：英語）
2. ASP.NET AJAX Control Toolkit（ドキュメント：英語）