运动

2022-06-25 10:31:49 作者：互联网

运动概述

开启定时器 --- setInterval()--使物体运动 / setTimeout()
清除定时器 --- clearInterval()--使运动停止 / clearTimeout
在定时器过程中不断更改需要改变的值(如: 位置left/top, 宽高width/height,透明度opacity:0.9,filter:alpha(opacity=90)等

匀速运动

匀速运动: 让物体进行匀速运动
通过改变的值, 每次都是一样的来控制对应的元素匀速运动

示例:

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: relative;
        }
    </style>

<body>
    <button>开始匀速运动</button>
    <div></div>

    <script>
        //1. 获取对应的按钮以及相关的div
        var btn = document.querySelector('button');
        var content = document.querySelector('div');

        //2. 给按钮添加对应的点击事件
        btn.onclick = function(){
            //3. 在点击事件里面, 控制对应div的left值的改变
            //3.1 利用定时器在对应的事件里面, 每次更改一部分的left的值
            var timer = setInterval(()=>{
                var left = parseInt(getStyle(content).left);
                content.style.left = left + 10 +"px";

                //3.2 当我们的left值达到了对应的位置的时候就清除定时器
                if(left == 500){
                    clearInterval(timer);
                }
            }, 100)
        }
        //获取对应的样式方法
        function getStyle(el){
            if(window.getComputedStyle){
                return window.getComputedStyle(el);
            }
            //兼容IE
            return el.currentStyle;
        }
        
    </script>
    
</body>

缓冲运动

通过改变的值, 先改的值比较大, 后面改的比较小, 来达到对应的匀速运动

<style>
        div{
            width: 100px;
            height: 100px;
            background-color: orange;
            position: relative;
        }
    </style>
<body>
    <button>开始缓冲运动</button>
    <div></div>

    <script>
        //缓冲运动的核心就是对应的值的变化越来越少
        //1. 获取对应的按钮以及相关的div
        var btn = document.querySelector('button');
        var div = document.querySelector('div');

        //2. 给按钮添加对应的点击事件
        btn.onclick = function(){
            //3. 控制div的变化, 变化的值越来越小
            //3.1 定时器控制对应的div的left值发生变化
            var timer = setInterval(()=>{
                var currentLeft = parseFloat(getStyle(div).left);

                //距离越来越小(防止无限取小数)
                var step = (500 - currentLeft) / 10 > 1 ? (500 - currentLeft) / 10 : 1;
                div.style.left = currentLeft + step + "px";

                //3.2 到达目标位置后, 清除对应的定时器
                //写大于的问题为他可能是小数, 小数相加可能会大于目标值
                if(currentLeft >= 500 - step){
                    console.log("结束了");
                    clearInterval(timer)
                }
            }, 100)
        }
        //获取对应的样式方法
        function getStyle(el){
            if(window.getComputedStyle){
                return window.getComputedStyle(el);
            }
            //兼容IE
            return el.currentStyle;
        }
        
    </script>
    
</body>

标签：el,定时器,div,var,运动,对应,left
来源： https://www.cnblogs.com/huanglidan/p/16410791.html