使用 Client-Side 程式碼執行動畫（C#）

作者 ：克里斯蒂安·溫茲

下載 PDF

ASP.NET AJAX 控制工具包中的動畫控制不只是控制項，而是一個完整的框架，用來為控制項添加動畫。 動畫執行也可透過自訂的客戶端 JavaScript 程式碼觸發。

概觀

ASP.NET AJAX 控制工具包中的動畫控制不只是控制項，而是一個完整的框架，用來為控制項添加動畫。 動畫執行也可透過自訂的客戶端 JavaScript 程式碼觸發。

Steps

首先，將 包含 ScriptManager 在頁面中;接著，載入 ASP.NET AJAX 函式庫，使得可以使用控制工具包：

<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> 節點內，使用者 <OnClick> 點擊面板後即可執行動畫。 新增兩個動畫並行執行：

<Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

為了示範，這個動畫（以及使用控制工具包製作的其他動畫）會在頁面執行後使用 JavaScript 程式碼執行。 首先，我們需要進入控制系統 AnimationExtender 。 ASP.NET AJAX 函式庫提供 $find() 此任務的功能：

var ae = $find("ae");

這個 AnimationExtender 控制項會暴露一個豐富的 API，包括與 XML 標記中使用的事件處理器名稱相同的方法： OnClick()、、 OnLoad()等等。 例如，呼叫OnClick()方法會在AnimationExtender控制項的<OnClick>元素內執行動畫：

ae.OnClick();

以下是完整的客戶端 JavaScript 程式碼，用於模擬頁面完全載入後在面板上的點擊。請注意，pageLoad() 函式名稱會被 ASP.NET AJAX 呼叫，當頁面及所有包含的 JavaScript 函式庫載入完成後即會執行。

<script type="text/javascript">
 function pageLoad() {
 var ae = $find("ae");
 ae.OnClick();
 }
</script>

動畫會立即播放，無需滑鼠點擊（點擊可查看全尺寸圖片）

上一頁下一步