个人博客

A web front-end programmer's personal blog.

jquery中的animate与SVG的使用

####jquery中的animate改变特殊属性

通常我们通过如下形式使用animate:

animate( params, [duration], [easing], [callback] ) 

这个函数的关键在于指定动画形式及结果样式属性对象。这个对象中每个属性都表示一个可以变化的样式属性(如“height”、“top”或“opacity”)。注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left.

关于animate还有种使用方式,可用于改变一些特殊的属性值,用法如下:

.animate( properties, options )

更多关于参数的问题,参考官方API

下面通过在SVG中创建基本图形并改变相关属性实现相应的效果为例,展示animate中改变特殊属性的方式:

#####核心HTML

<style>
.box{width:500px; height: 300px; border: 1px solid #ccc;}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script src="jquery-tween.js"></script>
</head>
<body>
    <div class="box" id="div1"></div>
</body>

#####核心JS

<script>
    window.onload = function(){
        var oDiv1 = document.getElementById('div1');

        var oSvg = createXMLTag('svg',{
            'width' : '100%',
            'height' : '100%'
        });

        var oG = createXMLTag('g',{
            'style' : 'cursor: pointer'
        });

        var oEllipse = createXMLTag('ellipse',{
            'rx' : '50',
            'ry' : '30',
            'cx' : '150',
            'cy' : '150',
            'fill' : 'transparent',
            'stroke' : '#0cf',
            'stroke-width' : '2'
        });

        var oText = createXMLTag('text',{
            'x' : '150',
            'y' : '158',
            'font-size' : '20',
            'fill' : '#0cf',
            'text-anchor' : 'middle'
        });

        oText.innerHTML = 'SVG';

        oG.appendChild(oEllipse);
        oG.appendChild(oText);
        oSvg.appendChild(oG);

        $('#div1').append($(oSvg));
    
        $(oG).mouseenter(function(){


            $(this).find('ellipse').stop(true).animate({'rx':100},{
                duration: 500,
                easing : 'backIn',
                queue: false,
                step: function(now,fx) { 
                    fx.start = 50; 
                    $(this).attr("rx", now);
                },
                complete : function(){
                    console.log('complete in');
                }
            });
            $(this).find('ellipse').animate({'ry': 60},{
                duration: 500,
                queue: false,
                easing : 'easeInStrong',
                step: function(now,fx) { 
                    fx.start = 30; 
                    $(this).attr("ry", now);
                }
            });

            $(oText).stop(true).animate({'font-size':'30px'});
        }).mouseleave(function(event) {

            $(this).find('ellipse').stop(true).animate({'rx':50},{
                duration: 500,
                queue: false,
                easing : 'backIn',
                step: function(now,fx) {
                    fx.start = 100; 
                    $(this).attr("rx", now);
                },
                complete : function(){
                    console.log('complete out');
                }
            });
            $(this).find('ellipse').animate({'ry': 30},{
                duration: 500,
                queue: false,
                easing : 'easeInStrong',
                step: function(now,fx) { 
                    fx.start = 60; 
                    $(this).attr("ry", now);
                }
            });

            $(oText).stop(true).animate({'font-size':'20px'});
        });
        
        function createXMLTag(tagName,objAttr){
            var svgNS = 'http://www.w3.org/2000/svg';

            var oTag = document.createElementNS(svgNS,tagName);

            for(var attr in objAttr){
                oTag.setAttribute(attr,objAttr[attr]);
            }

            return oTag;
        }
    };
</script>

部分补充说明:

  1. 创建svg中的元素节点,通过封装 createXMLTag 函数,传入要创建的xml标签节点名称和要设置的属性对象值,来实现创建SVG中的元素节点
  2. 由于目前还没发现 通过animate( properties, options )这个方法,同时改变多个特殊的属性值,故示例中要同时改变 rx 和 ry 需要分别写两个animate函数。ps : 注意通过使用 queue: false 来避免队列,使两个animate的同时进行。
  3. animate( properties, options )方法中的step,默认是从 0 开始,可以通过 第二个参数 fx 来设置一个初始值 : fx.start = [初始值]
  4. 如果存在子节点与父节点的一些影响可使用 mouseenter和mouseleave事件。
  5. complete回调可能会执行多次,通过.stop(true)阻止complete函数执行多次。
  6. jquery-tween为jquery添加多种运动形式,代码附在最后。另外发现一个比较不错的运动库Transit,可方便的制作各种酷炫的运动包括3D效果。
  7. oText的animate添加stop(),阻止掉一些队列带来的影响。

#####jquery-tween.js

$.extend(jQuery.easing , {

    easeIn: function(x,t, b, c, d){  //加速曲线
        return c*(t/=d)*t + b;
    },
    easeOut: function(x,t, b, c, d){  //减速曲线
        return -c *(t/=d)*(t-2) + b;
    },
    easeBoth: function(x,t, b, c, d){  //加速减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t + b;
        }
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInStrong: function(x,t, b, c, d){  //加加速曲线
        return c*(t/=d)*t*t*t + b;
    },
    easeOutStrong: function(x,t, b, c, d){  //减减速曲线
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeBothStrong: function(x,t, b, c, d){  //加加速减减速曲线
        if ((t/=d/2) < 1) {
            return c/2*t*t*t*t + b;
        }
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    elasticIn: function(x,t, b, c, d, a, p){  //正弦衰减曲线(弹动渐入)
        if (t === 0) { 
            return b; 
        }
        if ( (t /= d) == 1 ) {
            return b+c; 
        }
        if (!p) {
            p=d*0.3; 
        }
        if (!a || a < Math.abs(c)) {
            a = c; 
            var s = p/4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasticOut: function(x,t, b, c, d, a, p){    //正弦增强曲线(弹动渐出)
        if (t === 0) {
            return b;
        }
        if ( (t /= d) == 1 ) {
            return b+c;
        }
        if (!p) {
            p=d*0.3;
        }
        if (!a || a < Math.abs(c)) {
            a = c;
            var s = p / 4;
        } else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },    
    elasticBoth: function(x,t, b, c, d, a, p){
        if (t === 0) {
            return b;
        }
        if ( (t /= d/2) == 2 ) {
            return b+c;
        }
        if (!p) {
            p = d*(0.3*1.5);
        }
        if ( !a || a < Math.abs(c) ) {
            a = c; 
            var s = p/4;
        }
        else {
            var s = p/(2*Math.PI) * Math.asin (c/a);
        }
        if (t < 1) {
            return - 0.5*(a*Math.pow(2,10*(t-=1)) * 
                    Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        }
        return a*Math.pow(2,-10*(t-=1)) * 
                Math.sin( (t*d-s)*(2*Math.PI)/p )*0.5 + c + b;
    },
    backIn: function(x,t, b, c, d, s){     //回退加速(回退渐入)
        if (typeof s == 'undefined') {
           s = 1.70158;
        }
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backOut: function(x,t, b, c, d, s){
        if (typeof s == 'undefined') {
            s = 3.70158;  //回缩的距离
        }
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    }, 
    backBoth: function(x,t, b, c, d, s){
        if (typeof s == 'undefined') {
            s = 1.70158; 
        }
        if ((t /= d/2 ) < 1) {
            return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        }
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    bounceIn: function(x,t, b, c, d){    //弹球减振(弹球渐出)
        return c - this['bounceOut'](x,d-t, 0, c, d) + b;
    },       
    bounceOut: function(x,t, b, c, d){
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + 0.75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + 0.9375) + b;
        }
        return c*(7.5625*(t-=(2.625/2.75))*t + 0.984375) + b;
    },      
    bounceBoth: function(x,t, b, c, d){
        if (t < d/2) {
            return this['bounceIn'](x,t*2, 0, c, d) * 0.5 + b;
        }
        return this['bounceOut'](x,t*2-d, 0, c, d) * 0.5 + c*0.5 + b;
    }
    
});