forked from halo-battle/game
Version 1.12
This commit is contained in:
parent
2a066a7498
commit
de31cd3e9a
1373 changed files with 156282 additions and 45238 deletions
225
htdocs/n3p7bLn59Yco3d/js/animations.js
Normal file
225
htdocs/n3p7bLn59Yco3d/js/animations.js
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
function create(type,parent,id,classe)
|
||||
{
|
||||
var element = document.createElement(type);
|
||||
if(id && !$(id)) element.setAttribute('id',id);
|
||||
if(classe) Element.addClassName(element,classe);
|
||||
if(parent) element = $(parent).appendChild(element);
|
||||
return element;
|
||||
}
|
||||
|
||||
var Effect =
|
||||
{
|
||||
queue : [],
|
||||
|
||||
hide : function(element)
|
||||
{
|
||||
element.style.display = 'none';
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
show : function(element)
|
||||
{
|
||||
element.style.display = '';
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
opacity : function(element,opacity)
|
||||
{
|
||||
element.style.opacity = opacity / 100;
|
||||
element.style.MozOpacity = opacity / 100;
|
||||
element.style.KhtmlOpacity = opacity / 100;
|
||||
element.style.filter = "alpha(opacity="+ opacity +")";
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
style : function(element,style)
|
||||
{
|
||||
for(var property in style)
|
||||
{
|
||||
if(property == 'opacity') Effect.opacity(element,style[property]);
|
||||
else element.style[property] = style[property];
|
||||
}
|
||||
|
||||
return element;
|
||||
},
|
||||
|
||||
animate : function(element,style,speed) //usage : Effect.animate(element,{backgroundColor: [[0,0,0],[0,255,255]], fontSize: [12,14,'px']},500)
|
||||
{
|
||||
for(var i = 0; i < Effect.queue.length; i++) if(Effect.queue[i] == element) return false;
|
||||
Effect.queue.push(element);
|
||||
|
||||
var anim = {};
|
||||
var noanim = {};
|
||||
|
||||
var dif = 0;
|
||||
|
||||
for(var property in style)
|
||||
{
|
||||
if(typeof style[property] == 'string')
|
||||
noanim[property] = style[property];
|
||||
|
||||
else if(typeof style[property] == 'number')
|
||||
anim[property] = [!element.style.property ? 0 : element.style.property , style[property]];
|
||||
|
||||
else if(typeof style[property] == 'object')
|
||||
{
|
||||
if(style[property].length == 1)
|
||||
noanim[property] = style[property][0];
|
||||
|
||||
else if(style[property].length == 2 || style[property].length == 3)
|
||||
{
|
||||
if(typeof style[property][0] == 'number' && typeof style[property][1] == 'number')
|
||||
{
|
||||
anim[property] = style[property];
|
||||
}
|
||||
|
||||
else if(typeof style[property][0] == 'number' && typeof style[property][1] == 'string')
|
||||
{
|
||||
anim[property] = [!element.style[property] ? 0 : element.style[property].substr(0,element.style[property].length - style[property][1].length) , style[property][0], style[property][1]];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Effect.style(element,noanim);
|
||||
|
||||
for(var property in anim) dif = dif < Math.abs(anim[property][0] - anim[property][1]) ? Math.abs(anim[property][0] - anim[property][1]) : dif;
|
||||
|
||||
for(var i=1; i <= dif ;i++)
|
||||
{
|
||||
|
||||
for(var property in anim)
|
||||
{
|
||||
var from = Number(anim[property][0]);
|
||||
var to = Number(anim[property][1]);
|
||||
var ext = typeof anim[property][2] != 'undefined' ? anim[property][2] : 0;
|
||||
|
||||
var count = Math.floor(from + i*(to - from) / dif);
|
||||
|
||||
var funct = function()
|
||||
{
|
||||
var style = {};
|
||||
style[this.property] = this.count+this.ext;
|
||||
Effect.style(element,style);
|
||||
};
|
||||
|
||||
setTimeout(funct.bind({property: property,count: count,ext: ext}),Math.floor(i/dif*speed));
|
||||
}
|
||||
}
|
||||
setTimeout(function(){for(var i = 0; i < Effect.queue.length; i++) if(Effect.queue[i] == element) Effect.queue[i] = null},speed+10);
|
||||
return element;
|
||||
},
|
||||
|
||||
fadeIn: function(element,speed)
|
||||
{
|
||||
Effect.animate(element,{visibility: 'visible',opacity: [0,100]},speed);
|
||||
},
|
||||
|
||||
fadeOut: function(element,speed)
|
||||
{
|
||||
Effect.animate(element,{opacity: [100,0]},speed);
|
||||
setTimeout(function(){Effect.style(element,{visibility: 'hidden'})},speed);
|
||||
},
|
||||
|
||||
move : function(element,relative,from,to,speed)
|
||||
{
|
||||
switch(relative)
|
||||
{
|
||||
case 'top':
|
||||
case 'left':
|
||||
case 'bottom':
|
||||
case 'right':
|
||||
var anim = {};
|
||||
anim[relative] = [from,to,'px'];
|
||||
Effect.animate(element,anim,speed);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/*Element.prototype.effect.hide = function()
|
||||
{
|
||||
return Effect.hide(this);
|
||||
};
|
||||
|
||||
Element.prototype.effect.show = function()
|
||||
{
|
||||
return Effect.show(this);
|
||||
};*/
|
||||
|
||||
Object.extend(Element.prototype,{
|
||||
opacity : function(opacity)
|
||||
{
|
||||
return Effect.opacity(this,opacity);
|
||||
},
|
||||
|
||||
setStyle : function(style)
|
||||
{
|
||||
return Effect.style(this,style);
|
||||
},
|
||||
|
||||
animate : function(style,speed)
|
||||
{
|
||||
return Effect.animate(this,style,speed);
|
||||
},
|
||||
|
||||
fadeIn : function(speed)
|
||||
{
|
||||
return Effect.fadeIn(this,speed);
|
||||
},
|
||||
|
||||
fadeOut : function(speed)
|
||||
{
|
||||
return Effect.fadeOut(this,speed);
|
||||
},
|
||||
|
||||
move : function(relative,from,to,speed)
|
||||
{
|
||||
return Effect.move(this,relative,from,to,speed);
|
||||
}
|
||||
});
|
||||
|
||||
Element.addMethods();
|
||||
|
||||
/*Element.prototype.opacity = function(opacity)
|
||||
{
|
||||
return Effect.opacity(this,opacity);
|
||||
};
|
||||
|
||||
Element.prototype.setStyle = function(style)
|
||||
{
|
||||
return Effect.style(this,style);
|
||||
};
|
||||
|
||||
Element.prototype.animate = function(style,speed)
|
||||
{
|
||||
return Effect.animate(this,style,speed);
|
||||
};
|
||||
|
||||
Element.prototype.fadeIn = function(speed)
|
||||
{
|
||||
return Effect.fadeIn(this,speed);
|
||||
};
|
||||
|
||||
Element.prototype.fadeOut = function(speed)
|
||||
{
|
||||
return Effect.fadeOut(this,speed);
|
||||
};
|
||||
|
||||
Element.prototype.move = function(relative,from,to,speed)
|
||||
{
|
||||
return Effect.move(this,relative,from,to,speed);
|
||||
};*/
|
||||
|
||||
/*create('div',document.body,'test2');
|
||||
myfunct = function(){ $('test2').innerHTML += this.i };
|
||||
for(var i = 1; i < 20; i++)
|
||||
{
|
||||
setTimeout(myfunct.bind({i:i}),1000*i);
|
||||
}*/
|
||||
|
||||
/*var masque = [/#([0-9A-F]{6}|[0-9A-F]{3})/i,
|
||||
/rgb\((\d{1,3})%?,(\d{1,3})%?,(\d{1,3})%?\)/i,
|
||||
/\d+(px|pc|pt|ex|em|mm|cm|in|%)/i];*/
|
||||
Loading…
Add table
Add a link
Reference in a new issue