JavaScript动画实现的原理、动画函数的封装

- 日理万妓 2023-01-02 02:20 125阅读 0赞

# JavaScript动画实现的原理、动画函数的封装 #

### 动画实现的原理 ###

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

实现步骤：

1.  获得盒子当前的位置
2.  让盒子在当前位置上加1个位移距离（需要添加定位）
3.  利用定时器不断重复这个操作
4.  加一个结束定时器的操作

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画原理</title>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            div {
         
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: skyblue;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div></div>
        <script>
            var div = document.querySelector("div");
            //每30毫秒让定时器移动一个像素的距离
            var timer = setInterval(function(){
         
                //定时器结束的条件
                if (div.offsetLeft > 800){
         
                    //清除定时器
                    clearInterval(timer);
                }
                //获得盒子当前的位置，让盒子在当前位置上加1个位移距离
                div.style.left = div.offsetLeft +1 + 'px';
            },30)
    
        </script>
    </body>
    </html>

程序运行结果：div盒子从最左边慢慢的向右移动

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

### 动画函数的简单封装 ###

\*函数中需要传递两个参数：需要产生动画的对象、和对象移动的距离。

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>动画原理</title>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            div {
         
                position: absolute;
                width: 200px;
                height: 200px;
                background-color: skyblue;
                left: 0;
                top: 0;
            }
            span {
         
                position: absolute;
                width: 100px;
                height: 100px;
                left: 0;
                top: 300px;
                background-color: turquoise;
            }
        </style>
    </head>
    <body>
        <div></div>
        <span></span>
        <script>
            //两个参数 obj目标对象，和target目标位置
            function animate (obj,target) {
         
            
            var timer = setInterval(function(){
         
                
                if (obj.offsetLeft > target){
         
                    
                    clearInterval(timer);
                }
                //获得盒子当前的位置，让盒子在当前位置上加1个位移距离
                obj.style.left = obj.offsetLeft +1 + 'px';
            },30)
            }
    
    
            var div = document.querySelector("div");
            var span = document.querySelector("span");
            animate(div,300);
            animate(span,200);
    
        </script>
    </body>
    </html>

将script中的函数进行封装，在后面进行调用，可以同时几个盒子调用动画函数。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

在上面的程序中，div和span的定时器都叫timer，如何解决这个问题呢？

将script中的函数进行封装，在后面进行调用，可以同时几个盒子调用动画函数。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/a81c07d8c2cf46559616d0d2c0c22055.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/04e44c4e4fbc4bc3a1c8665be84b9c12.png