昨天写了不少。今天整理了下。
可以做散发。直线运动。也可以自己增强做曲线。前提设置好要走的弧度自己计算好。
搭配使用会有不错效果 。
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
------------ 爱生活 爱代码。