首頁 > 開發者 > JavaScript
標籤：promise visual 實現 enter 賦值 角度 windows8 doc 後台
上面介紹的動畫效果是通過Windows動畫庫建立的，這裡的旋轉動畫是通過設定頁面元素的style對象的相關屬性來建立，此動畫的效果是將介面元素沿著指定的方向進行旋轉。下面介紹style對象的幾個常用屬性。
接下來通過一個具體的應用程式講解如何建立旋轉動畫。首先在Visual Studio 2012中建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為RotateAnimation。然後開啟default.html檔案，在body元素中添加一個用來顯示頭標題的h2元素，設定其class屬性值為"headStyle"，然後添加一個div元素，用來作為圖片的顯示地區，並設定其id屬性值為"animationFrame"，接著在div元素中添加一個用於顯示圖片的img控制項，並將其id屬性設定為"animationImage"。最後添加一個"開始旋轉"按鈕，並設定其id屬性值為"animationButton"，相關代碼如下所示：
<body>
<!--添加頭標題-->
<h2 class="headStyle" >旋轉動畫</h2>
<!-- 添加div作為圖片的外框-->
<div id="animationFrame">
<!--添加圖片-->
<img id="animationImage" src = "images/Windows8Logo.png" />
</div>
<!--添加按鈕-->
<button id="animationButton" >
開始旋轉
</button>
</body>
為了控制介面元素的顯示外觀，在default.css檔案裡添加如下代碼，用於設定各元素的樣式，相關代碼如下所示：
/*定義標題樣式*/
.headStyle {
/*距離頁面上邊緣的距離*/
margin-top:200px;
/*距離頁面左邊緣的距離*/
margin-left:418px;
}
/*定義顯示地區樣式*/
#animationFrame{
/*距離標題的距離*/
margin-top:10px;
/*距離頁面左邊緣的距離*/
margin-left:400px;
/*寬度*/
width:150px;
/*高度*/
height:150px;
/*背景顏色*/
background-color:white;
}
/*定義圖片樣式*/
#animationImage{
/*寬度*/
width:150px;
/*高度*/
height:150px;
?
}
/*定義按鈕樣式*/
#animationButton {
/*距離圖片的距離*/
margin-top:10px;
/*距離頁面左邊緣的距離*/
margin-left:428px;
}
布局好前台介面後，下面來添加應用的後台邏輯功能。開啟default.js檔案，在檔案中的"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"開始旋轉"按鈕註冊click事件處理函數，相關代碼如下所示：
document.getElementById("animationButton").addEventListener("click", rotateAnimation);
上面代碼中，調用getElementById函數擷取id屬性值為"animationButton"的元素對象，並使用addEventListener函數為該元素對象的click事件添加事件處理函數rotateAnimation。
接下來在"app.onactivated = function (args) {......};"語句後面定義事件處理函數rotateAnimation，實現圖片旋轉的動畫效果，相關代碼如下所示：
function rotateAnimation () {
//擷取id為animationImage的img控制項
var element = document.getElementById("animationImage");
//設定transitionProperty屬性值為transform
element.style.transitionProperty = ‘transform‘;
//設定旋轉動畫的時間
element.style.transitionDuration = ‘5s‘;
//設定旋轉的起始位置
element.style.transformOrigin = ‘50%‘;
//設定旋轉的方向和角度
element.style.transform = ‘rotateY(90deg)‘;
//旋轉動畫停止
element.addEventListener(‘transitionend‘, resetAnimation, false);
}
在上面代碼中，首先調用document.getElementById函數擷取id為"animationImage"的img控制項，並賦值給element變數，然後設定element.style對象的transitionProperty屬性值為transform屬性的名稱，指定動畫為旋轉動畫，接著設定transitionDuration屬性值為5s，規定旋轉動畫的時間為5秒，再分別設定transformOrigin和transform屬性的值為50%和rotateY(90deg)，這樣就使圖片從中線位置沿著Y軸順時針旋轉90度，最後為element對象的transitionend事件註冊事件處理函數resetAnimation。
接著在rotateAnimation函數後面定義事件處理函數resetAnimation，實現圖片旋轉動畫的停止和重設，相關代碼如下所示：
function resetAnimation(events) {
//擷取id為animationImage的img控制項
var resetelement = document.getElementById("animationImage");
//設定transition屬性值為none
resetelement.style.transition = ‘none‘;
//設定opacity屬性為1
resetelement.style.opacity = ‘1‘;
//設定transform屬性為none
resetelement.style.transform = ‘none‘;
}
在上面代碼中，首先調用document.getElementById函數擷取id為"animationImage"的img控制項，並賦值給resetelement變數，然後設定resetelement.style對象的transition屬性為none，這樣圖片就沒有動畫效果，接著設定opacity屬性值為1，規定重設圖片為不透明，最後設定transform屬性為none，使重設的圖片不再旋轉。
啟動調試，介面的初始狀態19-29所示。單擊"開始旋轉"按鈕，圖片會以中線為旋轉軸沿著Y軸順時針旋轉90度，並在5秒內停止和返回原來的位置，圖片旋轉時某一時刻的運行效果19-30所示。
圖19-29 介面初始狀態
圖19-30 旋轉動畫效果
Win10系列：JavaScript動畫4
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
