js运动雏形及其相关问题和运动框架

最新推荐文章于 2024-05-28 11:44:38 发布
最新推荐文章于 2024-05-28 11:44:38 发布
阅读量246 收藏
点赞数
分类专栏： 前端入门 文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_55355282/article/details/127780359
版权

js运动雏形 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: #f00;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
    <script>

        window.onload=function(){
            var begin=document.getElementById("begin");
//上面获取begin应该和下面的方式一样，修改后可以显示，使用queryselectall不行
            var stop=document.getElementById("stop");
            var box=document.getElementById("box");
            var timer;
       
        //给开始按钮添加点击时间
            begin.onclick=function(){
                // 样式的结果带单位所以使用parseInt
                var l= parseInt(getComputedStyle(box).left);
                var t=parseInt(getComputedStyle(box).top);
                var w=parseInt(getComputedStyle(box).width);
                var h=parseInt(getComputedStyle(box).height);
                
                // 30ms是电影换帧的参数，看电影最流畅。浏览器刷新频率或者电脑硬件都会影响反应时间。这里设置为16
                timer=setInterval(function(){
                    l++;
                    t++;
                    w++;
                    h++;
                    box.style.left=l+'px';
                    box.style.top=t+'px';
                    box.style.width=w+'px';
                    box.style.height=h+'px';
                },16);
                // console.log(1);
                stop.onclick=function(){
                    clearInterval(timer);
                };
            }
        };
    </script>
</head>
<body>
    <input type="button"   id="begin" value="开始">
    <input type="button"   id="stop" value="停止">
    <div id="box"></div>
    
</body>
</html>

// 1.点击的时候需要getComputedStyle去获取到元素的属性值
// 2.点击开始按钮后开启一个重复执行定时器
// 3.在定时器里不断的修改元素的属性

QueryselectAll是静态获取，就是选出的元素不会随着文档的改变而变化

getElementById是动态获取，选的元素可以根据文档变化而变化

机械敲代码引发的低级 问题

 运动的问题

运动的原理

在定时器里不断地去修改元素的属性，修改完成之后再把结果重新赋给元素

问题

1.如果每次的步长和目标值不成倍数，就到不了目标值

解决：把条件判断改成大于等于就可以

2.如果用户连续点击开始按钮，速度会越来越快

原因：用户不断点击开始按钮，会重复开启多个定时器造成速度累加

解决：再点击的时候先把上一个定时器清除。

    <style>
        #box{
            width: 100px;
            height: 100px;
            background: #f00;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
    <script>
        window.onload=function(){
            var begin=document.getElementById("begin");
            var box=document.getElementById("box");
            var t;

            begin.onclick=function(){
                clearInterval(t);  //2.清除一个不存在的定时器是不会有问题的，第二次点击就会清除第一次的定时器
                // 开启定时器给t赋值
                t=setInterval(function(){
                    var l=parseInt(getComputedStyle(box).left);
                    
                    // l++,改成下面的代码会让方块运动加快，一次运动7px
                    l+=7;
                    // box走到300停下来
                    console.log(l);
                    if(l>=300){     //问题1
                        clearInterval(t);
                        // l=300;
                    }
                    box.style.left=l+"px";
                },16);
            };
        }
    </script>

3.如果有多个元素需要同时运动，那么前面的运动会没有效果

原因：因为每次运动开始都会清除上一个定时器，后面运动的时候清楚了前面的定时器，所以后面东前面不动了。

解决：使用自定义属性，只清除自己的定时器，不清楚别的定时器

    <style>
        #box1,#box2{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
        #box2{
            top: 200px;
        }
    </style>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var box1=document.getElementById("box1");
            var box2=document.getElementById("box2");
            var t;//所有元素共用一个定时器

            function move(obj,attr,target){
                // 清除定时器累加
                // clearInterval(t);
                clearInterval(obj.t);//一上来只清除自己的定时器不会清除别人的定时器
                obj.t=setInterval(function(){
                    var value=parseInt(getComputedStyle(obj)[attr]);//获取到属性的值

                    value+=7;//让属性值不断+7
                    //如果属性值已经超过目标了，要定时清理定时器，同时为了避免越界，要把它拉回
                    if(value>=target){
                        clearInterval(t);
                        value=target;
                    }
                    //修改元素的属性值
                    obj.style[attr]=value+'px';
                },16);
            }
            btn.onclick=function(){
                move(box1,'left',300);
                move(box2,'left',250);
            }
        }

    </script>

<body>
    <input type="button" id="btn" value="开始">
    <div id="box1"></div>
    <div id="box2"></div>
</body>

tip：两个物体运动不需要把代码写两份，封装函数即可

运动框架move.js

通过vscode终端命令引入move.js

 运动的原理

限定时间的运动，根据时间去控制速度，已知时间和距离，计算速度

匀速运动

特点：在任何一个点的速度都是一样的

