javaScript动画函数封装

封装一个原生JavaScript动画函数
　　函数说明
　　　　- startAnimation() 函数的入口。接收三个参数：
　　　　- obj:被操作的Dom对象
　　　　- json:{"预处理的属性"：预处理属性值}
　　　　- fn:startAnimation函数的回调，动画是否为联动/同步等形式。

　　使用场景：
　　　　- 缓动场景，透明度动画，多物体运动，多值运动，自动轮播图...。
　　代码

            var speed = 0;   //起始定义一个运动速度变量。
            function startAnimation(obj, json, fn) {
                clearInterval(obj.timer);
                //在动画开始之前，先进行动画定时器的清理工作。
                obj.timer = setInterval(function () {
                    var cur = 0;
                    //定义一个初始值为零的变量，用来接收操作对象的属性
                    var flag = true; 
                    //如果所有的属性值都到达终点值，则为true
                    //透明度处理
                    for (var attr in json) {
                        switch(attr){
                            case 'opacity':
                                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
                                break;
                            case 'scrollTop':
                                cur = obj[attr];
                                break;
                            default: cur = parseInt(getStyle(obj, attr));
                                break;

                        }
                        //1.求速度
                        speed = (json[attr] - cur) / 20;
                        speed = json[attr] > cur ? Math.ceil(speed) : Math.floor(speed);
                        //2.临界处理
                        if (json[attr] !== cur) {
                            flag = false;
                        }
                        //3.运动起来
                        switch(attr){
                            case 'opacity':
                                obj.style[attr] = (cur + speed) / 100;
                                break;
                            case 'scrollTop':
                                obj.scrollTop = cur + speed;
                                break;
                            default: 
                                obj.style[attr] = cur + speed + 'px';
                                break;
                        }
                    }
                    if (flag) {
                        clearInterval(obj.timer);
                        if (fn) {
                            fn();
                        }
                        return;
                    }
                }, 30);
            }
            //获取属性的函数
            function getStyle(obj, attr) {
                if (obj.currentStyle) {
                    //兼容IE
                    return obj.currentStyle[attr];
                } else {
                    //主流浏览器
                    return getComputedStyle(obj, null)[attr];
                }
            }
              

            

　　

 

来源：https://www.cnblogs.com/panrad/p/11963054.html