JavaScript動畫效果是如何?的

基本顯示、隱藏：

function hide(el){　　el.style.display = "none";}function show(){　　el.style.display = "block";}

位置變化：同 setTimeout 或者 setInterval 動態改變元素的位置。

實現方法一：

/*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();};?

1的缺點是不夠連貫，我猜想的原因是每次修改位置時，都要調用setX,setY函數，而setX setY 函數內部有調用parseInt 函數，比較費時間。因此有了實現2，實現2也是其它的動畫演算法組建的實現方式。

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);