某个点的位置=速度x时间

速度=总距离/总时间

时间=现在的时间-开始的时间

某个点的位置=总的距离/总的时间*（现在的时间-开始的时间）

t已过的时间

b开始的时间

c总距离

d总时间

b是元素开始的位置，起点不一定在0，0，参数里的目标值是要运动到的那个点，而不是要走的距离。所以元素如果不在0，0开始运动的话，需要把起始点的距离加上。

var value=c/d*t+b
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");

            btn.onclick=function(){
                var c=300;
                var d=2000;
                var b=parseInt(getComputedStyle(box).left);


                //一开始运动的时候要记录开始的时间
                var startTime=new Date().getTime();

                //开启定时器
                var timer=setInterval(function(){
                    var t=new Date().getTime-startTime;

                    var value=c/d*t+b;

                    box.style.left=value+'px';
                },16);
            }
        };
    </script>
</head>
<body>
<input type="button" id="btn" value="开始">
<div id="box"></div>
</body>
</html>


运动框架的编写

下面的代码引用了Tween.js运动框架的js脚本，复制运行请自行添加。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
            left: 0;
            top: 50px;
        }
    </style>
    <script>
        /*
        obj运动的对象
        attr 要运动的对象
        target 要运动到的目标
        duration要运动的时间
        fx运动的形式
        callBack运动完成之后调用的函数
        */
       function move( obj,attr,target,duration,fx,callBack){
        var d=duration;  
        //起始位置
        var b=parseFloat(getComputedStyle(obj)[attr]) //attr是变量不是真正的属性所以使用中括号
        var c=target-b;
        var startTime=new Date().getTime();

        clearInterval(obj.timer);
        obj.timer=setInterval(function(){
            var t=new Date.getTime()-startTime;
            // 运动停止
            if(t>=d){
                t=d;
                clearInterval(obj.timer);
            }
            //var value=c/d*t+b;
            var value=Tween[fx](t,b,c,d);
            obj.style[attr]=value+'px';
            // 1
            if(t==d){
                if(callBack){
                    // 存在就调用
                callBack();
                }
            }
            // 2
            if(t==d){
                // 左真返回右，左假返回左，就什么都不做
               callBack && callBack();
            }

        },16);


       }
       window.onload=function(){
            var btn=document.getElementById("btn");
            var box=document.getElementById("box");

            btn.onclick=function(){
                move(box,'left',400,1000,'linear',function(){
                    alert('运动完成了')
                });
            }
        }

    </script>
</head>
<body>
    <input type="button" id="btn" value="开始">
<div id="box"></div>
</body>
</html>

也可以在运动完成了的方法内调用move

            btn.onclick=function(){
                // move(box,'left',400,1000,'linear',function(){
                //     alert('运动完成了')
                // });
                
                // 注意move函数的调用语法
                move(box,'left',400,1000,'bounceIn');
            }

move（obj,{left:10,top:20,opacity:0.8},duration,fx,callback)

只有callback不是必须的额

第二个参数里面用的键值对的形式，值没有单位，opacity的值是0-1

