共用方式為


使用用戶端程式碼變更動畫 (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>

實際動畫是由 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 一樣,目前還無法輕鬆地將動畫指派給擴充器。 不過,擴充器會公開數種方法,以讀取和寫入向各種事件註冊的動畫, (OnClickOnLoad 等等) 。 以下是一些範例:

  • 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>

動畫會立即執行,而不需要按一下滑鼠 (,而且標記)

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