JS缓冲运动

最新推荐文章于 2022-07-12 13:11:05 发布

伊人至尚

最新推荐文章于 2022-07-12 13:11:05 发布

阅读量204

点赞数

分类专栏： JavaScripy 文章标签：缓冲运动

本文链接：https://blog.csdn.net/smileshang1224/article/details/103040073

版权

JavaScripy 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

JS缓冲运动

原理
一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定，那就是匀速运动；如果变化的速率不一定，那么就是变速运动。当变化率与距离浏览器边框的距离成比例的话，那么就可以说是div在做缓冲运动。
其实很简单，就是用一个定时器（timer），每隔一段时间来改变div距离浏览器边框的距离。

<!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和padding清零，否则的话他在计算的时候初始的
        margin和padding会影响计算，从而导致有时候运动不停止的情况。 */
        * {
            margin: 0px;
            padding: 0px;
        }

        .box {
            width: 100px;
            height: 100px;
            background-color: pink;
            position: relative;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <input type="button" value="缓冲运动" id="move1">
    <div id="box1" class="box"></div>
</body>

<script>
    window.onload = function () {
        var btn1 = document.getElementById('move1');
        var box1 = document.getElementById('box1');
        btn1.onclick = function () {
            move(box1, "left", 500);
        }

        //缓动动画封装 
        function move(ele, attr, target) {
            clearInterval(ele.timer); //清楚历史定时器 
            ele.timer = setInterval(function () {
                // 当前位置的变量，获取当前值：借助了getStyle的功能
                var iNow = parseInt(getStyle(ele,attr));
                //获取步长 确定移动方向(正负值) 步长应该是越来越小的，缓动的算法。 每次计时器执行，都重新获取最新位置，计算剩下的距离
                // 获取步长 = 目标 - 当前  每次走十分之一
                var speed = (target - iNow) / 10;
                //对步长进行二次加工(大于0向上取整,小于0项下取整) Math.ceil和Math.floor对步长值进行取
                // 出现小数，因为如果出现小数后面最后到达的位置肯定是和目标位置有误差的。判断往前走还是往后走，根据步长正负决定取整方向。
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

                console.log(speed);
                //动画原理： 目标位置 = 当前位置 + 步长 
                ele.style[attr] = iNow + speed + "px";
                //检测缓动动画有没有停止 
                if (Math.abs(target - iNow) <= Math.abs(speed)) {
                    // 变量作为属性使用[]传
                    ele.style[attr] = target + "px"; //直接移动指定位置 
                    clearInterval(ele.timer);
                }
            }, 30);
        }
    }
    // 获取样式的功能。解决 getComputedStyle(ele,false)兼容问题
    function getStyle(ele,attr){
			if(getComputedStyle){
				return getComputedStyle(ele,false)[attr];
			}else{
				return ele.currentStyle[attr];
			}
		}
</script>

</html>

**注意事项：**在每次移动开始前一定要使用clearInterval清除定时器。

伊人至尚

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS缓冲运动

JS缓冲运动原理一个div的运动其实就是它与浏览器边框的距离在变动。如果他变化的速率一定，那就是匀速运动；如果变化的速率不一定，那么就是变速运动。当变化率与距离浏览器边框的距离成比例的话，那么就可以说是div在做缓冲运动。其实很简单，就是用一个定时器（timer），每隔一段时间来改变div距离浏览器边框的距离。<!DOCTYPE html><html lang="en"...
复制链接

扫一扫

专栏目录