クライアント側コードを使用してアニメーションを変更する (C#)
作成者: Christian Wenz
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、カスタムのクライアント側 JavaScript コードを使用して変更することもできます。
概要
ASP.NET AJAX Control Toolkit の Animation コントロールは、単なるコントロールではなく、コントロールにアニメーションを追加するためのフレームワーク全体です。 アニメーションは、カスタムのクライアント側 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>
アニメーションはマウス クリックなしで (そして非常に少ないマークアップで) すぐに実行されます (フルサイズの画像を表示するにはクリックしてください)
