逐帧动画两种实现方式 – hacke2’s blog |

;(function($) {
    'use strict';
    $.extend($.fn, {
        requestAnimFrame: function(opt){
            var defined = {
                top:0,
                left:0,
                position:'absolute'
            },
            option = $.extend(defined, opt),
            i = 0,
            flag = false,
            curAnim = null,
            self = this,
            width = 0,
            isRunning = false,
            maybeAddPx = function (value) {
                return (typeof value == "number") ? value + "px" : value;
            },
            /**
             * 标准化requestAnimFrame
             * @param  {[type]} ){                         return  window.requestAnimationFrame       ||                    window.webkitRequestAnimationFrame ||                    window.mozRequestAnimationFrame    ||                    function( callback ){                    window.setTimeout(callback, 1000 / 60);                    };        })( [description]
             * @return {[type]}     [description]
             */
            requestAnimationFrame = (function(){
                if(option.time) {
                    return  function( callback ){
                            window.setTimeout(option.time);
                        };
                }
                return  window.requestAnimationFrame       ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame    ||
                        function( callback ){
                            window.setTimeout(callback, 1000 / 60);
                        };
            })(),
            //添加两张图，解决一轮动画结束闪屏问题
            anim_1 = $('<div>', {
                css :  {
                     background : 'url(' + option.url + ') no-repeat scroll 0px 0px transparent'
                     
                }

            }),
            anim_2 = anim_1.clone(),
            init = function() {
                self.append(anim_1).append(anim_2).css('position', 'relative');
            },
            width = option.length / option.step,
            go = function() {
                    if (i > step) { i = 0; }
                    flag ? (curAnim = anim_1) : (curAnim = anim_2);

                    flag = !flag;
                    curAnim[0].style.backgroundPosition = "-" + i * width + "px 0px";
                    //使用Zepto方法会闪动，具体看博文：http://www.hacke2.cn/anmi-strange-problem/
                    //curAnim.css('background-position' , '-' + i * 75 + 'px 0px')
                    self.append(curAnim);

                    i++;
                    console.log(isRunning)
                    isRunning && requestAnimationFrame(go)      
            };

            init();

            return {
                run : function() {
                    isRunning = true;

                    requestAnimationFrame(go);

                },
                stop : function() {
                    isRunning = false;
                },
                isRunning : function() {
                    return isRunning;
                }
            };
        }
    })

        
})(Zepto);

var ra = scope.find('#divParent').requestAnimFrame({
        step : 80,
        url : 'img/1-slow.png',
        length : 6000,
        time : 12
    });
ra.run();

<div id="divParent"></div>