ユーザー操作に対してアニメーションを返す (VB)

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、自動的に開始することも、マウスでクリックした場合など、ユーザーの操作によってトリガーされる場合もあります。

概要

ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、自動的に開始することも、マウスでクリックした場合など、ユーザーの操作によってトリガーされる場合もあります。

手順

まず、ページに ScriptManager を含めます。次に、ASP.NET AJAX ライブラリが読み込まれ、Control Toolkit を使用できるようになります。

<asp:ScriptManager ID="asm" runat="server" />

アニメーションは、次のようなテキストのパネルに適用されます。

<asp:Panel ID="panelShadow" runat="server" CssClass="panelClass">
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
 ASP.NET AJAX is a free framework for quickly creating a new generation of more 
 efficient, more interactive and highly-personalized Web experiences that work 
 across all the most popular browsers.<br />
</asp:Panel>

パネルに関連付けられている CSS クラスで、適切な背景色を定義し、パネルの固定幅も設定します。

<style type="text/css">
 .panelClass {background-color: lime; width: 300px;}
</style>

次に AnimationExtender をページに追加し、ID、TargetControlID 属性、必須の runat="server" を追加します。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">

<Animations> ノード内には、ユーザー操作を介してアニメーションを開始する 5 つの方法があります (不足している要素は <OnLoad> で、これはページ全体が完全に読み込まれた後に実行されます)。

• <OnClick> (コントロールをマウスでクリック)
• <OnHoverOut> (マウスをコントロールから離す)
• <OnHoverOver> (マウスポインターをコントロールの上に置き、<OnHoverOut> アニメーションを停止する)
• <OnMouseOut> (マウスをコントロールから離す)
• <OnMouseOver> (マウスポインターをコントロールの上に置き、<OnMouseOut> アニメーションを停止しない)

このシナリオでは、<OnClick> が使用されます。 ユーザーがパネルをクリックすると、サイズが変更され、同時にフェードアウトします。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

マウス クリックでアニメーションが開始されます (クリックするとフルサイズの画像が表示されます)

前へ次へ