首頁 > 開發者 > JavaScript
標籤：按鈕 html 儲存 epo object類 nim 過程 建立 round
"重新置放"動畫也是Windows動畫庫中的動畫效果。"重新置放"動畫的動畫效果是指一個或一組元素移動到新的位置時，這些元素不是突然出現在新的位置，而是從一個位置移動到另一個位置。
建立"重新置放"動畫可以使用WinJS.UI.Animation.createRepositionAnimation函數，該函數有一個Object類型的參數，表示將要移動的元素對象或元素對象數組。下面以一個應用程式為例，來示範如何使用HTML5和JavaScript實現"重新置放"動畫。在這個應用程式運行後，初始介面顯示三個彩色的正方形，單擊應用程式介面上的"移動"按鈕後，三個彩色的正方形將依次移動到一個新的位置。
建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為RepositionAnimation。開啟default.html檔案，在body元素中添加一個"移動"按鈕和一個div元素。"移動"按鈕用於控制三個彩色正方形的移動，id屬性值設定為"runAnimationButton"；在div元素內部添加四個div元素，四個元素中，第一個div元素用於調節另外三個div的位置，通過改變第一個div元素的寬度可以改變它後面的三個div元素的位置，設定四個元素中的第一個元素id屬性值為"spacingDiv"，剩餘的三個div元素分別用於顯示三個彩色的正方形，設定它們的id屬性值分別為"leftAreaDiv"、"middleAreaDiv"和"rightAreaDiv"，同時為這三個元素的class屬性賦值"boxStyle"。相應的HTML程式碼片段如下所示：
<body>
<button id="runAnimationButton">移動</button>
<div id="outputDiv">
<div id="spacingDiv"></div>
<div id="leftAreaDiv" class="boxStyle"></div>
<div id="middleAreaDiv" class="boxStyle"></div>
<div id="rightAreaDiv" class="boxStyle"></div>
</div>
</body>
為了控制應用程式介面的顯示外觀，在default.css檔案中添加如下代碼來控制default.html頁面的布局。
/*設定body元素的邊距*/
body {
margin-left:300px;
margin-top:250px;
}
/*設定id屬性值為boxStyle的元素的大小、背景色等*/
.boxStyle {
width: 100px;
height: 100px;
float:left;
background-color: #00B6FF;
margin: 5px;
}
/*設定id屬性值為spacingDiv的元素的大小、對齊等*/
#spacingDiv {
width: 0px;
height: 100px;
float: left;
}
/*設定id屬性值為runAnimationButton的元素的邊距*/
#runAnimationButton {
margin-left:120px;
}
完成前台介面的布局後，應用程式介面效果19-25所示。
圖19-25 "重新置放"動畫初始介面
布局好前台介面後，接下來介紹如何?"重新置放"動畫。開啟default.js檔案，在"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"移動"按鈕註冊click事件的處理函數runAnimationButton_Click。
runAnimationButton.addEventListener("click", runAnimationButton_Click);
spacingDiv.style.width = "0px";
在上面的代碼中，調用id屬性值為"runAnimationButton"的元素對象的addEventListener函數為相應元素註冊click事件處理函數，函數名為runAnimationButton_Click。接著為spacingDiv.style對象中的width屬性賦值0px，設定id屬性值為"spacingDiv"的元素初始寬度為0px。
????下面在"app.onactivated = function (args) {......};"語句的後面添加代碼，定義事件處理函數runAnimationButton_Click，實現三個彩色正方形移動的動畫效果。
function runAnimationButton_Click() {
var spaceDivWidth;
var elements;
//判斷id屬性值為spacingDiv的元素的寬度是否為0像素
if (spacingDiv.style.width === "0px") {
//將id為rightAreaDiv、middleAreaDiv、leftAreaDiv的三個元素依次儲存在一個數組中，並將數組賦值給elements變數
elements = [rightAreaDiv, middleAreaDiv, leftAreaDiv];
spaceDivWidth = "500px";
} else {
elements = [leftAreaDiv, middleAreaDiv, rightAreaDiv];
//設定變數spaceDivWidth的值
spaceDivWidth = "0px";
}
//調用WinJS.UI.Animation.createRepositionAnimation函數獲得一個對象reposition
var repositionAnimation = WinJS.UI.Animation.createRepositionAnimation(elements);
//通過更改id屬性為spacingDiv的元素的寬度改變其後的三個彩色正方形的位置
spacingDiv.style.width = spaceDivWidth;
//調用reposition對象的execute函數顯示動畫
repositionAnimation.execute();
}
????在上面的代碼中，首先定義了兩個變數spaceDivWidth和elements，其中spaceDivWidth用於儲存一個像素值，elements用於儲存要移動的元素對象。接著判斷id屬性值為"spacingDiv"的元素的寬度是否為0像素，即判斷三個彩色正方形左邊的div元素寬度是否為0像素，如果為0像素就將id屬性值分別為"rightAreaDiv"、"middleAreaDiv"和"leftAreaDiv"的三個元素以數組形式賦值給變數elements，並設定變數spaceDivWidth的值為500px，如果三個彩色正方形左邊的div元素寬度不為0像素則將id屬性值分別為"leftAreaDiv"、"middleAreaDiv"、"rightAreaDiv"的三個元素以數組形式賦值給變數elements，並設定變數spaceDivWidth值為0px。然後以elements為參數調用WinJS.UI.Animation.createRepositionAnimation函數獲得一個對象reposition，將id屬性為"spacingDiv"的元素的寬度設定為變數spaceDivWidth，最後調用reposition對象的execute函數顯示"重新置放"動畫。
啟動調試，應用程式的初始介面19-25所示，單擊"移動"按鈕，介面上的三個彩色正方形將在水平位置向右移動一段距離，移動過程中可以看到彩色正方形移動的動畫效果，移動後的介面19-26所示。
圖19-26 "重新置放"動畫顯示後的介面
Win10系列：JavaScript動畫2
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
