animate函数小阶段整理。后期增加。

昨天写了不少。今天整理了下。

可以做散发。直线运动。也可以自己增强做曲线。前提设置好要走的弧度自己计算好。

搭配使用会有不错效果 。

tween.js先暂时 写进了两个临时用的。后面全整理下 剥离出去。

/*
* name: animate 动画函数
* author: alfred
* fnx: rotate move ...
*/

(function(window,$,undefined){
$.tween = {
    linear: function( start, increase, now, dur ){return start + now / dur * increase; },
    quad: function( start, increase, now, dur ){ return start + Math.pow( now / dur, 2) * increase; }
};
$.extend({
    //角度转弧度 
    degrees: function( angle ){return Math.PI / 180 * angle},
    rotate: ( document.all ) ? function( dom, baseNum, baseAngle, dir ){
        //dom  操作的DOM
        //width 宽度范围->中心位置的参考
        //height 高度范围->中心位置的参考
        //baseNum 基础角度的个数
        //baseAngle 基础角度
        var angle = dir ? (90-baseNum*baseAngle)%360 : baseNum*baseAngle%360,
            angle = this.degrees(angle),
            sinDeg = Math.sin(angle),
            cosDeg = Math.cos(angle),
            width = dom.offsetWidth,
            height = dom.offsetHeight,
            Dx = (sinDeg*height+(1-cosDeg)*width)/2,
            Dy = (-sinDeg*width+(1-cosDeg)*height)/2,
            M11 = cosDeg, M21 = sinDeg,
            M12 = -sinDeg, M22 = cosDeg;
            dom.style.filter = "progid:DXImageTransform.Microsoft.Matrix(M11="+ M11 + ",M12="+ M12 +",M21="+ M21 +",M22="+ M22 + ",Dx="+ Dx +",Dy="+ Dy +")";
        } : function( dom, baseNum, baseAngle, dir ){
            var dir = dir ? -1 : 1; 
            dom.style.WebkitTransform = "rotate("+ dir*baseNum * baseAngle % 360 +"deg)";
            dom.style.MozTransform = "rotate("+ dir*baseNum * baseAngle % 360 +"deg)";
            dom.style.transform = "rotate("+ dir*baseNum * baseAngle % 360 +"deg)";
    },
    getEmitSite: function( radius, angle ){
        //[x,y] 从正Y 开始为0度
        return [
            Math.round(Math.sin( angle ) * radius),
            Math.round(Math.cos( angle ) * radius)];
    },
    emitOut: function( dom, radius, angle, speed, method, callback ){
        //radius 半径
        //angle 角度
        var angle = this.degrees( angle );
            this.animate( dom, {
                'left':Math.round(Math.sin( angle ) * radius),
                'top': Math.round(Math.cos( angle ) * radius)
                }, speed, method, callback );
            return this;
    },
    emitIn: function( dom, radius, angle, speed, method, callback ){
        //radius 半径
        //angle 角度
        var angle = this.degrees( angle );
            this.animate( dom, {
                'left': dom.offsetLeft + Math.round(Math.sin( angle ) * radius),
                'top': dom.offsetTop + Math.round(Math.cos( angle ) * radius)
                }, speed, method, callback );
            return this;
    },
    support: {
        "show": true,//width, height
        "hide": true,//width, height
        "toggle": true,//width, height
        "slideToggle": true, // true width margin-left; false width
        "slideDown": true,//height
        "slideUp": true,//height
        "slideToggle": true,//height
        "bigger": true,//width, height
        "smaller": true,//width, height
        "fadeIn": true,//width, height
        "fadeOut": true,// opacity
        "fadeToggle": true,//opacity
    },
    allTagsDisplay: {
        inline : "a abbr acronym b bdi bdo big br button canvas cite code command del details dfn em embed h1 h2 h3 h4 h5 h6 i iframe img input ins select kbd label link mark meter object output q rq rt ruby samp select small source span strong sub summary sup textarea time track tt var video",
        block : "address article aside blockquote dd div dl dt fieldset figcaption figure footer form header hgroup hr legend map nav ol optgroup option p pre selection ul "
        //"inlineBlock" = "progress",
        //"none" = "area audio base datalist param noscript noframes",
        //"listItem" = "li",
        //"table" = "table"
    },
    display: function(dom){
        var display = dom.style.display;
        if( !!display && display!=="none" ){ return display;}        
        if( !!this.allTagsDisplay.inline.match( new RegExp(dom.nodeName,"i") ) )
        {
             return "inline";
        }
        if( !!this.allTagsDisplay.block.match( new RegExp(dom.nodeName,"i") ) )
        {
            return "block";
        }
        else
        {
            return "inline-block";
        }
    },    
    opacity: function( o, opa ){
        var style = (document.all) ? 'filter':'opacity',
            value = (document.all) ? "alpha(opacity:"+opa+")" : opa/100,
            oldOpa = function(){
                var oldOpa;
                if( (document.all&&( oldOpa = parseInt(o.style[style]))) ||
                    (o.style[style]-0) ){
                    return oldOpa;
                }
                return 1;
            }();
        if( opa || opa===0 )
        {
            o.style[style] = value;
            return o;
        }
        else
        {
            return oldOpa;
        }
    },
    animate: function( dom, style/*{}*/, speed /*time*/, method/*tween in jquery is easy*/, callback )
    {
        var now = 0,
        start = {
            "width": dom.offsetWidth,
            "height": dom.offsetHeight,
            "left": dom.offsetLeft,
            "top": dom.offsetTop,
            'opacity': this.opacity(dom)
        },
        method = method || $.tween.linear,
        loop = setInterval(function(){
            if( now > speed)
            {
                callback && callback();
                return clearInterval(loop);
            }
            for(var i in style){
                if(style==='opacity')
                {
                    this.opacity( dom, method( start[i], style[i]-start[i], now, speed , callback));
                }
                else
                {
                    dom.style[i] = method( start[i], style[i]-start[i], now, speed ) + "px";
                }
            }
            now += 20;
        },15);
        return this;
    },
    isShow: function(dom){
        var display = dom.style.display,
            width = parseInt(dom.style.width),
            height = parseInt(dom.style.height),
            left = dom.offsetLeft,
            top = dom.offsetTop,
            opacity = this.opacity(dom);
        if(display&&display!=='none'&&width!==0&&height!==0&&left>0&&top>0&&opacity>0)
        {
            return true;
        }
        return false;
    },
    isHide: function(dom){
        return !this.isShow(dom);
    },
    show: function( dom, speed, method, callback ){
        if(this.isShow(dom)){return}
        if(!dom.style.display || dom.style.display == 'none')
        {
            dom.style.display = this.display( dom );
        }
        var width = dom.offsetWidth,
            height = dom.offsetHeight;
            dom.style.width=0;
            dom.style.height=0;
        if( speed )
        {
            this.animate( dom, {"width": width,"height": height,}, speed, method, callback);
            return this;            
        }
        else
        {
            dom.style.display = "";
            dom.style.width = "";
            dom.style.height = "";
            callback();
            return this;
        }
    },
    hide: function( dom, speed, method, callback ){
        if(this.isHide(dom)){return}
        if( speed )
        {
            this.animate( dom, {"width": 0,"height": 0,}, speed, method, callback);
            return this;            
        }
        else
        {
            dom.style.display = "none";
            dom.style.width = "0";
            dom.style.height = "0";
            callback();
            return this;
        }
    },
    _toggle: function( dom, speed, method, callback, showFn, hideFn ){
        var that = this,
            hide = function(){
                that[hideFn]( dom, speed/2, method, callback );
            };
            show = function(){
                that[showFn]( dom, speed/2, method, callback );
            };
        if(!dom.style.display || dom.style.display == 'none')
        {
            this[showFn]( dom, speed/2, method, hide);
        }
        else
        {
            this[hideFn]( dom, speed/2, method, show);    
        }
    },
    toggle: function( dom, speed, method, callback ){
        this._toggle(dom,speed,method,callback,'show','hide');
    },
    slideDown: function( dom, speed, method, callback ){
        if(this.isShow(dom)){return}
        
        dom.style.display = this.display( dom );

        var height = dom.offsetHeight;
        dom.style.height=0;
        this.animate( dom, {"height": height}, (speed || 0), method, callback );
    },
    slideUp: function( dom, speed, method, callback ){
        if(this.isHide(dom)){return}
        this.animate( dom, {"height": 0}, (speed || 0), method, callback );
    },
    slideToggle: function( dom, speed, method, callback)
    {
        this._toggle(dom,speed,method,callback,'slideDown','slideUp');
    },
    fadeIn: function( dom, speed, method, callback ){
        if(this.isShow(dom)){return}
        this.opacity(dom,0);
        dom.style.display = this.display( dom );
        this.animate(dom,{'opacity':100},speed,method,callback);
    },
    fadeOut: function( dom, speed, method, callback ){
        if(this.isHide(dom)){return;}
        this.animate(dom,{'opacity':0},speed,method,callback);
    },
    fadeToggle: function( dom, speed, method, callback ){
        this._toggle( dom, speed, method, callback, 'fadeIn', 'fadeOut' );
    },
});
})(window,alfred)

增加几个函数方法。修复旋转的BUG 现在可支持顺/逆时针 淡入淡出未测试 其他测试 FF IE8 欢迎帮忙测试提交BUG

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　------------ 爱生活 爱代码。