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

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

AnimationExtenderコントロールによるアニメーション作成

　ここから先は実際にAnimationExtenderコントロールを設定して動作を確認してみましょう。全部で6個のサンプルを用意していますので、環境の準備が可能であれば、実際に入力して試してみてください。

AnimationExtenderコントロールの使い方（サンプル1）

　次々とアニメーションを実行するSequence Animation、コントロールのサイズを変更するResize Animation、コントロールの色を変更するColor Animationの3つを利用して実際にサンプルを作成します。

サンプル1概要

　ページ内にPanelコントロールを配置し、クリックをすることで、Panelコントロールのサイズとバックカラーを変更します。

　［AJAX Control Toolkit Web Site］のテンプレートにある［default.aspx］上にツールボックスからAnimationExtenderコントロールとPanelコントロールを貼り付けます。PanelコントロールのプロパティはBackColorに任意の色を設定してください（図10）。

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

　設定後HTMLデザイナ画面に切り替えて、AnimationExtenderコントロールのプロパティを次のように記述してください。

default.aspx（一部）

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" 
        runat="server" TargetControlID="Panel1">
    <Animations>
        <OnClick>
            <Sequence>
                <Resize Duration=".5" Fps="10" Width="200" 
                        Height="100" Unit="px" />
                <Color Duration=".5" Fps="30" StartValue="#800080" 
                        EndValue="#4682B4" Property="style" 
                        PropertyKey="backgroundColor" />
            </Sequence>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>

　以上でサンプルは完成です。入力後に［F5］を押して実行、または［Ctrl］+［F5］を押して実行してみてください。実行時の画面は図11のようになります。途中経過は図12のようになり、最終的に図13のようになります。

図11 サンプル1の実行時の画面

図12 サンプル1のアニメーション動作中の画面

図13 サンプル1のアニメーション動作終了時の画面

　パネルのサイズが大きくリサイズされた後に背景色が変更されたと思います。Sequence Animationは、タグ直下の子アニメーションを次々に実行するアニメーションです。Resize Animationは幅、高さの値とUnit型の単位を設定しました。Color Animationは、始まりの色と終わりの色をJavaScriptの記述と同じように設定する必要があるので、Propertyプロパティにはstyleを、PropertyKeyには色を変更する対象の部分（backgroundColor、Color等）を設定する必要があります。

　また、Sequence Animationは内部に複数の子アニメーションを含ませて順番に処理することができるので、Resize Animation、Color Animationなど任意のアニメーションを併記することが可能です。

同時に複数のアニメーションを実行する方法（サンプル2）

　サンプル1で利用したSequence Animationの特性上サイズの変更と色の変更は同時に行うことができませんでした。同時にアニメーションを実行したい場合はParallel Animationを利用します。

サンプル2概要

　ページ上にPanelコントロールを配置し、プロパティ設定はPanelのBackColorプロパティだけ任意の色に設定してください。このサンプルのフォームレイアウトはサンプル1と同じです。Panelコントロールをクリックすると、サイズと色の変更が同時に行われることを確認できるように、次のようなコードを記述します。

default.aspx（一部）

<ajaxToolkit:AnimationExtender ID="AnimationExtender1" 
        runat="server" TargetControlID="Panel1">
    <Animations>
        <OnClick>
            <Parallel Duration=".5" Fps="30">
                <Resize Width="200" Height="100" Unit="px" />
                <Color StartValue="#800080" EndValue="#4682B4" 
                     Property="style" PropertyKey="backgroundColor" />
            </Parallel>
        </OnClick>
    </Animations>
</ajaxToolkit:AnimationExtender>

　実行時の画面は図14のようになります。途中経過は図15のようになり、最終的に図16のようになります。

図14 サンプル2の実行時の画面

図15 サンプル2のアニメーション動作中の画面

図16 サンプル2のアニメーション動作終了時の画面

　Parallel Animationの有効的な活用方法として、FpsプロパティとDurationプロパティをParallel Animationに記述するという方法です。これを行うことで、Parallel Animation内にあるアニメーションにはFpsプロパティとDurationプロパティの記述の必要がなくなります。

Parallel Animation利用上の注意

　Parallel Animationは特性上内部にあるアニメーションを同時に実行させることができますが、同一のアニメーションを複数同時に実行させることはできません。例えば、サイズを伸ばすResize Animationとサイズを縮めるResize Animationです。こういった相反するアニメーションを記述してしまうと実行しても動作しないので注意してください。