JS动画框架二

动画原理

前面的动画框架一已经满足我们能够将一个物体水平移动了。但是根据思路,是可以让很多属性“动起来”的。
如果我们 让一个物体自身宽高可以变化,还可以水平,垂直移动。 又应该怎么实现呢?



根据前面的框架思路,还是很简单的。

前面的框架代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
//animation:让指定的dom元素缓动到指定位置
function animation(obj,target){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var speed = (target - obj.offsetLeft)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style.left = obj.offsetLeft + speed +"px";
if(obj.offsetLeft==target){
clearInterval(obj.timer);
}

},30)
}

实现思路:

将要操作的属性用JSON存起来,遍历操作,加上回调函数就可以实现了。
首先要实现获取对象属性,先写一个获取属性的函数:

1
2
3
4
5
6
7
8
//获取任意属性
function getStyle(obj,attr){
if(window.getComputedStyle){
return window.getComputedStyle(obj,null)[attr]
}else{
return obj.currentStyle[attr];
}
}

实现代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function animation(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flag = true;
//json里面有几个属性就要执行几次
for(var key in json){
var target = parseInt(json[key]);
var speed = (target - parseInt(getStyle(obj,key)))/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
obj.style[key] = parseInt(getStyle(obj,key)) +speed+"px";
if(parseInt(getStyle(obj,key))!=target){
flag = false;
}
}
if(flag){
clearInterval(obj.timer);
if(fn){
fn();
}
}
},20)
}

例如:让一个div动起来JSON中的属性同时到达,回调函数执行弹出‘1’:

1
2
3
4
5
6
7
8
9
10
var div = document.getElementsByTagName('div')[0];
var attrJson = {
"width": "800px",
"height": "50px",
"top":"300px",
"left":"400px",
};
animation(div,attrJson,function(){
alert(1)
});

若要分别运动,则每次调用函数,实现一个属性即刻,然后回调函数执行下一个。
现在宽高上下左右都可以‘动’起来了。还差个棘手的透明度,实现如下
思路大同小异,只不过要处理兼容:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function animation(obj,json){//opacity传0-1之间的数字
obj.timer = setInterval(function(){
var target = Math.round(json['opacity']*100)//0-100
var leader = getStyle(obj,'opacity')*100//0-100
var speed = (target-leader)/10;
speed = speed>0?Math.ceil(speed):Math.floor(speed);
leader = leader + speed;//0-100
obj.style.opacity = leader/100;
obj.style.filter = "alpha(opacity="+leader+")";
if(leader==target){
clearInterval(obj.timer);
}
},30)
}

整合框架:

最后
一个可以宽高上下左右透明度都控制的简单框架如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
/**
* 缓动框架
* @param obj 需要移动的标签
* @param target 移动的参数JSON格式
* @param callback 接收调用者传递的回调函数
*/
function animation(obj, target, callback){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var isClearInterval = true; // 记录是否需要清除定时
for (var key in target){
var t = target[key]; // 目标位置
var c = getStyle(obj, key); // 当前位置
// 判断key有没有是opacity
if (key === 'opacity'){
c = Math.round(c * 100);
// 如果传值取整是0,表示参数是小数需要*100,否则取数字本身
t = parseInt(t) == 0 || parseInt(t) == 1 ? t * 100 : t;
}else{
c = parseInt(c); // 去除返回的单位
}
// (目标 - 当前) / 10
var s = (t - c) / 10; // 每次移动的距离
s = s > 0 ? Math.ceil(s) : Math.floor(s);
if (key === 'opacity'){
obj.style[key] = (c + s) / 100;
obj.style.filter = '(alpha='+(c+s)+')';
}else {
obj.style[key] = c + s + 'px';
}
if (c + s != t){ // 判断是否移动到目录位置
isClearInterval = false;
}
}
if (isClearInterval){ // 只有所有的目标都到达预定位置才能清除定时器
clearInterval(obj.timer);
/*
当动画执行完成以后,再判断是否有需要执行callback
判断用户是否有传递回调函数,如果有执行回调函数
*/
if (callback){
callback(); // 执行回调函数
}
}
}, 10);
}

/**
* 获取标签的样式
* @param obj 获取样式的对象
* @param property 获取的属性名称
*/
function getStyle(obj, property){
if (window.getComputedStyle){
return window.getComputedStyle(obj, null)[property];
}else{ // IE678
return obj.currentStyle[property];
}
}

结:

到这里‘动画框架’就告一段落了

文章目录
  1. 1. 动画原理
    1. 1.1. 实现思路:
    2. 1.2. 整合框架:
    3. 1.3. 结:
|