知识点
- 凡是在触发事件之中用到定时器，一定要先清后设。
- 动画的原理就是，有一个初始位置，有一个目标为止，有一个步长（每一次执行改变的距离），在确定的时间内完成事件，当初始位置等于目标位置，结束。
- opacity 设置透明度，与其他的属性不同，opacity是number类型的，是一种特殊情况，需要进行特殊设置。
- 实现一次动画改变多个属性的方法：设置一个flag，默认值为false，只有当所有的属性都改变完成之后，flag=true，定时器关闭。
- 实现一次执行多个动画的方法：回调函数，即执行完第一次动画之后，如果有回调函数，执行下一次动画。
- 设置CSS属性，style[arrName]
运行结果
点击之后，调用封装好的动画函数，对div的属性进行设置。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
body{background-color: #000;}
#box{width: 100px;height: 100px;background-color: red;
position: absolute;
/* opacity: 0.5;
filter: alpha(opacity=50);*/
/*opacity: 0.5;*/
}
</style>
</head>
<body>
<button id="btn">往右走</button>
<button id="btn1">往左走</button>
<div id="box"></div>
<script src="js/MyTool.js"></script>
<script>
window.addEventListener('load', function (ev) {
var box = myTool.$('box');
myTool.$('btn').addEventListener('click', function () {
buffer(box, { 'left': 900, 'top': 500, 'width': 600, 'height': 400, 'opacity': 0.1}, function () {
buffer(box, { 'left': 100, 'top': 100, 'width': 50, 'height': 50, 'opacity': 0.5}, function () {
buffer(box, { 'left': 600, 'top': 500, 'width': 300, 'height': 400, 'opacity': 1}, null)
});
});
});
});
/**
* 缓动动画函数
* @param {Object}eleObj
* @param {Object}json
* @param {Function}fn
*/
function buffer(eleObj, json, fn) {
// 1.1 先清后设
clearInterval(eleObj.timer);
// 1.2 定义变量
var speed = 0, begin = 0, target = 0, flag = false;
// 1.3 设置定时器
eleObj.timer = setInterval(function () {
// 标志 (标签的所有属性有没有执行完动画)
flag = true;
for(var key in json){
// 获取要做动画属性的初始值
if(key === 'opacity'){
begin = parseInt(myTool.getStyleAttr(eleObj, key) * 100) || 100;
target = parseInt(json[key]* 100);
}else {
begin = parseInt(myTool.getStyleAttr(eleObj, key)) || 0;
target = parseInt(json[key]);
}
// 2.3 求出步长
speed = (target - begin) * 0.2;
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
// 2.4 动起来
if(key === 'opacity'){
eleObj.style.opacity = (begin + speed) / 100;
}else {
eleObj.style[key] = begin + speed + 'px';
}
// 2.5 判断
if (begin !== target) {
flag = false;
}
}
// 1.4 清除定时器
if(flag){
clearInterval(eleObj.timer);
// 开启另一组动画
/* if(fn){
fn();
}*/
fn && fn();
}
}, 40);
}
</script>
</body>
</html>
