首頁 > 開發者 > JavaScript
標籤：add log htm 數組 使用 元素 app font http
"交叉進出"動畫也是Windows動畫庫中的動畫效果。"交叉進出"動畫的動畫效果是在應用程式介面上隱藏一個元素並同時在相同位置顯示另一個元素的時候，被隱藏的元素漸消失在應用程式介面上，而將要顯示的元素漸顯示在應用程式介面上。
建立"交叉進出"動畫可以使用WinJS.UI.Animation.crossFade函數，該函數有兩個Object類型的參數，第一個參數是將要顯示的元素對象或元素對象數組，第二個參數是將要消失元素的元素對象或元素對象數組，下面以一個應用程式為例，來示範如何使用HTML5和JavaScript實現"交叉進出"動畫。在這個應用程式運行後，初始介面顯示一張花朵圖片，單擊應用程式介面上的"顯示"按鈕後，花朵圖片逐漸淡出介面，在花朵圖片相同的位置一張小河圖片逐漸顯示。
建立一個JavaScript的Windows市集的空白應用程式項目，將其命名為CrossFadeAnimation。接著添加項目中用到的圖片檔案，在項目預設建立的檔案夾images上單擊右鍵，選擇"添加"à"現有項"，在本地檔案夾中選擇一張花朵圖片和一張小河圖片並添加到項目中。
完成添加圖片的操作後，接下來開啟default.html檔案，在default.html檔案的body元素中添加兩個img元素和一個"顯示"按鈕，設定第一個img元素的id屬性值為"flowerImage"，src屬性值為花朵圖片的地址，用於顯示一張花朵圖片；設定第二個img元素的id屬性值為"waterImage"，src屬性為小河圖片的地址，用於顯示一張小河圖片；為"顯示"按鈕的id屬性賦值"runAnimationButton"，用於控制兩個圖片的顯示。相應的HTML程式碼片段如下所示：
<body>
<img id="flowerImage" src="/images/花.png" />
<img id="waterImage" src="/images/河水.png" />
<button id="runAnimationButton">顯示</button>
</body>
為了控制應用程式介面的顯示外觀，在default.css檔案中添加如下代碼來控制default.html頁面的布局。
/*設定body元素的邊距*/
body {
margin-left:300px;
margin-top:200px;
}
/*設定id屬性值分別為"flowerImage"和"waterImage"的元素的位置和邊距*/
#flowerImage, #waterImage
{
position: absolute;
width: 150px;
height: 150px;
}
/*設定id屬性值為"runAnimationButton"的元素的邊距*/
#runAnimationButton {
margin-left:30px;
margin-top:160px;
}
完成前台介面的布局後，應用程式介面效果19-27所示。
圖19-27 "交叉進出"動畫初始介面
布局好前台介面後，接下來介紹如何?"交叉進出"動畫。開啟default.js檔案，在"args.setPromise(WinJS.UI.processAll());"語句後添加如下代碼，為"顯示"按鈕註冊click事件的處理函數runAnimationButton_Click，並設定初始狀態下小河圖片完全透明。
runAnimationButton.addEventListener("click", runAnimationButton_Click);
waterImage.style.opacity = "0";
在上面的代碼中，調用id屬性值為"runAnimationButton"的元素對象的addEventListener函數為相應元素註冊click事件處理函數，函數名為runAnimationButton_Click。接著通過設定waterImage.style對象中的opacity屬性值為0，把id屬性值為"waterImage"的元素設定為完全透明。
下面在"app.onactivated = function (args) {......};"語句的後面添加代碼，定義事件處理函數runAnimationButton_Click，實現兩張圖片轉換時"交叉進出"的動畫效果。
function runAnimationButton_Click() {
var incomingImage;
var outgoingImage;
//判斷id屬性值為flowerImage的元素的不透明度是否為0
if (flowerImage.style.opacity === "0") {
//將要顯示的元素對象賦值給incomingImage變數
incomingImage = flowerImage;
//將要隱藏的元素對象賦值給outgoingImage變數
outgoingImage = waterImage;
} else {
incomingImage = waterImage;
outgoingImage = flowerImage;
}
//調用WinJS.UI.Animation.crossFade函數建立"交叉進出"動畫
WinJS.UI.Animation.crossFade(incomingImage, outgoingImage);
}
在上面的代碼中，首先定義了兩個變數incomingImage和outgoingImage，分別用於儲存將要顯示的元素對象和將要隱藏的元素對象。接著判斷id屬性值為"flowerImage"的元素的不透明度是否為0，如果為0將該元素對象賦值給incomingImage變數，將id屬性值為"waterImage"的元素對象賦值給outgoingImage變數；如果不為0，將id屬性值為"waterImage"的元素對象賦值給incomingImage變數，將id屬性值為"flowerImage"的元素對象賦值給outgoingImage變數。最後，調用WinJS.UI.Animation.crossFade函數以incomingImage和outgoingImage為參數建立"交叉進出"動畫。
啟動調試，應用程式的初始介面19-27所示，單擊"顯示"按鈕，介面上的花朵圖片逐漸淡出，小河圖片逐漸顯示，小河圖片顯示後的效果19-28所示。
圖19-28 "交叉進出"動畫顯示後的介面
Win10系列：JavaScript動畫3
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
