es6-promise循环运动

promise没有想象的那么复杂，用它来处理动画简单易懂，结构清晰，比层层嵌套好多了,当然还需要继续多练习。又加深了一个tween.js的用法(具体可以去张鑫旭大神github去下载)。

• css

<style>
        #box{position: absolute;top:0px; left: 0px;
            background-color: #000080; width: 50px; height: 50px;}
    </style>

• js

function move(obj,attr,start,end) {
        //b:初始步数(这个要不断变化）
        //t:初始值
        //c:目标值
        //d:总步数

        return new Promise((res,rej)=>{
            var styles=getStyle(obj,attr),
            step=0;
        var k=setInterval(function () {
            var dis1=Tween.Linear(step,styles,end,20);
            if(step>=20){
                clearInterval(k);
                dis1=end;
                res();
            }else{
                step++;
            }
            obj.style[attr]=dis1+'px';
        },24);
        })
    };

    move(box,'left',0,400).then(()=>{move(box,'top',0,200)});


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