2021-07-05

最新推荐文章于 2021-07-28 19:42:37 发布

buty_nice

最新推荐文章于 2021-07-28 19:42:37 发布

阅读量60

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/buty_nice/article/details/118496416

版权

笔记专栏收录该内容

32 篇文章 0 订阅

订阅专栏

缓冲运动原理和封装

原理缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢的停下来
思路：
1.让盒子每次移动距离慢慢的变小，速度就会慢慢得落下来
2.核心算法：（目标值-现在的位置）/10 作为每次移动的距离步长
3.停止计时器：让盒子位置等于目标位置就停止计时

一、移动

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
    </style>
    <body>
    <div></div>
</body>
<script>
    var _div = document.querySelector("div");
    var timer = setInterval(function() {
        if (_div.offsetLeft >= 400) {
            clearInterval(timer);
        }
        _div.style.left = _div.offsetLeft + 5 + "px";
    }, 30);
</script>

二、简单移动函数封装

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
        
        span {
            display: block;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 0;
        }
    </style>
    <body>
    <div></div>
    <span></span>
</body>
<script>
    //简单函数封装
    function animate(obj, target) {
        //obj目标对象  target目标位置
        // var obj = document.querySelector("div");
        var timer = setInterval(function() {
            if (obj.offsetLeft >= target) {
                clearInterval(timer);
            }
            obj.style.left = obj.offsetLeft + 5 + "px";
        }, 30);
    }
    var div = document.querySelector("div");
    var span = document.querySelector("span");
    animate(div, 300);
    animate(span, 300);
</script>

三、给对象添加不同的定时器

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
        
        span {
            display: block;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 0;
        }
    </style>
    <body>
    <button>点击</button>
    <div></div>
    <span>刘星</span>
</body>
<script>
    //简单函数封装
    //var obj={};
    //obj.name='andy'
    //简单动画函数封装obj目标对象 target 目标位置
    //给不同的元素指定了不同的定时器
    function animate(obj, target) {
        //当我们点击次数约多，这个元素移动速度越快
        //解决方案 让我嫩元素只有一个定时器
        //先清除以前的定时器，只保留当前的一个定时器执行
        clearInterval(obj.timer)
        obj.timer = setInterval(function() {
            if (obj.offsetLeft >= target) {
                //停止动画 本质是停止计时器
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 5 + "px";
        }, 30);
    }
    var div = document.querySelector("div");
    var span = document.querySelector("span");
    var btn = document.querySelector("button");
    // animate(div, 300);
    btn.addEventListener('click', function() {
        animate(span, 300);
    })
</script>

四、缓冲运动

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
        
        span {
            display: block;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 0;
        }
    </style>
    <body>
    <body>
        <button>点击</button>
        <!-- <div></div> -->
        <span>刘星</span>
    </body>

    <script>
        //简单函数封装
        //var obj={};
        //obj.name='andy'
        //简单动画函数封装obj目标对象 target 目标位置
        //给不同的元素指定了不同的定时器
        function animate(obj, target) {
            //当我们点击次数约多，这个元素移动速度越快
            //解决方案 让我嫩元素只有一个定时器
            //先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止计时器
                    clearInterval(obj.timer);
                }
                //让每次加5 这个步长公值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 作为每次移动的距离步长 
                obj.style.left = obj.offsetLeft + step + "px";
            }, 30);
        };
        // var div = document.querySelector("div");
        var span = document.querySelector("span");
        var btn = document.querySelector("button");

        // animate(div, 300);
        btn.addEventListener("click", function() {
            //调用函数
            animate(span, 500);
        })
        console.log(1)
    </script>

五、缓动

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
        
        span {
            display: block;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 0;
        }
    </style>
</head>

<body>
    <body>
        <button class="btn800">点击800</button>
        <button class="btn500">点击500</button>
        <!-- <div></div> -->
        <span>夏雨荷</span>
    </body>
    <script>
        //简单函数封装
        //var obj={};
        //obj.name='andy'
        //简单动画函数封装obj目标对象 target 目标位置
        //给不同的元素指定了不同的定时器
        function animate(obj, target) {
            //当我们点击次数约多，这个元素移动速度越快
            //解决方案 让我嫩元素只有一个定时器
            //先清除以前的定时器，只保留当前的一个定时器执行
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止计时器
                    clearInterval(obj.timer);
                }
                //让每次加5 这个步长公值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 作为每次移动的距离步长 
                obj.style.left = obj.offsetLeft + step + "px";
            }, 30);
        };
        // var div = document.querySelector("div");
        var span = document.querySelector("span");
        var btn500 = document.querySelector(".btn500");
        var btn800 = document.querySelector(".btn800");
        // animate(div, 300);
        btn500.addEventListener("click", function() {
            //调用函数
            animate(span, 500);
        })
        btn800.addEventListener("click", function() {
            //调用函数
            animate(span, 800);
        })
    </script>

六、回调函数

    <style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: black;
            left: 0;
        }
        
        span {
            display: block;
            top: 200px;
            width: 100px;
            height: 100px;
            background-color: brown;
            position: absolute;
            left: 0;
        }
    </style>
</head>
    <body>
        <button class="btn800">点击800</button>
        <button class="btn500">点击500</button>
        <!-- <div></div> -->
        <span>夏雨荷</span>
    </body>

    <script>
        function animate(obj, target, callback) {
            // console.log(callback); callback = function() {};调用的时候用callback()
            clearInterval(obj.timer);
            obj.timer = setInterval(function() {
                // var step = Math.ceil((target - obj.offsetLeft) / 10);
                var step = Math.ceil((target - obj.offsetLeft) / 10);
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (obj.offsetLeft == target) {
                    //停止动画 本质是停止计时器
                    clearInterval(obj.timer);
                    //回调函数写到定时器里
                    if (callback) {
                        //回调函数
                        callback();
                    }
                }
                //让每次加5 这个步长公值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 作为每次移动的距离步长 
                obj.style.left = obj.offsetLeft + step + "px";
            }, 30);
        };
        // var div = document.querySelector("div");
        var span = document.querySelector("span");
        var btn500 = document.querySelector(".btn500");
        var btn800 = document.querySelector(".btn800");

        // animate(div, 300);
        btn500.addEventListener("click", function() {
            //调用函数
            animate(span, 500);
        })
        btn800.addEventListener("click", function() {
            //调用函数
            animate(span, 800, function() {
                // alert("nihao")
                span.style.backgroundColor = "red"
            });
        })
    </script>

7、缓冲运动函数封装

function animate(obj, target, callback) {
    // console.log(callback); callback = function() {};调用的时候用callback()
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = Math.ceil((target - obj.offsetLeft) / 10);
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            //停止动画 本质是停止计时器
            clearInterval(obj.timer);
            //回调函数写到定时器里
            if (callback) {
                //回调函数
                callback();
            }
        }
        //让每次加5 这个步长公值改为一个慢慢变小的值 步长公式：（目标值-现在的位置）/10 作为每次移动的距离步长 
        obj.style.left = obj.offsetLeft + step + "px";
    }, 15);
};