编写匀速，减速动画

最新推荐文章于 2024-08-27 13:38:21 发布

Mr.YＵ

最新推荐文章于 2024-08-27 13:38:21 发布

阅读量155

点赞数

分类专栏： webAPI 文章标签： javascript html css

本文链接：https://blog.csdn.net/weixin_45659402/article/details/110678657

版权

webAPI 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    div{
        width: 200px;
        height: 200px;
        position: absolute;
        left: 0;
        background-color: pink;
    }
</style>
<body>
<button>点击</button>
<div></div>
<script>
    var div = document.querySelector('div');
    var btn = document.querySelector('button');
   


    //封装
    //匀速运动
    //动画想要懂必须要定位
    //当我们不断点击按钮，这个元素的运动速度会越来越快，因为开启了太多的定时器
    //解决方案，先清除以前的定时器，只保留当前的定时器执行
    var timer = setInterval(function (){
        if(div.offsetLeft >= 400){
            clearInterval(timer);
        }
        div.style.left = div.offsetLeft + 5 + 'px'
    
    },30);
    function animate(obj,target){
        clearInterval(obj.timer);
        obj.timer = setInterval(function (){
            //步长值写到定时器里面
            // var step = (target - obj.offsetLeft) / 10 ;
            if(obj.offsetLeft >= target){
                clearInterval(obj.timer);
            }
            obj.style.left = obj.offsetLeft + 5 + 'px'
    
        },30);
    }

    //2.减速
    //1.让盒子每次移动的距离慢慢变小，速度就会慢下来
    //2.核心算法（目标值 - 现在的位置）/10 作为每次移动的距离 步长
    //3.停止的条件，让盒子位置等于目标位置就停止定时器
    // function animate(obj,target,cellback){
    //     clearInterval(obj.timer);
    //      obj.timer = setInterval(function (){
    //          //步长值写到定时器里面
    //          // var step = Math.ceil((target - obj.offsetLeft) / 10) ;//!!!!!!
    //          var step = (target - obj.offsetLeft) / 10;
    //          step = step > 0 ? Math.ceil(step) :Math.floor(step);
    //          console.log(obj.offsetLeft)
    //         if(obj.offsetLeft == target){
    //             clearInterval(obj.timer);
    //         }
    //         obj.style.left = obj.offsetLeft + step + 'px'

    //     },30);
    // }

    // btn.addEventListener('click',function (){
    //     animate(div,300)
    // })


    //匀速运动 就是盒子当前的位置 + 固定的值
    //缓动动画就是   盒子当前的位置 + 变化的值（（目标值 - 现在的位置）/ 10 ）
</script>
</body>
</html>

Mr.YＵ

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
编写匀速，减速动画

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><style> div{ width: 200px; height: 200px; position: absolute; left: 0;
复制链接

扫一扫

专栏目录