js运动框架

Posted 2020-10-24 决起而飞

最近写个运动框架，确实好用，来附上，具体就不说了，注释比较详细

 

简洁版：包括链式运动，没有同时运动，不需要json格式

        //获取非行间样式
        function getStyle(obj,attr){
             if(obj.currentStyle){
                   return obj.currentStyle[attr]
             }
             else{
                   return getComputedStyle(obj,false)[attr]
             }
        }

        //startMove运动函数 fn为链式运动
        function startMove(obj,attr,target,fn){

                clearInterval(obj.timer)
                obj.timer=setInterval(function(){
                       var getCur=0
                       if(attr==‘opacity‘){        //兼容透明度
                          getCur=Math.round(parseFloat(getStyle(obj,attr))*100)
                       }
                       else{
                             getCur=parseInt(getStyle(obj,attr))
                       }
                       var speed=(target-getCur)/8 //缓动运动
                       speed=speed>0?Math.ceil(speed):Math.floor(speed)
                       if(getCur==target){
                               clearInterval(obj.timer)
                                if(fn){
                                     fn.call(obj)      //回调函数作用域指向obj
                                }
                       }else{
                               if(attr==‘opacity‘){
                                   obj.style.filter=‘alpha(opacity:‘+(getCur+speed)+‘)‘
                                   obj.style.opacity=(getCur+speed)/100
                               }else{
                                   obj.style[attr]=getCur+speed+‘px‘
                               }
                       }
                },30)
        }

 

完整版：包括链式运动、同时运动，涉及到同时运动则需要利用json辅助完成

        //获取非行间样式
        function getStyle(obj,attr){
             if(obj.currentStyle){
                  return obj.currentStyle[attr]
             }
             else{
                  return getComputedStyle(obj,false)[attr]
             }
        }

        //startMove运动函数 fn为链式运动  json for in 循环
        function startMove(obj,json,fn){
                clearInterval(obj.timer)
                obj.timer=setInterval(function(){
                    var flag=true                  //设置一个标签
                    for(var attr in json){
                       var getCur=0
                       if(attr==‘opacity‘){        //兼容透明度
                          getCur=Math.round(parseFloat(getStyle(obj,attr))*100)
                       }
                       else{
                             getCur=parseInt(getStyle(obj,attr))
                       }
                       var speed=(json[attr]-getCur)/8 //缓动运动
                        speed=speed>0?Math.ceil(speed):Math.floor(speed)

                       if(getCur!=json[attr]){     //判断标签  要的是最后的值
                               flag=false
                       }
                            if(attr==‘opacity‘){
                                 obj.style.filter=‘alpha(opacity:‘+(getCur+speed)+‘)‘
                                 obj.style.opacity=(getCur+speed)/100
                            }else{
                                 obj.style[attr]=getCur+speed+‘px‘
                            }
                  }
                 if(flag){                       //判断标签   设置在for in外面意思是for in到全部的attr才执行接下操作        
                           clearInterval(obj.timer)
                          if(fn){
                               fn.call(obj)      //回调函数作用域指向obj
                          }
                       }
                },30)
        }

需要注意的几点

获取非行间样式，注意浏览器的兼容问题

常用的Math方法、parseInt等的转换

回调函数，作用域的问题

json格式