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