首頁 > 開發者 > JavaScript
標籤：exp 而不是 get ges 動畫 編寫 java 顯示 htm
在應用程式中使用動畫會使應用顯得更加生動，進而給使用者帶來良好的視覺效果。例如，當使用者將某個項添加到列表時，新項不會立即出現在列表中，而是採用動畫形式到達相應位置，並且列表中的其他項也採用動畫形式移動到新位置，以便為添加的項騰出空間。這樣的動畫效果能夠讓使用者更清晰地看到變化過程，而不是只能看到變化之後的結果。
應用程式的動畫效果可以使用Windows動畫庫來建立，開發人員無需自己編寫動畫效果代碼即可獲得Metro風格的動畫外觀和效果。另外還可以通過設定頁面元素的style對象的相關屬性來建立。下面介紹幾種常用的動畫效果。
（1）展開動畫和摺疊動畫
展開動畫和摺疊動畫是Windows動畫庫中的動畫效果。展開動畫可以在視圖中騰出空間以顯示更多資訊，例如，顯示錯誤訊息時會使視圖中的其他內容發生移動，以便為該訊息騰出空間；摺疊動畫可以隱藏附加內容，以便顯示有關特定項的較少資訊。
建立展開動畫可以使用WinJS.UI.Animation命名空間中的createExpandAnimation函數來實現，這個函數有兩個參數，一個是revealed，另一個是affected。其中，revealed是一個Object類型的對象，表示要被展開的元素；affected也是一個Object類型的對象，表示當展開revealed元素時位置需要移動的元素。createExpandAnimation函數會返回一個Object類型的對象，通過這個對象調用execute函數來執行已建立的動畫。
建立摺疊動畫可以使用WinJS.UI.Animation命名空間中的createCollapseAnimation函數來實現，這個函數也有兩個參數，一個是hidden，另一個是affected。其中，hidden是一個Object類型的對象，表示要被摺疊的元素；affected也是一個Object類型的對象，表示當摺疊hidden元素時位置需要移動的元素。createCollapseAnimation函數同樣會返回一個Object類型的對象，通過此對象的execute函數來執行動畫。
下面以一個應用程式為例，來示範如何使用HTML5和JavaScript建立展開動畫和摺疊動畫。在這個應用程式中，可以以動畫的形式嚮應用程式介面中添加一個介面元素，也可以以動畫的形式從介面中移除一個元素。
建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為ExpandAndCollapseApp。開啟default.html檔案，在body元素中添加一個h3元素、一個按鈕和四個div元素。其中，h3元素用來顯示頁面標題"展開-摺疊動畫樣本"；四個div元素用於定義四個文本區，內容分別為"原地區1"、"擴充地區"、"原地區2"和"原地區3"，其中內容為"擴充地區"的文本區初始時不顯示；按鈕則用來在應用程式介面中添加或移除內容為"擴充地區"的文本區，初始常值內容為"展開"。相應的HTML程式碼片段如下所示：
<body>
<h2 class="articleTitle">展開-摺疊動畫樣本</h2>
<br />
<button id="runAnimation">展開</button>
<br />
<div class="area">原地區1</div>
<div id="expandedItem" class="area" style="display: none">擴充地區</div>
<div class="area affectedItem">原地區2</div>
<div class="area affectedItem">原地區3</div>
</body>
在上面的代碼中，為了便於設計CSS樣式和檢索控制項，在添加控制項時為其設定了類名和ID。其中，設定h2元素的class屬性值為articleTitle，內容為"原地區1"和"擴充地區"的兩個div元素的class屬性值為area，而內容為"原地區2"和"原地區3"的兩個div元素的class屬性值都是area affectedItem；按鈕的id屬性值被設定為runAnimation，內容為"擴充地區"的div元素的id屬性值則為expandedItem。
為了控制應用程式介面的顯示外觀，在default.css檔案中添加如下代碼來控制default.html頁面的布局。
/*設定h2元素的字型大小和在應用程式介面中的顯示位置*/
.articleTitle {
font-size: large;
margin: 20px 15px 10px 45px;
}
/*為class屬性值為"area"的元素設定樣式*/
.area {
height: 50px;
width: 100px;
margin: 0px 15px 10px 70px;
text-align: center;
color: white;
background: #808080;
}
/*為id屬性值為"runAnimation"的元素設定樣式*/
#runAnimation {
border-color: gray;
border-width: thin;
margin: 0px 20px 15px 75px;
}
/*為id屬性值為"expandedItem"的元素設定背景色*/
#expandedItem {
background: #00B6FF;
}
完成前台介面的布局後，應用程式介面效果19-23所示。
圖19-23 前台介面
布局好前台介面後，接下來介紹如何將一個內容為"擴充地區"的文本區在兩個原地區之間添加和移除，並在此過程中配合展開和摺疊動畫效果。開啟default.js檔案，在"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"展開"按鈕註冊click事件的處理函數ExpandOrCollapse。
document.getElementById("runAnimation").addEventListener("click", ExpandOrCollapse);
以"runAnimation"為參數調用document對象的getElementById函數來尋找id屬性值為runAnimation的元素對象，並調用addEventListener函數為該元素對象，也就是"展開"按鈕的click事件註冊事件處理函數ExpandOrCollapse。
接著在default.js檔案中的"app.onactivated = function (args) {...};"語句後添加"展開"按鈕的click事件處理函數ExpandOrCollapse的代碼。
function ExpandOrCollapse() {
var affectedElement = document.querySelectorAll(".affectedItem");
if (expandedItem.style.display === "none") {
ExpandItem(expandedItem, affectedElement);
runAnimation.innerText = "摺疊";
}
else {
CollapseItem(expandedItem, affectedElement);
runAnimation.innerText = "展開";
}
}
在上面的代碼中，首先以".affectedItem"作為參數調用document對象的querySelectorAll函數來尋找class屬性值為affectedItem的所有元素對象，並儲存到變數affectedElement中。然後通過style對象中的樣式屬性display來判斷id屬性值為expandedItem的元素對象的顯示狀態，如果display屬性值為none，說明id屬性值為expandedItem的元素對象沒有顯示在頁面中，則以expandedItem和affectedElement作為參數調用ExpandItem函數將其顯示，並設定id屬性值為runAnimation的元素對象的innterText屬性值為"摺疊"，使得按鈕的常值內容變為"摺疊"；如果display屬性值不為none，說明 id屬性值為expandedItem的元素對象已經顯示在頁面中，則以expandedItem和affectedElement作為參數調用CollapseItem函數將其隱藏，並將id屬性值為runAnimation的元素對象的innterText屬性賦值為"展開"，使得按鈕的常值內容變為"展開"。這裡使用的ExpandItem和CollapseItem函數為自訂的函數，下面分別來介紹這兩個函數的實現代碼。
ExpandItem函數用來在應用程式介面中以動畫的形式新增內容為"擴充地區"的文本區，該函數的代碼添加在ExpandOrCollapse函數後，相應的JavaScript程式碼片段如下所示：
function ExpandItem(expansionElement, affectionElement) {
// 建立展開動畫對象
var expandAnimation = WinJS.UI.Animation.createExpandAnimation(expansionElement, affectionElement);
// 設定待展開元素的樣式屬性
expansionElement.style.display = "block";
expansionElement.style.position = "inherit";
expansionElement.style.opacity = "1";
//執行展開動畫
expandAnimation.execute();
}
代碼中首先以expansionElement和affectionElement作為createExpandAnimation函數的參數建立一個展開動畫對象expandAnimation，其中expansionElement和affectionElement分別表示要被顯示的元素對象以及位置需要移動的其他元素對象，並設定expansionElement.style對象中的display和position樣式屬性值分別為block和inherit，這樣expansionElement元素對象就會以區塊的形式顯示在介面中，而且定位方式與父元素相同，接著將opacity樣式屬性值設定為1，opacity屬性工作表示元素的不透明度，取值範圍為0~1，值越大不透明度越高。設定完成之後調用expandAnimation對象的execute函數來執行動畫。
CollapseItem函數用來在應用程式介面中以動畫的形式移除內容為"擴充地區"的文本區，該函數的代碼添加在ExpandItem函數後，相應的JavaScript程式碼片段如下所示：
function CollapseItem(collapsionElement, affectionElement) {
// 建立摺疊動畫對象
var collapseAnimation = WinJS.UI.Animation.createCollapseAnimation(collapsionElement, affectionElement);
// 設定待摺疊元素的樣式屬性
collapsionElement.style.opacity = "0";
collapsionElement.style.display = "none";
//執行摺疊動畫
collapseAnimation.execute();
}
可以看到，函數的實現代碼與ExpandItem函數很相似，同樣是首先以collapsionElement和affectionElement作為createCollapseAnimation函數的參數建立一個摺疊動畫對象collapseAnimation，不同的是，這裡通過設定collapsionElement.style對象中的opacity樣式屬性值為"0"來隱藏id屬性值為collapsionElement的元素對象，並將display樣式屬性重新賦值為none。
啟動調試，當單擊"展開"按鈕時，內容分別為"原地區2"和"原地區3"的兩個文本區先向下移動一個位置，然後內容為"擴充地區"的文本區會顯示在騰出的位置中，同時按鈕的文本由"展開"變為"摺疊"，運行效果19-24所示。這時再次單擊按鈕，內容為"擴充地區"的文本區消失，內容分別為"原地區2"和"原地區3"的兩個文本區回到原來的位置，同時按鈕的文本由"摺疊"變為"展開"，運行效果和圖19-23所示的效果相同。
圖19-24 單擊"展開"按鈕之後的效果
Win10系列：JavaScript 動畫1
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
