原生js 动画

咱们常常经过setInterval或setTimeout定时修改DOM、CSS实现动画,

利用seTimeout实现的动画在某些低端机上会出现卡顿、抖动的现象。 这种现象的产生有两个缘由：

• setTimeout的执行时间并非肯定的。在Javascript中， setTimeout 任务被放进了异步队列中，只有当主线程上的任务执行完之后，才会去检查该队列里的任务是否须要开始执行，所以 setTimeout 的实际执行时间通常要比其设定的时间晚一些。
• 刷新频率受屏幕分辨率和屏幕尺寸的影响，所以不一样设备的屏幕刷新频率可能会不一样，而 setTimeout只能设置一个固定的时间间隔，这个时间不必定和屏幕的刷新时间相同。

不过实现动画还可使用requestAnimationFrame

requestAnimationFrame的方式的优点以下：

1.通过浏览器优化，动画更流畅

2.窗口没激活时，动画将中止，省计算资源

3.更省电，尤为是对移动终端

requestAnimationFrame最大的优点是

由系统来决定回调函数的执行时机。具体一点讲，若是屏幕刷新率是60Hz,那么回调函数就每16.7ms被执行一次，若是刷新率是75Hz，那么这个时间间隔就变成了1000/75=13.3ms，换句话说就是，requestAnimationFrame的步伐跟着系统的刷新步伐走。它能保证回调函数在屏幕每一次的刷新间隔中只被执行一次，这样就不会引发丢帧现象，也不会致使动画出现卡顿的问题。

实现一个div滑动的动画，由快至慢5s结束

.sj{
    width:50px;
    height:50px;
    border:1px solid red;
    position:absolute;
    left:0
}
<div class="sj" id="sj"></div>
//ele为要移动的盒子，target为目标位置（像素），spd为计数器的频率
var ele = document.getElementById('sj')
function animate(ele,spd){
    var start = Date.now(); // remember start time
    var timer = setInterval(function() {
        var timePassed = Date.now() - start;
        var step = Math.ceil(Math.abs(timePassed - 5000)/10)
        console.log(step)
        if (timePassed >= 5000) {
            clearInterval(timer); // finish the animation after 2 seconds
            return;
        }
        ele.style.left = ele.offsetLeft + step + 'px'
    }, spd);
}
复制代码

实现一个div滑动的动画，由快至慢到500px结束

function animate1(ele,target,spd){
    var timer = setInterval(function() {
        var step = (target-ele.offsetLeft)/10;
        //对步长进行二次加工(大于0向上取整,小于0向下取整)
        step = step>0?Math.ceil(step):Math.floor(step);
        //动画原理： 目标位置 = 当前位置 + 步长
        ele.style.left = ele.offsetLeft + step + "px";
        //检测缓动动画有没有中止
        if(Math.abs(target-ele.offsetLeft)<=Math.abs(step)){
            //处理小数赋值
            ele.style.left = target + "px";
            clearInterval(timer);
        }
    }, spd);
}
复制代码