根據使用者互動繪製動畫 (C#)

作者 ：一個是一個

下載 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> 完整載入整個頁面後執行) ：

• <OnClick> (滑鼠按一下控制項)
• <OnHoverOut> (滑鼠離開控制項)
• <OnHoverOver> (滑鼠停留在控制項上方，停止 <OnHoverOut> 動畫)
• <OnMouseOut> (滑鼠離開控制項)
• <OnMouseOver> (滑鼠停留在控制項上，而不會停止 <OnMouseOut> 動畫)

在此案例中， <OnClick> 會使用 。 當使用者按一下面板時，會同時調整大小並淡出。

<ajaxToolkit:AnimationExtender ID="ae" runat="server" TargetControlID="Panel1">
 <Animations>
 <OnClick>
 <Parallel>
 <FadeOut Duration="1.5" Fps="24" />
 <Resize Width="1000" Height="150" Unit="px" />
 </Parallel>
 </OnClick>
 </Animations>
</ajaxToolkit:AnimationExtender>

按一下滑鼠會啟動動畫 (按一下即可檢視全大小影像)

上一個下一個