js动画

css动画：

css动画的优点：

• 代码量少：通过简单的属性配置，就可以实现各种动画效果；
• 执行效率高：因为css代码是由gpu（显卡、M协处理器）进行渲染，所以不会占用CPU资源。

缺点：

• 兼容性问题：需要考虑用户群体的浏览器版本和类型，根据不同版本、类型配置不同的代码。
• 不能像js那样精确地控制动画过程。

js动画：

s动画的优点

• 可以精确的控制动画过程(通过js不断的修改标签属性实现动画效果)
• 没有热河兼容性问题

js动画的缺点：

• 因为js操作标签属性时，其实是在进行DOM操作，修改DOM树，所以性能损耗较大。

使用js让div块变速运动

html代码：

<script src="动画算子.js" type="text/javascript" charset="utf-8"></script>
<div id="div" style="width: 300px;height: 300px;background-color: red;position: absolute;">

</div>

js代码：

window.onload = function() {
                var div = document.querySelector('#div');
                var starTime, //记录动画开始时间
                    duration = 5 * 1000, //保存动画执行总时间
                    frameTime = 13,
                    timerId; //定时器id

                div.onclick = function() {
                    starTime = new Date();
                    timerId = setInterval(animat, frameTime);
                }

                function animat() {
                    //获取动画执行的时间
                    var nowTime = new Date();
                    //获取动画执行时间百分比
                    var per = Math.min(1.0, (nowTime - starTime) / duration);

                    //通过时间百分比控制动画执行效果
                    //div.style.left = (500 * per) + 'px';
                    if(per == 1.0) {
                        clearInterval(timerId);
                    } else {
                        div.style.left = (Easing.backOut(per)) * 500 + 'px';
                    }
                }
            }

动画算子.js

 var pow = Math.pow,
     BACK_CONST = 1.70158;
Easing = {
        // 匀速运动
        linear: function (t) {
            return t;
        },

        easeIn: function (t) {
            return t * t;
        },

        easeOut: function (t) {
            return (2 - t) * t;
        },

        easeBoth: function (t) {
            return (t *= 2) < 1 ? .5 * t * t : .5 * (1 - (--t) * (t - 2));
        },

        easeInStrong: function (t) {
            return t * t * t * t;
        },

        easeOutStrong: function (t) {
            return 1 - (--t) * t * t * t;
        },

        easeBothStrong: function (t) {
            return (t *= 2) < 1 ? .5 * t * t * t * t : .5 * (2 - (t -= 2) * t * t * t);
        },

        easeOutQuart: function (t) {
            return -(Math.pow((t - 1), 4) - 1)
        },

        easeInOutExpo: function (t) {
            if (t === 0) return 0;
            if (t === 1) return 1;
            if ((t /= 0.5) < 1) return 0.5 *Math.pow(2, 10 * (t - 1));
            return 0.5 * (-Math.pow(2, - 10 * --t) + 2);
        },

        easeOutExpo: function (t) {
            return (t === 1) ? 1 : -Math.pow(2, - 10 * t) + 1;
        },
        
        swingFrom: function (t) {
            return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
        },


        swingTo: function (t) {
            return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
        },


        backIn: function (t) {
            if (t === 1) t -= .001;
            return t * t * ((BACK_CONST + 1) * t - BACK_CONST);
        },

        backOut: function (t) {
            return (t -= 1) * t * ((BACK_CONST + 1) * t + BACK_CONST) + 1;
        },

        bounce: function (t) {
            var s = 7.5625,
                r;

            if (t < (1 / 2.75)) {
                r = s * t * t;
            } else if (t < (2 / 2.75)) {
                r = s * (t -= (1.5 / 2.75)) * t + .75;
            } else if (t < (2.5 / 2.75)) {
                r = s * (t -= (2.25 / 2.75)) * t + .9375;
            } else {
                r = s * (t -= (2.625 / 2.75)) * t + .984375;
            }

            return r;
        }
    };