JavaScript 动画实现

JavaScript 动画实现 根据幕课网教程 修改了下 

var AnimationUtil = { getStyle : function (obj, attr) {
        return document.defaultView.getComputedStyle ? document.defaultView.getComputedStyle(obj, null)[attr] : obj.currentStyle[attr];
    },
                          jsonReduce : function (fn, json, init) {
        var tempArray = [];
        for (var key in json) {
            tempArray.push(json[key]);
        };
        return tempArray.reduce(fn, init);
    },
                          animation : function (obj, json) {
        var _js6665 = arguments.length;
        for (var n6664 = 2; n6664 < _js6665; n6664 += 2) {
            switch (arguments[n6664]) {
            case 'speed':
                speed = arguments[n6664 + 1];
                break;
            case 'time':
                time = arguments[n6664 + 1];
                break;
            case 'callback':
                callback = arguments[n6664 + 1];
            };
        };
        var speed = 'undefined' === typeof speed ? 'slow' : speed;
        var time = 'undefined' === typeof time ? 30 : time;
        var callback = 'undefined' === typeof callback ? fasle : callback;
        clearInterval(obj.timer);
        var step = 1;
        var flagJson = new Object();
        for (var attr in json) {
            flagJson[attr] = false;
        };
        return obj.timer = setInterval(function () {
            for (var attr in json) {
                if (attr == 'opacity') {
                    var iCurrent = Math.round(parseFloat(AnimationUtil.getStyle(obj, attr)) * 100);
                } else {
                    var iCurrent = parseInt(AnimationUtil.getStyle(obj, attr));
                };
                step = (json[attr] - iCurrent) / (speed == 'slow' ? 10 : 1);
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (iCurrent != json[attr]) {
                    stop = false;
                    if (attr == 'opacity') {
                        obj.style.opacity = (iCurrent + step) / 100;
                        obj.style.filter = 'alpha(opacity=' + (iCurrent + step) + ')';
                    } else {
                        obj.style[attr] = (iCurrent + step) + 'px';
                    };
                } else {
                    flagJson[attr] = true;
                };
                if (AnimationUtil.jsonReduce(function (x, y) {
                    return x && y;
                }, flagJson, true)) {
                    clearInterval(obj.timer);
                    if (callback) {
                        callback();
                    };
                };
            };
        }, time);
    }
                        };

;;;;;;;;;;;;;;

正在模仿jQeury写个库，修改了写不地道的地方，代码如下
animate : function (targetJson, opts) {
        var defaultOpts = { delay : 10,
                            duration : 300,
                            delta : 'linear'
                          };
        var defaultDelta = claudio.style.deltas.linear;
        opts = opts ? claudio.union(opts, defaultOpts) : defaultOpts;
        var delta = opts.delta;
        if (typeof delta === 'string') {
            opts.delta = delta.search(/(circ|quad)/) > -1 ? claudio.style.deltas[RegExp['$1']] : (delta.search(/(back|elastic)/) > -1 ? claudio.style.deltas[RegExp['$1']](opts.deltaX || 1.5) : defaultDelta);
        };
        var that = this;
        return this.each(function (elem) {
            var start = new Date();
            clearInterval(elem.timer);
            var subJson = {  };
            var srcJson = {  };
            var iSub;
            for (var attr in targetJson) {
                srcJson[attr] = claudio.style.getStyle(elem, attr);
            };
            for (var attr in targetJson) {
                iSub = targetJson[attr] - srcJson[attr];
                if (iSub !== 0) {
                    subJson[attr] = iSub;
                };
            };
            if (!claudio.isEmptyObject(subJson)) {
                return elem.timer = setInterval(function () {
                    var timePassed = new Date() - start;
                    var progress = timePassed / opts.duration;
                    if (progress > 1) {
                        progress = 1;
                    };
                    var delta = opts.delta(progress);
                    for (var attr in subJson) {
                        claudio.style.setStyle(elem, attr, srcJson[attr] + subJson[attr] * delta);
                    };
                    if (progress === 1) {
                        clearInterval(elem.timer);
                        that.timer = null;
                        return opts.callback ? opts.callback.call(that) : null;
                    };
                }, opts.delay);
            };
        });
    },


；；；；；；；；；；；；；；；；；；；；；；；；；；；
 
Common Lisp 的 parenscript包写成 有些变量名和 函数参数有点奇怪 请谅解！

(defpsmacro define-animate-util()
  `(var *animate-util
        (create
         ;;;utilities                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    

         get-style
         (lambda(obj attr)
           (if (@ document default-View get-computed-style)
               (elt (chain document default-View (get-computed-style obj null)) attr)
               (elt (@ obj current-style) attr)))

         ;;;;;;;;;FRAME                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  
         json-reduce
         (lambda(fn json init)
           (var temp-array (array))
           (for-in (key json)
                   (chain temp-array (push (elt json key))))
           (chain temp-array (reduce fn init)))

         animation
         (lambda (obj json &key (speed "slow")  (time 30) (callback fasle))
           (clear-interval (@ obj timer))
           (var step 1)
           (var flag-json (new (*object)))
           (for-in (attr json)
                   (console-log attr)
                   (setf (elt flag-json attr) false))
           (setf (@ obj timer)
                 (set-interval
                  (lambda()
                    (for-in (attr json)
                            (if (equal attr "opacity")
                                (var i-current (round (* (parse-float (chain *animate-util (get-style obj attr))) 100)))
                                (var i-current (parse-int (chain *animate-util (get-style obj attr)))))

                            (setf step (/ (- (elt json attr) i-current) (if (equal speed "slow") 10 1)))
                            (setf step (if (> step 0) (ceiling step) (floor step)))

                            (cond ((not (equal i-current (elt json attr)))
                                   (setf stop false)
                                   (cond ((equal attr "opacity")
                                          (setf (@ obj style opacity) (/ (+ i-current step) 100))
                                          (setf (@ obj style filter) (+ "alpha(opacity=" (+ i-current step) ")")))
                                         (t (setf (elt (@ obj style) attr) (+ (+ i-current step) "px")))))
                                  (t (setf (elt flag-json attr) true)))

                            (when (chain *animate-util (json-reduce (lambda(x y) (and x y)) flag-json true))
                              (clear-interval (@ obj timer))
                              (console-log (+ "close at end"))
                              (when callback (callback)))))
                          time)))

         )))
(defpsmacro animation (obj json &key (speed "slow") (time 30) (callback false))
  `(chain *animate-util (animation ,obj ,json :speed ,speed :time ,time :callback ,callback)))