【前端开发】】ES6属性promise封装js动画

如下是我写的demo源码：

可以直接复制用浏览器打开看到效果哦；
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #box{
                width: 50px;
                height: 50px;
                background: red;
                position: absolute;
                left: 0;
                top: 0;
            }
        </style>
    </head>
    <body>
        <div id="box"></div>
       <script type="text/javascript">
           //利用es6 new Promise
            function movePromise(obj,attr,target,duration){
             return new Promise((res,rej)=>{
                 var b = parseInt(getComputedStyle(obj)[attr]);
                 var c= target - b;
                 var d = duration;
                 var temp = new Date().getTime();
                 var timer = setInterval(function(){
                     var t = new Date().getTime()-temp;
                     if(t>=d){
                         clearInterval(timer);
                         t= d;
                     }    
                 var v = c/d*t + b;
                 obj.style[attr] = v+'px';
                 if(t===d){
                     res()
                 }
             },20)
         })
         }
         //用Promise封装后可以无限加动画运动轨迹,代码简洁
         movePromise(box,"width",200,500)
         .then(()=>movePromise(box,"left",300,100))
         .then(()=>movePromise(box,"top",300,100))
         .then(()=>movePromise(box,"height",300,100))
         .then(()=>movePromise(box,"top",100,300))
         .then(()=>movePromise(box,"top",200,300))
         .then(()=>movePromise(box,"top",150,300))
       </script>
    </body>
</html>

如上源码动画轨迹：

向右移动---向下移动---变高---向上移动--向下移动---向上移动 （移动时间可自己控制）

 

posted @ 2019-10-22 17:58  JeckHui  阅读(366)  评论(0)  编辑  收藏  举报