【前端开发】】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 @   JeckHui  阅读(369)  评论(0)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· C#/.NET/.NET Core优秀项目和框架2025年2月简报
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（1）
点击右上角即可分享
微信分享提示