准备之js实现动画

1.定时器

const animateMethod = (e) => {
    var left = 0,
        flag = true,
        e = document.getElementById(e);
    // e.setAttribute('style', 'left:0px');
    // e.style['left'] = '0px';
    e.style.setProperty('left', '0px');
    /**
     * e.style.left 只适用于内联样式
     * 那么我们外部引用的css样式，要实现操作样式的效果，我个人认为这样最简单()
     * 1.先为其设置一个行内样式（要操作的样式）
     *      1.1     e.setAttribute('style', 'left:0px');
     *      1.2     e.style['left']='0px';
     *      1.3     e.style.setProperty('left', '0px');//如果需要加important 可以直接加第三个参数('important')
     * 2.之后就可以使用e.style.left操作对应样式了
     * */

    setInterval(() => {
        // 相当于
        // left == 0 ? flag = true :
        //     (left == 100 ? flag = false : '');
        left == 0 ? flag = true : left == 100 ? flag = false : '';
        flag ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`;
    }, 1000 / 60)
};

2.requestanimframe

特点：

* requestAnimationFrame与浏览器绘制同步

* 浏览器页面每次要重绘，就会触发requestAnimationFrame;直接使用它无疑性能优化了很多

* setInterval和setTimeout 只是通过传递的第二个参数去设置把该动画代码放在线程队列中等待执行的时间,如果前面有其他任务,需要等到前面任务完成后再执行

* 帧速率无法指定，即无法制定浏览器按时绘制下一帧

* requestAnimationFrame 不需要调用者指定帧速率，浏览器会自行决定最佳的帧效率。

// 兼容性处理
window.requestAnimFrame = (function() {
    return (
        window.requestAnimationFrame ||
        window.webkitRequestAnimationFrame ||
        window.mozRequestAnimationFrame ||
        window.oRequestAnimationFrame ||
        window.msRequestAnimationFrame ||
        function(callback, element) {
            window.setTimeout(callback, 1000 / 60)
        }
    )
})();
window.cancelAnimFrame = window.cancelAnimationFrame ||
    window.webkitCancelAnimationFrame ||
    window.mozCancelAnimationFrame ||
    window.msCancelAnimationFrame ||
    window.oCancelAnimationFrame ||
    function(id) {
        //为了使setTimteout的尽可能的接近每秒60帧的效果
        window.clearTimeout(id);
    };


// requestAnimFrame
    var elem = document.getElementById('requestanimframe');
    elem.style.setProperty('left', '0px');
    var startTime = undefined,
        count = 0;

    function render(time) {
        time = Date.now();
        if (startTime === undefined) {
            startTime = time;
        }
        elem.style.left = ((time - startTime) / 10) % 100 + 'px';
    }
    elem.onclick = function() {
        (function animloop() {
            render();
            window.requestAnimFrame(animloop, elem);
            document.getElementById('stop').onclick = function() {
                window.cancelAnimFrame(animloop);
            }
        })()
    };