使用用戶端程式碼執行動畫 (VB)

作者 ：擷取 Wenz

下載 PDF

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>

然後，將 新增 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>

為了示範，此動畫 (以及使用 Control Toolkit 建立的任何其他動畫，) 會在頁面執行之後，使用 JavaScript 程式碼來執行。 首先，我們需要控制項的 AnimationExtender 存取權。 ASP.NET AJAX 程式庫提供 $find() 此工作的函式：

var ae = $find("ae");

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

ae.OnClick();

以下是完整的用戶端 JavaScript 程式碼，此程式碼會在頁面完全載入後模擬面板上的按一下，請注意 pageLoad() ，一旦載入頁面並載入所有內含 JavaScript 程式庫之後，就會使用函式名稱 ASP.NET AJAX 呼叫。

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

動畫會立即執行，但不按一下滑鼠 (按一下即可檢視大小完整的影像)