完美運動框架封裝

function getStyle (ele,attr) {
            return parseFloat(window.getComputedStyle(ele)[attr])
        }
function startMove (ele,obj,fn) {
    //傳入三個值,第一個是元素,第二個是對象,第三個是一個回調(diào)函數(shù),
    //代表執(zhí)行完所有操作之后執(zhí)行的函數(shù)描融。最少傳兩個值   
    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)
}

完美運動框架調(diào)用

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,
            })
        }
//點擊盒子轉(zhuǎn)一圈回到原點

封裝完美運動框架遇到的問題?

1.timer問題
如果我們只保存一個timer變量,我們每次操作都只操作這一個timer,給多個元素添加運動函數(shù),
非當(dāng)前操作的元素的動畫會停止,所有我們需要用到多個timer,我們可以把timer添加到元素上
類似于選項卡中給元素添加index值

2.緩沖運動速度問題
由于某些css屬性不支持浮點數(shù),所以我們需要對速度進(jìn)行調(diào)整,如果速度值是正數(shù),向上取整,
速度值是負(fù)數(shù),向下取整

3.offsetWidth問題
offsetWidth獲取元素的padding+border+width,而我們所需要的只是元素的width
所以我們需要獲取非行內(nèi)樣式的width,用到getComputedStyle方法

4.多屬性問題
之前封裝的函數(shù),只能傳入一個屬性,運動框架只能操作一個屬性,我們把所有的屬性放到一個對象里
對象中可傳入多個屬性.