11. WinJS/CSS Animation

JavaScript :

 

JavaScript,也稱ECMAScript,是一種廣泛用於客戶端網頁開發的腳本語言,最早是在HTML上使用的,用來給HTML網頁添加動態功能,然而現在JavaScript也可被用於網路伺服器,如Node.js。

發展初期,JavaScript的標準並未確定,同期有網景的JavaScript,微軟的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(歐洲電腦製造商協會)的協調下,由Netscape、Sun、微軟、Borland組成的工作群組確定統一標準:ECMA-262。

一般來說,完整的JavaScript包括以下幾個部分:

  • ECMAScript,描述了該語言的語法和基本物件

  • 文件物件模型(DOM),描述處理網頁內容的方法和介面

  • 瀏覽器物件模型(BOM),描述與瀏覽器進行互動的方法和介面

它的基本特點如下:

  • 是一種解釋性程式語言(代碼不進行預編譯)。

  • 主要用來向 HTML 頁面添加互動行為

  • 可以直接嵌入 HTML 頁面,但寫成單獨的js檔案有利於結構和行為的分離。

JavaScript常用來完成以下任務:

  • 嵌入動態文字於HTML頁面

  • 對瀏覽器事件作出響應

  • 讀寫HTML元素

  • 在資料被送出到伺服器之前驗證資料

  • 檢測訪客的瀏覽器訊息

  • 控制cookies,包括建立和修改等



 

 

 

WINJS :

 

原名:Windows Library for JavaScript

 

在 Windows 8 JavaScript 應用程式使用動畫,以提供與其他 Windows 應用程式一致且快速流暢的使用者經驗。

動畫可提供 UI 狀態間的轉換效果,讓使用者感覺應用程式對輸入有所回應。

動畫還可提供使用者有用的視覺提示,但不會干擾或妨礙應用程式操作。

 

新增 WinJS 控制項與樣式 (使用 JavaScript 和 HTML 的 Windows 市集應用程式)

 

 

動畫來源

  • 使用內建動畫

          動畫是 Windows 自動提供的。

          

  • 使用動畫庫

          自訂動畫,類型如下:

元素動畫

元素動畫的實作方式與 CSS 動畫相同。元素動畫不會變更元素的狀態;它們是目前狀態上的動畫。例如,showPanel 動畫是元素動畫,可從畫面邊緣滑入面板 (例如工作窗格)。showPanel 動畫會將面板平移從開發人員提供的位移位置移到元素的目前位置。

元素轉換

元素轉換的實作方式與 CSS 轉場相同。元素轉換透過將 CSS 屬性轉換成動畫定義的值來變更元素的狀態。

配置轉換

動畫庫中的配置轉換動畫比元素動畫或元素轉換還要複雜。配置轉換動畫通常涉及多個元素,並會導致配置變更。然而,動畫函式無法做出該配置變更如何發生的假設。例如,在 reposition 動畫中,有一個元素從 A 點移到 B 點。有很多方法都可讓這種情況發生,例如變更元素的寬度、位移、邊界或邊框間距。

 

最佳化動畫效能

透過動畫顯示應用程式的回應性

為了提供最佳的整體使用者經驗,應用程式必須要快速,並對使用者動作有最佳的回應性。如果使用正確,動畫會在適當的時間提供適當的使用者回應,協助讓您的應用程式回應性更佳。

回應使用者動作的動畫必須越快開始越好。這很重要,可以告知使用者他們的動作已經順利執行,而且目前已在執行作業回應動作。如果需要執行更多工作才能完成轉換 (例如載入新頁面),請在觸發使用者回應動畫後再執行這些工作。

使用獨立式動畫

Windows 8 JavaScript 應用程式動畫平台可讓某些動畫類型在獨立、硬體加速的系統執行緒 (與 UI 執行緒分開) 上執行。這種類型的動畫稱為「獨立式動畫」。在 UI 執行緒中執行的動畫稱為「相依式動畫」。因為獨立式動畫不需要與 UI 執行緒中發生的其他動作競爭,因此始終比相依式動畫順暢。

動畫庫中的所有動畫都可做為獨立式動畫執行,但是在應用程式實作中必須考慮一些問題才能這樣做。如需關於如何讓您的動畫函式呼叫符合資格能夠以獨立式動畫執行的詳細資訊,請參閱獨立組合:在 Internet Explorer 10 中呈現和組合。

將一次執行的動畫元素數量降到最低

儘可能減少動畫中的個別元素數量。例如,不要將一個元素陣列傳送到動畫,而是只傳送父項元素,這樣動畫引擎將只需要建立動畫操作。

使用預設位移

對於包含位移參數的動畫庫動畫,儘可能使用預設位移。您不只會收到該動畫設計建議的平移,還可以提升效能,因為動畫可以使用預先計算的主要畫面。

右到左應用程式的預設位移也會自動鏡像,而且在部分動畫中,當應用程式位於貼齊檢視時,預設位移會自動變更平移量,以顯示適用於較窄檢視狀態的效果。

建立自訂動畫

您應該儘可能使用動畫庫動畫。然而,當您遇到獨特的案例,且沒有所需的內建動畫時,則可建立自訂動畫。

在 Windows 8 JavaScript 應用程式中有兩種方式可以實作自訂動畫:透過標準 CSS3 動畫和轉場,或者透過動畫庫 Helper 函式 executeAnimation 和 executeTransition

 

 

簡單來說透過 WinJS ,您可以快速以  JavaScript 開發出 Metro Style App ,此外還有四大技術是在開發 Windows 8 時的特色,分別是 Search 、 Share 、Tile 和 Notifications 的應用。

 

 

CSS :

 

階層式樣式表 (CSS) 動畫可讓您不只是隨著時間流暢地變更 CSS 屬性 (CSS 轉場已提供此功能)。CSS 動畫也會提供您使用主要畫面格來設計複雜動畫的能力,並讓您透過指令碼處理進行更精密的控制。 一般而言,CSS 動畫允許更多有趣且生動的網頁內容 ,同時在相較於傳統 JavaScript 驅動的動畫做法時,提供更好的轉譯效能

 

 

如果您選擇自行建立動畫,請注意下列幾點:

 

  • 部分 CSS 屬性的動畫或轉場無法以獨立式動畫的方式執行,而且可能會造成整個頁面重新繪製每個畫面。這可能會導致緩慢且不穩定的動畫,這將會是不好的使用者經驗。實作自訂動畫時避免使用這些屬性,以確保您的動畫可以獨立執行。
  • 自訂的 CSS3 動畫或轉場無法與動畫庫動畫並存於相同的元素上。