接續執行數個動畫 (VB)

作者 ：擷取 Wenz

下載 PDF

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 它允許另一個執行數個動畫。

概觀

ASP.NET AJAX 控制項工具組中的動畫控制項不只是控制項，也是將動畫新增至控制項的整個架構。 它允許另一個執行數個動畫。

步驟

首先，在頁面中包含 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> ，使用 <OnLoad> 在頁面完全載入後執行動畫。 一般而言， <OnLoad> 只接受一個動畫。 動畫架構可讓您使用 <Sequence> 元素將數個動畫聯結至一個動畫。 內 <Sequence> 的所有動畫都會逐一執行。 以下是控制項的可能標記 AnimationExtender ，先讓面板變寬，然後降低其高度：

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnLoad>
 <Sequence>
 <Resize Width="1000" Unit="px" />
 <Resize Height="150" Unit="px" />
 </Sequence>
 </OnLoad>
 </Animations>
</ajaxToolkit:AnimationExtender>

當您執行此腳本時，面板會先變寬，再變小。

首先，寬度增加 (按一下即可檢視大小完整的影像)

然後， (按一下即可檢視大小完整的影像)