使用用戶端程式碼變更動畫 (VB)
作者 ：擷取 Wenz
ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 您也可以使用自訂用戶端 JavaScript 程式碼來變更動畫。
概觀
ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 您也可以使用自訂用戶端 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 程式碼可用來提供要與 控制項搭配使用的動畫。
如同 的伺服器 API AnimationExtender 一樣，目前還無法輕鬆地將動畫指派給擴充器。 不過，擴充器會公開數種方法，以讀取和寫入向各種事件註冊的動畫， (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>
動畫會立即執行，而不需按一下滑鼠 (，而且) (按一下即可檢視大小完整的影像)
