JavaScript动画实现
1.基本显示、隐藏
function hide(el){
el.style.display = "none";
}
function show(){
el.style.display = "block";
}
2.位置变化：同setTimeout 或者 setInterval 动态改变元素的位置
实现1：
/*
opt = {X:500,Y:400,duration:2000}
*/
function aini(el,opt){
var duration = opt.duration||1000;
var totalSteps =Math.floor(duration/16);
var w=fullWidth(el),h=fullHeight(el);
var X = pageX(el),Y=pageY(el);//通过辅助函数获取在屏幕中的坐标
var stepX = Math.floor((opt.X -X)/totalSteps);
var stepY = Math.floor((opt.Y -Y)/totalSteps);
el.style.position="absolute";//运动的元素绝对定位
el.style.left=X+"px";
el.style.top=Y+"px";
// 动画的核心，就是动态的改变元素的位置
function _aini(){
var px = posX(el),py=posY(el);
if(px < opt.X && py < opt.Y){
setX(el,px+stepX),setY(el,py+stepY);
setTimeout(arguments.callee,16);
}
}
_aini();
};
实现2：
1的缺点是不够连贯，我猜想的原因是每次修改位置时，都要调用setX,setY函数，而setX setY 函数内部有调用parseInt 函数，比较费时间。因此有了实现2，实现2也是其它的动画算法组建的实现方式。参见 graceCode motion
function aini(el,opt){
el.style.position="absolute";
var duration = opt.duration||1000;
var t = 0,d=Math.floor(duration/16);
var X = pageX(el),Y=pageY(el);
var dx = opt.X-X,dy = opt.Y-Y;
function _aini(){
if(t<d){
el.style.left=tween.Linear(t,X,dx,d)+"px";//先只在X方向运动
//el.style.top=tween.Linear(t,0,dy,d)+X+"px";
//el.style.top=PY+"px";
t++;
setTimeout(arguments.callee,16);
}else{
el.style.left=opt.X+"px";
//el.style.top=opt.Y+"px";
}
};
_aini();
}
把运动路径放在一个独立函数中进行运算 tween.Linear
var tween = {
/*
t=0~d , b=初始值 ,c = 位移长度 ， d = 末位置-初位置
*/
Linear: function(t,b,c,d){ return c*t/d + b; },
};
这样独立出来的的好处是可以添加其它动画效果，上面的运动是匀速线性运动，下面来一个缓动的
var tween = {
/*
t=0~d , b=初始值 ,c = 位移长度 = 末位置-初位置， d =间隔时间
变化的强度（一次变化的长度）由 c/d 确定 ，d 小 那么变化的快 ，d 大变化的慢。而 16*d = duration
*/
Linear: function(t,b,c,d){ return c*t/d + b; },
Quad: {
easeIn: function(t,b,c,d){
return c*(t/=d)*t + b;
},
easeOut: function(t,b,c,d){
return -c *(t/=d)*(t-2) + b;
},
easeInOut: function(t,b,c,d){
if ((t/=d/2) < 1) return c/2*t*t + b;
return -c/2 * ((--t)*(t-2) - 1) + b;
}
},
};
按照上面添加动画效果的方式，可以添加很多动画效果了，完整的请看graceCode motion 动画库
Motion库动画只能实现位置的变化，有更强的jQuery 实现动画是基于属性的，像下面这样，太强了
jquery 的方式——支持属性动画
$('div').animate({
width:"60%",
height:"20%",
fontSize:"3em",
border:'2px solid black'
});
Raphael 的方式——支持少量的属性动画
var paper = Raphael(10,50,320,200);
var rect = paper.rect(10,10,50,50).attr({fill:"red"});
rect.animate({fill:"blue",x:100,y:100},2000);
