JavaScript封装动画函数（二）

封装缓动动画函数，任意一个属性变化的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            margin-top: 20px;
        }
        #box{
            width: 200px;
            height: 100px;
            background-color: greenyellow;
            margin-top: 20px;
            position:absolute;
            left: 20px;
        }
    </style>
</head>
<body>
<button id="btn1">移动到400px</button>
<button id="btn2">移动到800px</button>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    document.getElementById("btn1").onclick=function () {
        animate(box,"top",400);
    };
    document.getElementById("btn2").onclick=function () {
        animate(box,"top",800);
    };

    //获得任一元素的任一属性的值————字符串型
    function getStyle(element,attr){
        return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }

    function animate(element,attr,target){
        //先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
        clearInterval(element.timeId);
        element.timeId=setInterval(function () {
            //获取元素的当前位置
            var current=parseInt(getStyle(element,attr));
            //设置每次移动多少像素
            var step=(target-current)/10;
            step= step>0 ?Math.ceil(step):Math.floor(step);
            //每次移动后的位置
            current += step;
            element.style[attr]=current+"px";
            //判断如果到达目标位置
            if(current==target){
                //清理定时器
                clearInterval(element.timeId);
            }
        },10);
    }
</script>
</body>
</html>

封装缓动动画函数，任意多个属性变化的动画

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        button{
            margin-top: 20px;
        }
        #box{
            width: 200px;
            height: 100px;
            background-color: greenyellow;
            margin-top: 20px;
            position:absolute;
            left: 20px;
        }
    </style>
</head>
<body>
<button id="btn">动画开始</button>
<div id="box"></div>
<script>
    var box=document.getElementById("box");
    document.getElementById("btn").onclick=function () {
        animate(box,{"width":400,"height":500,"top":200,"left":300});
    };

    //获得任一元素的任一属性的值————字符串型
    function getStyle(element,attr){
        return window.getComputedStyle ?window.getComputedStyle(element,null)[attr]:element.currentStyle[attr];
    }

    function animate(element,json){
        //先清理定时器，这样可以保证每次点击按钮都只产生一个定时器
        clearInterval(element.timeId);
        element.timeId=setInterval(function () {
            var flag=true; //假设全部到达目标位置
            for(var attr in json) {
                //获取元素属性当前的值
                var current = parseInt(getStyle(element, attr));
                //获得当前属性对应的目标值
                var target = json[attr];
                //设置每次移动多少像素
                var step = (target - current) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                //每次移动后的位置
                current += step;
                element.style[attr] = current + "px";
                if(current != target){
                    flag=false;
                }
            }
            //判断如果都到达目标位置
            if(flag){
                //清理定时器
                clearInterval(element.timeId);
            }
        },10);
    }
</script>
</body>
</html>

JavaScript封装动画函数（二）

封装缓动动画函数，任意一个属性变化的动画

封装缓动动画函数，任意多个属性变化的动画

猜你喜欢