（7）js简单动画原理

superfortunate

已于 2022-01-26 22:58:06 修改

阅读量740

点赞数 1

分类专栏： JavaScript知识点详细学习笔记文章标签：动画前端 javascript

于 2022-01-26 22:54:50 首次发布

本文链接：https://blog.csdn.net/weixin_59598992/article/details/122677361

版权

JavaScript知识点详细学习笔记专栏收录该内容

39 篇文章 2 订阅

订阅专栏

核心原理：通过定时器setInterval（）不断移动盒子的位置。

实现步骤:

获得盒子的当前位置
让盒子在当前位置加上1个移动距离
利用定时器不断重复这个操作
加一个结束定时器的条件
注意元素需要添加定位，才能使用element.style.left

做一个简单的移动

<style>
       div {
           position: absolute;
           left: 0;
           width: 100px;
           height: 100px;
           background-color: pink;
       }
    </style>
</head>
<body>
    <div></div>
    <script>
     var div = document.querySelector('div');
     
     var timer = setInterval(function(){
         if(div.offsetLeft >=400){         //获取当前位置
            clearInterval(timer);
         }
        div.style.left = div.offsetLeft + 1 +'px';
     },30)
    </script>
</body>

简单动画函数封装

注意函数需要传递两个参数，动画对象和移动的距离。

//简单动画函数封装obj目标对象target目标位置
        function animate(obj,target){
            var timer = setInterval(function(){
                if(obj.offsetLeft >= target){
                    clearInterval(timer);
                }
                obj.style.left = obj.offsetLeft + 1 +'px';
            },30);
        }
     var div = document.querySelector('div');
    animate(div,300);

给不同对象添加不同定时器

如果多个元素都使用一个动画函数，每次都要var声明定时器。我们可以给不同的元素使用不同的定时器（自己用自己专门的定时器）。

核心原理：利用js是一门动态语言，可以很方便的给当前对象添加属性。

    <script>
        //简单动画函数封装obj目标对象target目标位置
        function animate(obj,target){
            clearInterval(obj.timer);//防止多次点击多个定时器执行导致加快
            obj.timer = setInterval(function(){
                if(obj.offsetLeft >= target){
                    clearInterval(obj.timer);
                }
                else{
                    obj.style.left = obj.offsetLeft + 1 +'px';
                }
            },30);
        }
     var div = document.querySelector('div');
     var btn = document.querySelector('button');
     btn.addEventListener('click',function(){
        animate(div,300);
     })
    </script>;

缓动效果原理

缓动动画就是让元素运动速度有所变化，最常见的是让速度慢慢停下来。思路：

让盒子每次移动的距离慢慢变小，速度就会慢慢落下来。
核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离
停止的条件是：让当前盒子位置等于目标位置就停止定时器

  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);
                }
                else{
                    obj.style.left = obj.offsetLeft + step +'px';   //修改
                }
            },30);
        }
     var div = document.querySelector('div');
     var btn = document.querySelector('button');
     btn.addEventListener('click',function(){
        animate(div,300);
     })

缓动动画在多个目标值之间移动

从300像素到600，从600回300；当点击时，判断步长是正值还是负值。

function animate(obj,target){
            clearInterval(obj.timer);//防止多次点击多个定时器执行导致加快
            obj.timer = setInterval(function(){
                //把步长值改为整数,往前走（向上取整），往回走是负数（向下取整）
                var step = (target - obj.offsetLeft)/10;
                step = step > 0?Math.ceil(step) : Math.floor(step);
                if(obj.offsetLeft == target){
                    clearInterval(obj.timer);
                }
                else{
                    obj.style.left = obj.offsetLeft + step +'px';
                }
            },30);
        }
     var div = document.querySelector('div');
     var btn300 = document.querySelector('.btn300');
     var btn600 = document.querySelector('.btn600');
     btn300.addEventListener('click',function(){
        animate(div,300);
     })
     btn600.addEventListener('click',function(){
        animate(div,600);
     })

学习快乐！