原生js写的动画函数在数值计算上遇到的问题

大神看下代码：我是学习慕课网上js动画效果时自己尝试制作的。
然后发现几个问题：
非匀速动画
无法控制动画持续时间
动画会在未达到终止条件时产生其他动作(尤其是在动态改变透明度的时候....js在计算小数点的时候那狗一样的长度，小数位居然能够达到8，9位之多，我也是醉了)

若是能修改麻烦替我修改下·····蟹蟹
若是有大神能写个简洁的原生js可多属性联动的动画函数提供参考那就更好了（必须要能够控制动画运行时间，且必须严格按照给定的终止条件终止的那种....）

<!doctype html>
    <html lang="en">
     <head>
   <meta http-equiv='content-type' content='text/html;charset=utf-8' />
      <script>
    /*--获取id--*/
    function $id(id){
      return document.getElementById(id);
    }
    /*----获取元素样式属性值--*/
    function $gs(ele,attr){
       if (ele.currentStyle)
         {
           return ele.currentStyle[attr];
         }else if (ele.style[attr]!==''){
              return ele.style[attr];
         }else{
          if (window.getComputedStyle(ele,null)[attr]!=='auto')
           {
             return window.getComputedStyle(ele,null)[attr];
           }else{
             return 0;
           }
         }
    } 
    
        // 多属性动画
        function animate(ele,time,json,fn){
           window.clearInterval(ele.timer);
           var fps=60/1000;
           ele.timer=window.setInterval(function(){
              for (var a in json)
               {
                 var curVal=(a.search('opacity')!==-1) ? parseFloat($gs(ele,a)) :parseInt($gs(ele,a)); // $gs 是自定义的获取元素某样式值德函数
                 var unit=(a.search('opacity')!==-1) ? '' : 'px';
                 var speed=(json[a]-curVal)/(fps*time);
                 if (speed>=0){
                   
                   if (curVal>=json[a]){
                     window.clearInterval(ele.timer);
                     ele.style[a]=json[a]+unit;
                     if (fn){
                       fn();
                     }
                   }else{
                     ele.style[a]=curVal+speed+unit;
                   }
                 }else{
                   if (curVal<=json[a]+0.05){
                     window.clearInterval(ele.timer);
                     ele.style[a]=json[a]+unit;
                     if (fn){
                       fn();
                     }
                   }else{
                     ele.style[a]=curVal+speed+unit;
                   }
                 }
               }
           },1/fps);
        }
    
     </script>
     </head>
     <body>
       <style>
         #animate{width:200px;height:200px;background-color:blue;}
       </style>
       <div id='animate'></div>
       
       <button id='pos'>开始多属性联动动画</button>
       <script>
         $id('pos').onclick=function(){  // $id(id) 是自定义的快捷获取元素的函数
           animate($id('animate'),1000,{width:500,opacity:0},function(){
             animate($id('animate'),1000,{width:200,opacity:1});
           });
         }
       </script>
     </body>
    </html>