动画封装

匀速运动封装

function Animation(ele, target) {
    //清除定时器
    clearInterval(ele.timeID);
    ele.timeID = setInterval(function() {
        //获取当前位置
        var currentLeft = ele.offsetLeft;
        //判断

        var isLeft = currentLeft < target ? true : false;

        //判断运动盒子是加还是减

        isLeft ? currentLeft += 12 : currentLeft -= 12;

        //把盒子现在的位置赋值非left属性
        ele.style.left = currentLeft + 'px';


        if (isLeft ? currentLeft >= target : currentLeft <= target) {
            //清除定时器
            clearInterval(ele.timeID);
            ele.style.left = target + 'px'
        }

    }, 15)
}

缓动动画函数封装obj目标对象 target 目标位置

 <style>
        div {
            position: absolute;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        span {
            position: absolute;
            left: 0;
            top: 200px;
            display: block;
            width: 150px;
            height: 150px;
            background-color: purple;
        }
    </style>
     <button>点击</button>
    <span></span>
    <script>
        // 缓动动画函数封装ele目标对象 target 目标位置
        // 思路：
        // 1. 让盒子每次移动的距离慢慢变小， 速度就会慢慢落下来。
        // 2. 算法：(目标值 - 现在的位置) / 10 做为每次移动的距离 步长
        // 3. 停止的条件是： 让当前盒子位置等于目标位置就停止定时器
        function animate(ele, target) {
            // 先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(ele.timer);
            ele.timer = setInterval(function() {
                // 步长值写到定时器的里面
                var step = (target - ele.offsetLeft) / 10;
                if (ele.offsetLeft == target) {
                    // 停止动画 
                    clearInterval(ele.timer);
                }
                ele.style.left = ele.offsetLeft + step + 'px';

            }, 15);
        }
        var span = document.querySelector('span');
        var btn = document.querySelector('button');

        btn.addEventListener('click', function() {
            // 调用函数
            animate(span, 500);
        })
    </script>

当我们点击按钮时候，判断步长是正值还是负值
​1.如果是正值，则步长往大了取整
​2.如果是负值，则步长 向小了取整
需要传多个属性的时候,并且需要注意透明度的问题

function slowMove(ele, attrs, callback) {
    //开启新的定时器之前,先清除定时器
    clearInterval(ele.timeID);
    ele.timeID = setInterval(function() {
        /*
        开关思想:
        1.提出假设
        2.验证假设
        3.根据变量的结果做出操作
        */
        // 一。提出假设
        var isAll = true;

        //二.验证假设
        //遍历出attrs的所有属性
        for (var key in attrs) {
            var attr = key;
            var target = attrs[key];

            if (attr == 'zIndex' || attr == 'backgroundColor') {
                ele.style[attr] = target;
            } else if (attr == 'opacity') {

                //3.1获取元素当前的位置

                //offsetLeft 获取属性值:获取到的只是数字类型的
                // 透明度是小数 不适合计算 所以扩大一百倍
                //透明度是小数 所以使用parsetfloat
                var currentLeft = (parseFloat(getEleStyle(ele, attr))) * 100;

                //3.2 开始移动(就是原本位置上缓速移动)
                var speed = (target * 100 - currentLeft) / 10;

                //消除误差
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                currentLeft += speed;

                //3.3 将移动到的当前位置赋值给box的left属性
                ele.style[attr] = currentLeft / 100;
                //终点检测
                if (currentLeft != target) {
                    isAll = false;
                }
            } else {
                //3.1获取元素当前的位置

                //offsetLeft 获取属性值:获取到的只是数字类型的
                // 而window.getComputedStyle方法获取到的是带单位的字符串 所以我们这里需要使用数据类型转换
                var currentLeft = parseInt(getEleStyle(ele, attr));

                //3.2 开始移动(就是原本位置上缓速移动)
                var speed = (target - currentLeft) / 10;

                //消除误差
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                currentLeft += speed;

                //3.3 将移动到的当前位置赋值给box的left属性
                ele.style[attr] = currentLeft + "px";
                //终点检测
                if (currentLeft != target) {
                    isAll = false;
                }
            }
        }

        // 三.根据变量的值 给出结果
        if (isAll) {
            clearInterval(ele.timeID);
            callback();
        }
    }, 50)
}


function getEleStyle(ele, attr) {
    //做浏览器能力检测
    if (window.getComputedStyle) {
        var style = window.getComputedStyle(ele, null)
        return style[attr];
    } else {
        return ele.currentStyle[attr]
    }
}