Win10系列:JavaScript动画4

时间:2023-12-23 20:12:43

上面介绍的动画效果是通过Windows动画库创建的,这里的旋转动画是通过设置页面元素的style对象的相关属性来创建,此动画的效果是将界面元素沿着指定的方向进行旋转。下面介绍style对象的几个常用属性。

  • transitionProperty:获取或者设置相关元素的动画变换效果。
  • transitionDuration:获取或者设置相关元素动画变换的时间。
  • transformOrigin:获取或者设置相关元素动画变换的起始位置。
  • transform:获取或者设置一个或者多个旋转函数,指定相关元素如何旋转。
  • opacity:获取或者设置相关元素的不透明度。

接下来通过一个具体的应用程序讲解如何创建旋转动画。首先在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所示。

Win10系列:JavaScript动画4Win10系列:JavaScript动画4Win10系列:JavaScript动画4

图19-29 界面初始状态

Win10系列:JavaScript动画4

图19-30 旋转动画效果