简易运动框架
2016-11-17 23:18
148 查看
简易的运动框架可以用来控制长宽高、位置、透明度，结合定时器可以实现简单的动画。
其中最主要也是最基础的就是获得元素的属性，我们先来看一下给元素添加样式的三种方法：行内样式、嵌入式样式、外链样式表
我们要获取元素的样式可以使用 obj.style.xx,但是这个方法只能获取行内样式。
所以我们要想获得元素的样式，style是不够的所以引用了currentStyle（IE）方法和getComputedStyle方法
定义一个获取元素样式的通用函数：
开始写doMove函数
首先doMove接受的参数
obj是要进行操作的对象
attr是要操作的属性
dir是要改变元素属性的速度（在一段时间内改变多少）
target属性改变的目标值
endFn是回调函数
首先，我们先要判断dir的正负，如果元素现在的属性值要是小于目标值则attr为正，否则为负数
注意：用getStyle()函数返回的是字符串，所以要用parseInt转换为数字
然后定义主要的运动函数
speed = 元素属性当前的值 + 要每段时间的变化，判断改变后的值speed是否大于或者小于目标值target，如果大于或者小于目标值，则speed等于目标值，否则继续执行。
如果speed等于目标值则停止对元素属性的更改，清楚定时器，如果有回调函数则执行。
最后定义对透明度改变的函数：
基本思想和doMove（）函数差不多。这里就不在讲了。
应用：
实现这个动画效果的代码：
doMove函数
其中最主要也是最基础的就是获得元素的属性，我们先来看一下给元素添加样式的三种方法：行内样式、嵌入式样式、外链样式表
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Document</title>
6 <!-- 外部样式表 -->
7 <link style="stylesheet" href="style.css" type="text/css" />
8 <!-- 嵌入样式 -->
9 <style>
10 div{
11 height: 200px;
12 }
13 </style>
14 </head>
15 <body>
16 <!-- 行内样式 -->
17 <div style="width:200px;"></div>
18 </body>
19 </html>我们要获取元素的样式可以使用 obj.style.xx,但是这个方法只能获取行内样式。
1 <script>
2 var oBox = document.getElementById('box');
3 console.log(oBox.style.width);//200px
4
5 console.log(oBox.style.height);//''
6 </script>所以我们要想获得元素的样式，style是不够的所以引用了currentStyle（IE）方法和getComputedStyle方法
定义一个获取元素样式的通用函数：
1 function getStyle(obj,attr){
2 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
3 };开始写doMove函数
首先doMove接受的参数
1 doMove(obj,attr,dir,target,endFn)
obj是要进行操作的对象
attr是要操作的属性
dir是要改变元素属性的速度（在一段时间内改变多少）
target属性改变的目标值
endFn是回调函数
首先，我们先要判断dir的正负，如果元素现在的属性值要是小于目标值则attr为正，否则为负数
注意：用getStyle()函数返回的是字符串，所以要用parseInt转换为数字
1 dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
然后定义主要的运动函数
1 obj.timer = setInterval(function (){
2 //下一个位置的变化
3 var speed = parseInt(getStyle(obj,attr)) + dir;
4 //超过目标值时，speed改为目标值
5 if(speed > target && dir > 0 || speed < target && dir < 0){
6 speed = target;
7 };
8 obj.style[attr] = speed + 'px';
9 if(speed == target){
10 clearInterval(obj.timer);
11 endFn && endFn();
12 };
13 },20);speed = 元素属性当前的值 + 要每段时间的变化，判断改变后的值speed是否大于或者小于目标值target，如果大于或者小于目标值，则speed等于目标值，否则继续执行。
如果speed等于目标值则停止对元素属性的更改，清楚定时器，如果有回调函数则执行。
最后定义对透明度改变的函数：
1 function chOpacity(obj,speed,target,endFn){
2 //取得最初值,要用parseInt不然得到的opacity属性是字符串
3 var oropacity = parseInt(getStyle(obj,'opacity'));
4
5 //定时器
6 obj.chopacity = null;
7 //判断正负
8 speed = oropacity > target ? -speed : speed;
9
10 clearInterval(obj.chopacity);
11
12 obj.chopacity = setInterval(function(){
13
14 obj.style.opacity = oropacity += speed;
15
16 if(obj.style.opacity < 0){
17 obj.style.opacity = 0;
18 clearInterval(obj.chopacity);
19 endFn && endFn();
20
21 }
22 if(obj.style.opacity > 1){
23 obj.style.opacity = 1;
24 clearInterval(obj.chopacity);
25 endFn && endFn();
26 }
27 },40);
28
29 }基本思想和doMove（）函数差不多。这里就不在讲了。
应用：
实现这个动画效果的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="doMove.js"></script>
<style>
#box{
width:800px;
height: 60px;
border: 1px solid black;
position: absolute;
top: 300px;
left: 150px;
opacity: 1;
line-height: 60px;
}
#box2{
width: 800px;
height: 60px;
position: absolute;
background: green;
top: 0px;
left: 0px;
}
span{
display: inline-block;
width: 90px;
position: absolute;
top:10px;
}
</style>
</head>
<body>
<div id="box">
</div>
<script>
window.onload = function(){
var timer = null;
var oSpan = document.getElementsByTagName('span');
var oBox = document.getElementById('box');
var oBox2 = document.getElementsByTagName('div');
var num = 0;
var len = 8;
var str = '';
for(var i=0;i<len;i++){
str += '<span style="width:90px;position:absolute;top:0px;left:'+i*110+'px">+1</span>';
}
str += '<div style="width: 0px;height: 60px;position: absolute;background: rgb(100,100,100);top: 0px;left: 0px; "></div>'
oBox.innerHTML = str;
oBox.onclick = function(){
clearInterval(timer);
timer = setInterval(function(){
doMove(oSpan[num],'top',2,-150);
doMove(oBox2[1],'width',23,800，function(){chOpacity(oBox2[1],0.08,0);});
chOpacity(oSpan[num],0.040,0);
num++;
if(num == oSpan.length){
clearInterval(timer);
}
},40);
}
}
</script>
</body>
</html>doMove函数
1 function doMove(obj,attr,dir,target,endFn){
2 //判断数值的正负，如果目标值大于当前值则为正
3 dir = parseInt(getStyle(obj,attr)) < target ? dir : -dir;
4
5 clearInterval(obj.timer);
6
7 obj.timer = setInterval(function (){
8 //下一个位置的变化
9 var speed = parseInt(getStyle(obj,attr)) + dir;
10 //超过目标值时，speed改为目标值
11 if(speed > target && dir > 0 || speed < target && dir < 0){
12 speed = target;
13 };
14 obj.style[attr] = speed + 'px';
15 if(speed == target){
16 clearInterval(obj.timer);
17 endFn && endFn();
18 };
19 },20);
20 };
21
22 function chOpacity(obj,speed,target,endFn){
23 //取得最初值,要用parseInt不然得到的opacity属性是字符串
24 var oropacity = parseInt(getStyle(obj,'opacity'));
25
26 //定时器
27 obj.chopacity = null;
28 //判断正负
29 speed = oropacity > target ? -speed : speed;
30
31 clearInterval(obj.chopacity);
32
33 obj.chopacity = setInterval(function(){
34
35 obj.style.opacity = oropacity += speed;
36
37 if(obj.style.opacity < 0){
38 obj.style.opacity = 0;
39 clearInterval(obj.chopacity);
40 endFn && endFn();
41
42 }
43 if(obj.style.opacity > 1){
44 obj.style.opacity = 1;
45 clearInterval(obj.chopacity);
46 endFn && endFn();
47 }
48 },40);
49
50 }
51
52 function getStyle(obj,attr){
53 return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj)[attr];
54 };
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS简易运动框架
- Js完美运动框架-（简易仿微博动态更新）
- javaScript简易运动框架封装——和派孔明
- 简易运动框架综合案例，仿FLASH运动
- 简易透明度和运动框架
- 物体运动框架
- 【代码】完美运动框架
- 分享一个简易的ORM框架源代码以及基于该框架开发的一个简易论坛源代码
- 简易介绍springMVC框架
- javascript运动框架---3--匀速运动
- Js万能运动框架
- tx4-封装运动框架基本函数-多属性-带定时器
- 手撸一个简易Android数据库框架
- 运动框架
- 完美运动框架【js】
- 用Go实现的简易TCP通信框架
- android 设计一个简易的Http网络请求框架
- 用Go实现的简易TCP通信框架
- Unity3D学习(3)——物体的运动&简易太阳系
- 运动框架改进之完美运动框架 -纯js