JS基础-特效篇-单属性动画

1.目的：针对一个属性，属性值改变动画
2.函数：

/*
    *@description:[缓动动画函数]
    *@param:{String}[attr]
    *@param:{Object}[eleObj]
    *@param:{Number}[target]
    *@date:2021/5/11
    */
    function buffer(eleObj, attr, target) {
    	//清除定时器
        clearInterval(eleObj.timer);
        //定义变量
        var speed = 0, begin;
        //设置定时器
        eleObj.timer = setInterval(function () {
        	//获取要做动画属性的初始值
            begin = parseInt(myTool.getStyleAttr(eleObj, attr));
            //缓动公式求出步长
            speed = (target - begin) * 0.2;
            speed = (target > begin) ? Math.ceil(speed) : Math.floor(speed);
            //动起来
            eleObj.style[attr] = begin + speed + 'px';
            eleObj.innerText = begin; //这句可以去掉
            if (begin === target) {
                clearInterval(eleObj.timer);
            }
        }, 20)
    }

3.调用：

<button id="btn">向左走</button>
<button id="btn1">改变高度</button>
<div id="box"></div>
<script src="MyTool/MyTool.js"></script>

buffer(box, 'height', 600);

4.封装的函数

var myTool = {
    $: function (id) {
        return typeof id === "string" ? document.getElementById(id) : null;
    },
    scroll: function () {
        if (window.pageYOffset !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "top": window.pageYOffset,
                "left": window.pageXOffset
            }
        } else if (document.compatMode === 'CSS1Compat') {  //W3C标准
            return {
                "top": document.documentElement.scrollTop,
                "left": document.documentElement.scrollLeft
            }
        }
        return {
            "top": document.body.scrollTop,
            "left": document.body.scrollLeft
        }
    },
    show: function (ele) {
        ele.style.display = 'block';
    },
    hide: function (ele) {
        ele.style.display = 'none';
    },
    client: function () {
        if (window.innerWidth !== null) { //最新的浏览器
            return {
                //里面相当于字面量对象或JSON对象，是有区别的
                "width": window.innerWidth,
                "height": window.innerHeight
            }
        } else if (document.compatMode === 'CSS1Compat') {  //W3C标准
            return {
                "width": document.documentElement.clientWidth,
                "height": document.documentElement.clientHeight
            }
        }
        return {
            "width": document.body.scrollWidth,
            "height": document.body.scrollHeight
        }
    },
    /*阻止冒泡*/
    stopBubble: function (eve) {
        if (eve && eve.stopPropagation) {
            eve.stopPropagation();
        } else {   //IE678
            eve.cancelBubble = true;
        }
    },
    //获取选中文本
    selectText: function () {
        if (window.getSelection) {
            return window.getSelection().toString();
        } else {
            return document.selection.createRange().text;
        }
    },
    //获取点击对象
    targetId: function (ele) {
        return ele.target ? ele.target.id : ele.srcElement.id;
    },
    //获取改变颜色值
    changeCssStyle: function (eleObj, attr, value) {
        eleObj.style[attr] = value;
    },
    //获取CSS样式值
    getStyleAttr: function (obj, attr) {
        if (obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return window.getComputedStyle(obj, null)[attr];
        }
    }
};