封装缓动动画3

前面两篇都是做了一些关于缓动动画的基础，现在，可以在前面的基础上真正的封装缓动动画了。

单值传入

 $("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>

单值传入

猜你喜欢