JavaScript缓动动画的封装-添加多属性

释放双眼,带上耳机,听听看~!
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .one {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: absolute;
            left: 0px;
            top: 50px;
        }

        .two {
            width: 100px;
            height: 100px;
            background-color: green;
            position: absolute;
            left: 0px;
            top: 170px
        }
    </style>
</head>

<body>
    <button id="btn400">点我移动到400</button>
    <button id="btn800">点我移动到800</button>
    <div class="one" id="box1"></div>

    <script>
        //需求:点击按钮让盒子缓动动画到400
        //1.获取元素
        let btn400 = document.getElementById('btn400');
        let btn800 = document.getElementById('btn800');
        let box1 = document.getElementById('box1');

        // //声明一个变量记录计时器id
        // let timerId = null;

        //2.给btn400按钮设置点击事件
        btn400.onclick = function () {
            animateSlow(box1, {
                left:400,
                top:100,
                width:200,
                height:200
            });
        }
        //4.给btn800按钮设置点击事件
        btn800.onclick = function () {
            animateSlow(box1, {
                left:800,
                top:200,
                width:300,
                height:300
            });
        }

        //---------------------------------------------------
        //缓动动画做一个函数封装.
        //01-动画最终到达的目标位置不要写死 
        //02-做动画的元素不要写死
        //03-方向不写死
        //04-做动画的样式不写死
        //05-做动画的样式是多个不是一个.
        function animateSlow(ele, obj) {
            //设置新计时器之前清空老的计时器
            clearInterval(ele.timerId);
            //设置计时器
            ele.timerId = setInterval(function () {
                //假设 当前移动的这一次 所有的属性都到达了目的地. 
                let flag = true;

                //遍历obj这个对象,拿到每一个要做动画的样式,来让他到达目标位置
                for (let key in obj) {
                    //获取元素传进来的样式的当前的值
                    let currentValue = parseInt(getStyle(ele, key));
                    //设置步长
                    let step = (obj[key] - currentValue) / 10;
                    step = step > 0 ? Math.ceil(step) : Math.floor(step);
                    //计算
                    currentValue += step;
                    //判断
                    if(currentValue != obj[key]){
                        //假设失败
                        flag = false;
                    }
                    //赋值.
                    ele.style[key] = currentValue + 'px';
                    console.log(key,step,currentValue);
                }

                //到了这里flag的值还是true,说明假设成功.说明所有的属性都已经到了目的地
                //就应该清空计时器
                if(flag == true){
                    clearInterval(ele.timerId);
                }

            }, 50);
        }


        //封装一个兼容函数--------
        function getStyle(ele, attr) {
            //能力检测
            if (window.getComputedStyle != undefined) {
                //支持
                return window.getComputedStyle(ele, null)[attr]
            } else {
                //不支持
                return ele.currentStyle[attr]
            }
        }
    </script>

</body>

</html>
内容投诉

人已赞赏
JavaScript

【JS第一天】02-JS组成

2020-6-30 13:09:35

JavaScript

JavaScript原生普通自动轮播图之函数封装

2020-7-17 23:10:19

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索