動畫核心核心與調用接口(代碼編寫)

首先應用接口來便于接近我們尋找的方式：

  transform(obj，{left:100，opacity:0.5，fontSize:90，period:0.3})

   用transform接口來識别出不同屬性并自動進行控制。

其次進行應用3點看法說明：

<a href="http://huangyouliang10.blog.51cto.com/attachment/201108/1/1562091_1312218939G8ld.png"></a>

<a href="http://huangyouliang10.blog.51cto.com/attachment/201108/1/1562091_1312218940yIC1.png"></a>

<a href="http://huangyouliang10.blog.51cto.com/attachment/201108/1/1562091_1312218941F7lL.png"></a>

最後動畫核心應用屬性代碼的編寫步驟與調用接口的運作效果。

  （一）解析參數中所包含的應用屬性以及屬性的值：

  function transform(obj, params)   {

              var FPS = 24;

              var SPF = 1000/FPS;

              //總時間

              var period = params.period || 1;

              //總幀數

              var frames = parseInt(period * FPS);

              //目标屬性集合

              var desObj = {};

              //目前屬性集合

              var srcObj = {};

              //所有屬性每幀步長

              var paramStepObj = {};

              //定義目前值和和目标值

              var desValue, srcValue;

              //運作是樣式

              var ocurStyle = window.getComputedStyle ?

                window.getComputedStyle(Obj. null) : Obj.currentstyle;

        （二） 計算所有屬性的每幀步長

       //周遊params 對象中的屬性

        for(var i in params) {

            //擷取在運作時樣式中的目前屬性值

            srcValue = ocurStyle[i];

            //擷取目标屬性值

            desValue = params[i];

            //如果運作時樣式中有該屬性，可能又不合法的屬性名

            if(srcValue) {

                //如果屬性值為auto,則改為0

                srcValue = srcValue.replace(/auto/i, '0');

                //如果目前屬性值不是數字或者為空，那麼無法進行動畫處理

                if(!/[0-9]+/i.test(stcValue) || (srcValue.indexOf(' ') != -1))

                    continue;

                //把屬性i的值分别儲存

                desObj[i] = parseFloat(desValue || 0);

                srcObj[i] = parseFloat(srcValue || 0);

                //擷取每個屬性的每幀改變量

                paramStepObj[i] = (desObj[i] - srcObj[i]/frames;

         （三） 動畫的核心控制設計

           //計算不同屬性的每幀改變量

            var opacity;

            var nValue;

            var timer = setInterval(function() {

                if(frames &amp;lt;= 0)  {

                     clearInterval(timer);

                }

                frame—;

                //動畫處理核心

                for(var i in paramStepObj) {

                    if(/opacity/i.test(i)) {

                    //如果沒有元素透明樣式時，那麼必須是初始化的一個

                    if((Obj.style[i] != 0) &amp;&amp; (!Obj.style[i])) {

                        Obj.style.cssText += ';opacity:1;filter:Alpha(Opacity=100)';

                    }

                    Obj.style.cssText +=';opacity:'+ (parseFloat(ocurStyle['opacity'])

                       +paramStepObj[i]) +';filter:Alpha(Opacity='

                        +(paramseFloat(OcurStyle['opacity'])*100

                        + paramStepObj[i]*100) +')';

                } eles {

                    try {

                        obj.style[i] = obj.style[i] ?

                            parseFloat(obj.style[i])+paramStepObj[i]

                             : srcObj[i]+paramStepObj[i];

                    } catch(el) {

                        obj.style[i] = 'opx';

           }

       }, SPF);   

      從以上的應用程式的方法來進行分析，我們便得出了這樣的結果，用在程式的屬性名i的比較值為opacity， 來融入特定透明中去控制有順序的邏輯，當在處理一個有個元素的透明屬性之前，這個元素就必須已經被設定 過透明屬性 否則在樣式中就無法取到opacity屬性的值，也就是說無法完成透明漸的效果。下面利用調用接口來 進行像素書寫。

  （四） 調用接口進行運作效果表現:

  //調用接口

  var block = document.getElementById("block");

  transform(block, {left:300,top:500,opacity:0,period:1});

      得出運作效果是非常好的，尤其是在FF下，它的運作誤差可将減少到隻有幾個像素。對于transform接口，基本上是已經可 以滿足在調用接口時的大部分需求，但還需要一些進步性的完善，如：增加有效性驗證、增加顔色的處理、增加相對參數值以及方 法原型化等等作法。

本文轉自huangyouliang10 51CTO部落格，原文連結:http://blog.51cto.com/1572091hyl10/628899