クライアント側コードを使用してアニメーションを変更する (VB)

作成者: Christian Wenz

PDF のダウンロード

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、カスタムのクライアント側 JavaScript コードを使用して変更することもできます。

概要

ASP.NET AJAX Control Toolkit のアニメーション コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、カスタムのクライアント側 JavaScript コードを使用して変更することもできます。

手順

まず、ページに 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>

実際のアニメーションは、HTML ボタンによって起動されます。

<input type="button" id="Button1" runat="server" value="Launch Animation" />

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

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

AnimationExtender コントロール内に <Animations> ノードがないことに注意してください。 カスタム JavaScript コードは、コントロールで使用するアニメーションを提供するために使用されます。

AnimationExtender のサーバー API と同様に、エクステンダーにアニメーションを割り当てる簡単な方法はまだありません。 ただし、エクステンダーは、さまざまなイベント (OnClick、OnLoad など) に登録されたアニメーションの読み取りと書き込みを行う複数のメソッドを公開します。 次に例をいくつか示します。

• get_OnClick()
• set_OnClick()
• get_OnLoad()
• set_OnLoad()
• ...

get_*() 関数の戻り値の形式と set_*() 関数の引数の形式は JSON 文字列であり、XML マークアップのオブジェクト表現を提供します。 現在、オブジェクトを渡す方法はありませんが、特定のアニメーションからオブジェクトを読み取ることは可能です (get_OnXXXBehavior() メソッド)。

ボタンによってトリガーされるアニメーションを表す JSON 文字列 (区切り文字の引用符を使用せず、わかりやすくフォーマットされています) を以下に示します。このアニメーションでは、パネルのサイズを変更しながら同時にフェードアウトさせます。

{
 "AnimationName":"Sequence",
 "AnimationChildren":[
 {
 "AnimationName":"EnableAction",
 "Enabled":"false",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Parallel",
 "AnimationChildren":[
 {
 "AnimationName":"FadeOut",
 "Duration":"1.5",
 "Fps":"24",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 },
 {
 "AnimationName":"Resize",
 "Width":"1000",
 "Height":"150",
 "Unit":"px",
 "AnimationTarget":"Panel1",
 "AnimationChildren":[]
 }]
 }]
}

次の JavaScript コードでは、この JSON の記述を現在のエクステンダーの OnClick アニメーションに割り当てて実行します。

<script type="text/javascript">
 function pageLoad() 
 {
 var ae = $find("ae");
 var animation = '{"AnimationName":"Sequence","AnimationChildren":[{"AnimationName":"EnableAction","Enabled":"false","AnimationChildren":[]},{"AnimationName":"Parallel","AnimationChildren":[{"AnimationName":"FadeOut","Duration":"1.5","Fps":"24","AnimationTarget":"Panel1","AnimationChildren":[]},{"AnimationName":"Resize","Width":"1000","Height":"150","Unit":"px","AnimationTarget":"Panel1","AnimationChildren":[]}]}]}';
 ae.set_OnClick(animation);
 ae.OnClick();
 }
</script>

アニメーションはマウス クリックなしで (そして非常に少ないマークアップで) すぐに実行されます (フルサイズの画像を表示するにはクリックしてください)

前へ次へ