Win10系列：JavaScript动画4
Posted 冯瑞涛（2009年已经停止更新）请加微信：iterryfen
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Win10系列：JavaScript动画4相关的知识，希望对你有一定的参考价值。
上面介绍的动画效果是通过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所示。
图19-29 界面初始状态
图19-30 旋转动画效果
以上是关于Win10系列：JavaScript动画4的主要内容，如果未能解决你的问题，请参考以下文章