元素的移动

怼烎@ 2022-12-14 15:54 164阅读 0赞

通过JavaScript控制元素的移动

### 1、元素的移动 ###

**1.1 目标**  
元素每0.1s移动10px 。从位置A水平移动到位置B，移动到指定位置后停止移动

**1.2 思路**

*  将元素设为absolute，脱离文档流。
 *  每0.1s将元素的left值增加10px。直到移动到指定位置。

**1.3 基本代码如下**

.kuang { 
                width: 400px;
                height: 200px;
                border: 2px solid #098;
                position: relative;
                top:60px;
            }
            .ele { 
                width: 50px;
                height: 50px;
                background-color: lightpink;
                position: absolute;
                left: 0;
            }

**1.4 最终结果**  
![在这里插入图片描述][20201014144107632.gif_pic_center]

### 2、增加 `开始`和`暂停`控制效果 ###

**2.1 目标**  
增加开始和暂停按钮，点击按钮。开始和停止元素的移动

**2.2 思路**

*  点击开始按钮，开始定时器的执行
 *  点击结束，清除定时器

**2.3 js部分**

<button id="start">开始</button>
        <button id="stop">暂停</button>
        <div class="kuang">
            <div class="ele"></div>
        </div>
            var start = document.getElementById("start");
            var stop = document.getElementById("stop");
    
            var parent = document.getElementsByClassName("kuang")[0];
            var ele = document.getElementsByClassName("ele")[0];
            var maxSpace = parent.clientWidth - ele.offsetWidth;// 移动范围
    
    
            var st;
            function move() { 
                var left = (ele.offsetLeft) + "".match(/(\d{1,})/);
                if (left >= maxSpace) { 
                    clearInterval(st)
                } else { 
                    ele.style.left = left + 10 + "px";
                }
            }
    
            start.onclick = function () { 
                st = setInterval(function () { 
                    move();
                }, 100);
            }
    
            stop.onclick = function () { 
                clearInterval(st)
            }

**2.4 实现结果**  
![在这里插入图片描述][20201014163702573.gif_pic_center]

### 3、设置移动次数 ###

**3.1 目标**  
给元素的移动设置移动次数

**3.2 思路**  
每次移动到目标位置后计数，若小于目标值，再次开始位置移动。知道移动到目标位置的次数等于 设定的目标值。

**3.3 js部分**  
设置移动次数为4。

**3.4 实现效果**  
![在这里插入图片描述][20201014164945113.gif_pic_center]

### 4、其他 ###

此外还可以设置 延迟时间、是否反方向移动、移动过程中元素的其他属性的改动都是可以设置的。  
实现思路也大同小异，在此就不赘述了

### 5、和CSS实现动画效果相比？ ###

动画方面开发的比较少，总结了几点（可能不够准确、完善）

CSS3动画的优点：

1.  性能会更好一些。浏览器会对CSS3动画自动做一些优化。专门新建一个GUI线程用来执行动画
2.  代码相对简单一些。有专门的CSS属性/值 transfrom 、transition、animation 等等等等

但是css动画的缺点也很明显：

1.  在动画控制上不够灵活
2.  低版本浏览器上会有兼容问题
3.  并不能实现所有的动画效果，或者在一些效果复杂的动画方面代码量和实现方面也会比较吃力。

JavaScript的动画正好弥补了这几个缺点，控制能力很强，写的好的话可以兼容到IE6，并且功能强大

所以，实现一些小的、简单的动画效果的话优先选择CSS3。 如果想要实现复杂控制的动画，使用JavaScript会靠谱一些。

### 6、requestAnimationFrame ###

> 一直以来是通过定时器setTimeout() 和setInterval() 结合js代码实现动画的。但是这样的动画在实际执行时可能会有误差（事件循环，，，这里就不多做解释了。。。）

`requestAnimationFrame`是浏览器用于定制循环操作的一个接口，类似于setTimeout 。主要是按帧对网页进行重绘。

`requestAnimationframe`的优势在于充分利用了显示器的刷新机制，比较节省系统资源。  
显示器有固定的刷新频率（60hz或者75hz）就是说每秒最多重绘60次或者75次。`requestAnimationFrame`的基本思想就是与这个刷新频率保持同步。利用这个刷新频率对页面进行重绘。此外一旦页面不处于浏览器的当前标签，就会自动停止刷新。节省了一定了系统资源

不过，`requestAnimationFrame`是在主线程上完成的。如果主线程非常繁忙，`requestAniamtionFrame`的动画效果会大打折扣

**6.1 执行**

function move(){ 
       // 具体的动画实现
       requestAnimationFrame(move);
    }
    requestAnimationFrame(move)

**6.2 取消/停止**

var raf=requestAnimationFrame(move);
    cancelAnimationFrame(raf); // 取消动画

[20201014144107632.gif_pic_center]: /images/20221123/d26a7c0342fa4bb8996d24ed5c8409e8.png
[20201014163702573.gif_pic_center]: /images/20221123/483ef62f1d3d46e0b99c34eb754368b6.png
[20201014164945113.gif_pic_center]: /images/20221123/168d49fb184d4c8a8f0f957757c36166.png