完美运动框架

完美运动框架封装

function getStyle (ele,attr) {
            return parseFloat(window.getComputedStyle(ele)[attr])
        }
function startMove (ele,obj,fn) {
    //传入三个值,第一个是元素,第二个是对象,第三个是一个回调函数,
    //代表执行完所有操作之后执行的函数。最少传两个值   
    clearInterval(ele.timer)
    ele.timer=setInterval(function () {
        var bol=true
        for(var attr in obj){
            var st=getStyle(ele,attr)
            var _target=parseFloat(obj[attr])
            var speed=(_target-st)/10
            if(attr=="opacity"){
                st=st*100
                speed=(_target-st)/10
            }
            speed>0?speed=Math.ceil(speed):speed=Math.floor(speed)
                if(attr=="opacity"){
                    st+=speed
                    ele.style.filter="alpha(opacity="+st+")"
                    ele.style.opacity=st/100
                }else{
                    ele.style[attr]=st+speed+"px"
                }
            if(st!=_target){
                bol=false
            }
        }
        if(bol){
            clearInterval(ele.timer)
            if(fn){
                fn()
            }
        }
    },30)
}

完美运动框架调用

div.onclick=function () {
            startMove(div,{
                left:400,
            },aaa)
        }
        function aaa(){
            startMove(div,{
                top:400,
            },bbb)
        }
        function bbb(){
            startMove(div,{
                left:0,
            },ccc)
        }
        function ccc(){
            startMove(div,{
                top:0,
            })
        }
//点击盒子转一圈回到原点

封装完美运动框架遇到的问题?

1.timer问题
如果我们只保存一个timer变量,我们每次操作都只操作这一个timer,给多个元素添加运动函数,
非当前操作的元素的动画会停止,所有我们需要用到多个timer,我们可以把timer添加到元素上
类似于选项卡中给元素添加index值

2.缓冲运动速度问题
由于某些css属性不支持浮点数,所以我们需要对速度进行调整,如果速度值是正数,向上取整,
速度值是负数,向下取整

3.offsetWidth问题
offsetWidth获取元素的padding+border+width,而我们所需要的只是元素的width
所以我们需要获取非行内样式的width,用到getComputedStyle方法

4.多属性问题
之前封装的函数,只能传入一个属性,运动框架只能操作一个属性,我们把所有的属性放到一个对象里
对象中可传入多个属性.