原创作品，允许转载，转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。 http://1572091hyl10.blog.51cto.com/1562091/551341

  

 

首先应用接口来便于接近我们寻找的方式：


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


    用transform接口来识别出不同属性并自动进行控制。

  

其次进行应用3点看法说明：

 

p_w_picpath 

p_w_picpath

p_w_picpath

p_w_picpath

p_w_picpath  

最后动画核心应用属性代码的编写步骤与调用接口的运行效果。

 

  （一）解析参数中所包含的应用属性以及属性的值：

 

  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 <= 0)  {

 

                     clearInterval(timer);

 

                }

 

                frame—;

 

                //动画处理核心

 

                for(var i in paramStepObj) {

 

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

 

                    //如果没有元素透明样式时，那么必须是初始化的一个

 

                    if((Obj.style[i] != 0) && (!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接口，基本上是已经可 以满足在调用接口时的大部分需求，但还需要一些进步性的完善，如：增加有效性验证、增加颜色的处理、增加相对参数值以及方 法原型化等等作法。