隐藏用户y
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ssh框架雏形
01-12
适合初学者学习ssh框架使用 适合在此程序基础上编写自己的程序 内含ssh框架用到的所有jar包
简易的ssm框架程序雏形
01-12
适合初学者使用的ssm框架 适合在此框架基础上编写自己的代码 适合于新手学习 内含完整的ssm框架用到的ja包
getComputedStyle获取元素样式踩坑
会点php的前端小渣渣
03-22 704
正确用法： //点击时获取直线距离 getCoordinate(el) { Promise.resolve().then(() => { const firstChild = this.getControlPanelRoot().firstChild; let x, y, r, b; let WrapWidth = parseInt(getComputedStyle(firstChild).width); let WrapH...
用javascript getComputedStyle获取和设置style的原理
wdzhangxiang的专栏
10-30 231
DOM标准引入了覆盖样式表的概念，当我们用document.getElementById("id").style.backgroundColor 获取样式时 获取的只是id中style属性中设置的背景色，如果id中的style属性中没有设置background-color那么就会返回空，也就是说如果 id用class属性引用了一个外部样式表，在这个外部样式表中设置的背景色，那么不好意思 doc...
JS：getComputedStyle方法
大空翼 つばさ
10-17 8201
由于诸如ele.style.display这样的操作只能获取DOM元素的行内样式，所以获取结果可能与实际显示效果不符 通过getComputedStyle方法可以用来获取DOM元素实际显示时的样式，具体： let style = window.getComputedStyle(element, [pseudoElt]); getComputedStyle是window全局对象的一个方法，可...
获取全部样式-`getComputedStyle`/JS缓动动画/缓动动画函数封装/淡入淡出效果
不懂帕斯的博客
04-26 157
01-获取全部样式-getComputedStyle <style> .box { position: absolute; left: 0; width: 100px; height: 100px; background-color: red; } </style> </head> <body&g
css3运动框架,模拟现实物体运动的js动画库框架-Anima
weixin_32535389的博客
08-04 370
Anima是一款可以同时控制许多对象进行动画的js插件。并且每一个对象都有它们各自的质量和密度以模拟现实生活中的物体。CSS动画有一些限制，最主要的是你不可以真正完全的控制它们。如果不使用一些技巧的话，你几乎不可能停止动画的过渡。另一个问题是keyframes的百分比计算。人们都是在头脑中想象每一帧动画的时间点，但是你是否想过使用百分比的方法，例如0% start 50% fly 70% stop...
【网站项目】大学运动场地管理系统
卓怡学长的博客
03-01 979
首先,论文一开始便是清楚的论述了系统的研究内容。其次,剖析系统需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确系统的需求。然后在明白了系统的需求基础上需要进一步地设计系统,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式,总体功能模块运用自顶向下的分层思想。再然后就是实现系统并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过大学运动场地管理系统将会使大学运动场地各个方面的工作效率带来实质性的提升。
javascript能实现什么功能,如何开启javascript功能
神器榜
09-10 682
我是一名地地道道的农民工，生活在经济落后的农村，有一个哥哥和一个弟弟，父母都是地道的农民，日出而作，日落而息，我从小到大学习一直很好，从小学到高一都，成绩在全级一直名列前茅，这样我也顺利了考上省的重点高中，然而，每个学期开学是家里最为难的时候，每次交学费都让父母发愁许久，家里为了给我筹钱读书，都借了不少钱，才让我读上高中。我想我比较幸运，经理看中我的努力，就决定吕勇我，开的工资是3500一个月，虽然我知道在北京3500只能过温饱的生化，但是我想我足够了，比起以前的工资好了些，以后可以多寄些钱回家。
《JavaScript设计模式》读后感
hsany330的专栏
04-12 983
接触前端两三个月的时候，那时候只是听说设计模式很重要，然后我就去读了一本设计模式的书，读了一部分，也不知道这些设计模式到底设计出来干嘛的，然后就没再看了。后来就自己做一些小项目也觉着好像不需要用到设计模式这个东西呀。现在，接触前端有半年了，决定再重新看看设计模式，说不定会有一些启发。于是发现了一本好书——《JavaScript设计模式》，写的通俗易懂，用一个个故事串起了一整本书，看了一部分发现原来...
JS设计模式
进击的葱
02-15 223
转载——https://www.jianshu.com/p/e3537a39ec31?utm_campaign=maleskine&amp;utm_content=note&amp;utm_medium=seo_notes&amp;utm_source=recommendation 接触前端两三个月的时候，那时候只是听说设计模式很重要，然后我就去读了一本设计模式的书，读了一部分，也不知道这些设计...
spring mvc+Mybatis 框架雏形
04-06
一个已经搭建好的spring mvc 框架 测试功能已弄好 ，在mysql中建个表就OK了，
mybatis雏形之自定义持久层框架
11-05
接触过JDBC的同学应该不陌生，那么既然JDBC已经能够完成数据库的操作，为什么还...有新框架出现说明JDBC本身还是存在一些问题, 针对jdbc存在的问题 ，通过学习自定义持久层框架能帮助我们更好的理解和学习mybatis的原理
一个只有99行代码的JS流程框架
02-25
最近一直在想一个问题，如何能让js代码写起来更语义化和更具有可读性。上周末的时候突发奇想，当代码在运行的时候，其实跟我们做事情是类似的，都是做完一步接着下一步，并且这些事情有些是可规划的，有些是需要做完...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
最新发布
JIngJaneIL的博客
05-28 645
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
【详细介绍WebKit的结构】
cz88888888666的博客
05-23 578
WebKit是一个开源的浏览器引擎，主要用于渲染网页内容，它最初由苹果公司为其Safari浏览器开发，目前被多种浏览器和应用程序使用，包括所有基于iOS和macOS的浏览器，WebKit的设计目标是提供快速、精准且流畅的网页浏览体验。
vue 使用 export default
global_coding的博客
05-24 346
vue 使用 export default
超详细的前后端实战项目（Spring系列加上vue3）前端篇（二）（一步步实现+源码）
2301_79969279的博客
05-24 1119
好了，兄弟们，继昨天的项目之后，开始继续敲前端代码，完成前端部分昨天完成了全局页面的代码，和登录页面的代码，不过昨天的代码还有一些需要补充的，这里添加一下。
基于android 的移动电商平台(雏形)的设计
10-26
同时，我们还将设立用户反馈渠道，使用户能够及时反馈遇到的问题和建议。 综上所述，基于Android的移动电商平台的设计中包含用户界面、商品展示、购物车功能、登录与注册、支付系统、物流跟踪以及用户评价与反馈等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

隐藏用户y

虽然不是很有才华，但是渴望打赏

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值