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 旋转动画效果
相关文章
- javascript访问html元素的内容(2)
- 恶补web之六:javascript知识(1)
- JavaScript中,window.opener是什么?window.parent和window.opener有啥区别?
- Win10系列:JavaScript 动画1
- Windows Store App JavaScript 开发:WinJS库控件
- 第一百四十二节,JavaScript,封装库--运动动画和透明度动画
- [Javascript] Use JavaScript's for-in Loop on Objects with Prototypes
- [Javascript] Understanding the .constructor property on JavaScript Objects
- [Javascript] Delegate JavaScript (ES6) generator iteration control
- [Javascript] Iterate Over Items with JavaScript's for-of Loop
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] bukld 'SQL' like object tree
- [Javascript] How to use JavaScript's String.replace
- [Javascript] An Introduction to JSPM (JavaScript Package Manager)
- Javascript闭包演示
- [Javascript] Swap array item in place using splice()
- [Javascript] Filter out Duplicates from Flat JavaScript Array with array.filter / reduce / Set
- [Javascript] Automate the process of flattening deeply nested arrays using ES2019's flat method
- [Javascript] Deep merge in Javascript with Ramda.js mergeDeepWith
- [Javascript] Await a JavaScript Promise in an async Function with the await Operator
- [Javascript] Link to Other Objects through the JavaScript Prototype Chain
- [Javascript] Identify and Deal with NaN in JavaScript
- [Javascript] Array - join()
- [Javascript] Advanced Flattening
- [Javascript] Hoisting in JavaScript
- Javascript引擎单线程机制及setTimeout执行原理说明
- TypeScript输入参数的默认值一例,以及对应生成的JavaScript代码分析
- 纯JavaScript实现的调用设备摄像头并拍照的功能
- 【JavaScript变量】Javascript的全局变量&局部变量
- 【JavaScript脚本】——T2事件操作
- javascript 获取当前对象
- 【华为OD机试 2023】星际篮球争霸赛(C++ Java JavaScript Python)
- web前端框架Javascript开发基础之JavaScript作用域
- JavaScript简介与快速体验
- 精通Javascript 函数式array.forEach的8个案例