前面两篇都是做了一些关于缓动动画的基础，现在，可以在前面的基础上真正的封装缓动动画了。
单值传入
$("btn").onclick = function () {
clearInterval(timer);
timer = setInterval(function () {
var speed = (target - box.offsetLeft) * 0.2;
speed = Math.ceil(speed);
box.style.left = box.offsetLeft + speed + "px";
box.innerText = box.offsetLeft;
if(box.offsetLeft === target){
clearInterval(timer);
}
}, 20);
};
上面贴出来的是我们前面做的实验，因为我们是让元素左右移动，改变的是元素距离左边边框的距离，那么，如果我们需要让元素上下移动，就需要改变元素距离上边框的距离，如果要改变元素的大小，就需要改变元素的宽高，也就是说，不能仅仅依靠于上面的offsetLeft了，而是需要按需改变属性名称和值，这就需要用到上一篇的知识了。
首先确定需要改变的属性，并获取初始值：
function getCSSAttrValue(obj, attr) {
if(obj.currentStyle){ // IE 和 opera
return obj.currentStyle[attr];
}else {
return window.getComputedStyle(obj, null)[attr];
}
其次要根据style[attr]动态改变该元素的值，让元素运动起来。
因此，我们上面的函数需要稍作修改：
function buffer(obj, attr, target) {
//清除定时器
clearInterval(obj.timer);
//设置定时器
obj.timer = setInterval(function () {
//获取初始值
var begin = parseInt(getCSSAttrValue(obj, attr));
console.log(begin);
//求出步长
var speed = (target - begin) * 0.2;
// 判断是否向上取整
speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
//动起来
obj.style[attr] = begin + speed + "px";
obj.innerText = begin;
if(begin === target){
clearInterval(obj.timer);
}
}, 20);
}
还是之前的效果，实现向左向右运动，我们就可以这样写了：
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var box = $("box");
$("btn").onclick = function () {
buffer(box, "left", 500);
};
当然，也可以实现元素的大小改变了：
function $(id) {
return typeof id === "string" ? document.getElementById(id) : null;
}
var box = $("box");
$("btn1").onclick = function () {
buffer(box, "width", 260);
};
完整代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background-color: red; position: absolute; } </style> </head> <body> <button id="btn">往右走</button> <button id="btn1">变大</button> <div id="box"></div> <script> window.onload = function () { // 0. 变量 var box = $("box"); // 1. 监听按钮的点击 $("btn").onclick = function () { buffer(box, "left", 500); }; $("btn1").onclick = function () { buffer(box, "width", 260); }; }; function getCSSAttrValue(obj, attr) { if(obj.currentStyle){ // IE 和 opera return obj.currentStyle[attr]; }else { return window.getComputedStyle(obj, null)[attr]; } } function $(id) { return typeof id === "string" ? document.getElementById(id) : null; } function buffer(obj, attr, target) { //清除定时器 clearInterval(obj.timer); //设置定时器 obj.timer = setInterval(function () { //获取初始值 var begin = parseInt(getCSSAttrValue(obj, attr)); console.log(begin); //求出步长 var speed = (target - begin) * 0.2; // 判断是否向上取整 speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed); //动起来 obj.style[attr] = begin + speed + "px"; obj.innerText = begin; if(begin === target){ clearInterval(obj.timer); } }, 20); } </script> </body> </html>
缓动动画相关运用链接：
本文整理自旋之华老师js进阶视频教程。