Win10系列:JavaScript动画2

Posted 冯瑞涛(2009年已经停止更新)请加微信:iterryfen

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Win10系列:JavaScript动画2相关的知识,希望对你有一定的参考价值。

"重新定位"动画也是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") {

//idrightAreaDivmiddleAreaDivleftAreaDiv的三个元素依次保存在一个数组中,并将数组赋值给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的主要内容,如果未能解决你的问题,请参考以下文章

Win10系列:JavaScript动画3

Win10系列:JavaScript 动画1

Win10系列:JavaScript页内导航

Win10系列:JavaScript图形

Win10系列:JavaScript 模板绑定

Win10系列:JavaScript页面导航