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

    js运动雏形 

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #box{
    10.             width: 100px;
    11.             height: 100px;
    12.             background: #f00;
    13.             position: absolute;
    14.             left: 0;
    15.             top: 50px;
    16.         }
    17.     style>
    18.     <script>
    19.  
    20.         window.onload=function(){
    21.             var begin=document.getElementById("begin");
    22. //上面获取begin应该和下面的方式一样，修改后可以显示，使用queryselectall不行
    23.             var stop=document.getElementById("stop");
    24.             var box=document.getElementById("box");
    25.             var timer;
    26.        
    27.         //给开始按钮添加点击时间
    28.             begin.onclick=function(){
    29.                 // 样式的结果带单位所以使用parseInt
    30.                 var l= parseInt(getComputedStyle(box).left);
    31.                 var t=parseInt(getComputedStyle(box).top);
    32.                 var w=parseInt(getComputedStyle(box).width);
    33.                 var h=parseInt(getComputedStyle(box).height);
    34.                 
    35.                 // 30ms是电影换帧的参数，看电影最流畅。浏览器刷新频率或者电脑硬件都会影响反应时间。这里设置为16
    36.                 timer=setInterval(function(){
    37.                     l++;
    38.                     t++;
    39.                     w++;
    40.                     h++;
    41.                     box.style.left=l+'px';
    42.                     box.style.top=t+'px';
    43.                     box.style.width=w+'px';
    44.                     box.style.height=h+'px';
    45.                 },16);
    46.                 // console.log(1);
    47.                 stop.onclick=function(){
    48.                     clearInterval(timer);
    49.                 };
    50.             }
    51.         };
    52.     script>
    53. head>
    54. <body>
    55.     <input type="button"   id="begin" value="开始">
    56.     <input type="button"   id="stop" value="停止">
    57.     <div id="box">div>
    58.     
    59. body>
    60. html>

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

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

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

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

     运动的问题

    运动的原理

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

    问题

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

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

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

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

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

    1.     <style>
    2.         #box{
    3.             width: 100px;
    4.             height: 100px;
    5.             background: #f00;
    6.             position: absolute;
    7.             left: 0;
    8.             top: 50px;
    9.         }
    10.     style>
    11.     <script>
    12.         window.onload=function(){
    13.             var begin=document.getElementById("begin");
    14.             var box=document.getElementById("box");
    15.             var t;
    16.  
    17.             begin.onclick=function(){
    18.                 clearInterval(t);  //2.清除一个不存在的定时器是不会有问题的，第二次点击就会清除第一次的定时器
    19.                 // 开启定时器给t赋值
    20.                 t=setInterval(function(){
    21.                     var l=parseInt(getComputedStyle(box).left);
    22.                     
    23.                     // l++,改成下面的代码会让方块运动加快，一次运动7px
    24.                     l+=7;
    25.                     // box走到300停下来
    26.                     console.log(l);
    27.                     if(l>=300){     //问题1
    28.                         clearInterval(t);
    29.                         // l=300;
    30.                     }
    31.                     box.style.left=l+"px";
    32.                 },16);
    33.             };
    34.         }
    35.     script>

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

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

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

    1.     <style>
    2.         #box1,#box2{
    3.             width: 100px;
    4.             height: 100px;
    5.             background: red;
    6.             position: absolute;
    7.             left: 0;
    8.             top: 50px;
    9.         }
    10.         #box2{
    11.             top: 200px;
    12.         }
    13.     style>
    14.     <script>
    15.         window.onload=function(){
    16.             var btn=document.getElementById("btn");
    17.             var box1=document.getElementById("box1");
    18.             var box2=document.getElementById("box2");
    19.             var t;//所有元素共用一个定时器
    20.  
    21.             function move(obj,attr,target){
    22.                 // 清除定时器累加
    23.                 // clearInterval(t);
    24.                 clearInterval(obj.t);//一上来只清除自己的定时器不会清除别人的定时器
    25.                 obj.t=setInterval(function(){
    26.                     var value=parseInt(getComputedStyle(obj)[attr]);//获取到属性的值
    27.  
    28.                     value+=7;//让属性值不断+7
    29.                     //如果属性值已经超过目标了，要定时清理定时器，同时为了避免越界，要把它拉回
    30.                     if(value>=target){
    31.                         clearInterval(t);
    32.                         value=target;
    33.                     }
    34.                     //修改元素的属性值
    35.                     obj.style[attr]=value+'px';
    36.                 },16);
    37.             }
    38.             btn.onclick=function(){
    39.                 move(box1,'left',300);
    40.                 move(box2,'left',250);
    41.             }
    42.         }
    43.  
    44.     script>
    45.  
    46. <body>
    47.     <input type="button" id="btn" value="开始">
    48.     <div id="box1">div>
    49.     <div id="box2">div>
    50. body>

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

    运动框架move.js

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

     运动的原理

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

    匀速运动

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

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

    速度=总距离/总时间

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

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

    t已过的时间

    b开始的时间

    c总距离

    d总时间

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

    var value=c/d*t+b
    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <script>
    9.         window.onload=function(){
    10.             var btn=document.getElementById("btn");
    11.             var box=document.getElementById("box");
    12.  
    13.             btn.onclick=function(){
    14.                 var c=300;
    15.                 var d=2000;
    16.                 var b=parseInt(getComputedStyle(box).left);
    17.  
    18.  
    19.                 //一开始运动的时候要记录开始的时间
    20.                 var startTime=new Date().getTime();
    21.  
    22.                 //开启定时器
    23.                 var timer=setInterval(function(){
    24.                     var t=new Date().getTime-startTime;
    25.  
    26.                     var value=c/d*t+b;
    27.  
    28.                     box.style.left=value+'px';
    29.                 },16);
    30.             }
    31.         };
    32.     script>
    33. head>
    34. <body>
    35. <input type="button" id="btn" value="开始">
    36. <div id="box">div>
    37. body>
    38. html>


    运动框架的编写

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #box{
    10.             width: 100px;
    11.             height: 100px;
    12.             background: red;
    13.             position: absolute;
    14.             left: 0;
    15.             top: 50px;
    16.         }
    17.     style>
    18.     <script>
    19.         /*
    20.         obj运动的对象
    21.         attr 要运动的对象
    22.         target 要运动到的目标
    23.         duration要运动的时间
    24.         fx运动的形式
    25.         callBack运动完成之后调用的函数
    26.         */
    27.        function move( obj,attr,target,duration,fx,callBack){
    28.         var d=duration;  
    29.         //起始位置
    30.         var b=parseFloat(getComputedStyle(obj)[attr]) //attr是变量不是真正的属性所以使用中括号
    31.         var c=target-b;
    32.         var startTime=new Date().getTime();
    33.  
    34.         clearInterval(obj.timer);
    35.         obj.timer=setInterval(function(){
    36.             var t=new Date.getTime()-startTime;
    37.             // 运动停止
    38.             if(t>=d){
    39.                 t=d;
    40.                 clearInterval(obj.timer);
    41.             }
    42.             //var value=c/d*t+b;
    43.             var value=Tween[fx](t,b,c,d);
    44.             obj.style[attr]=value+'px';
    45.             // 1
    46.             if(t==d){
    47.                 if(callBack){
    48.                     // 存在就调用
    49.                 callBack();
    50.                 }
    51.             }
    52.             // 2
    53.             if(t==d){
    54.                 // 左真返回右，左假返回左，就什么都不做
    55.                callBack && callBack();
    56.             }
    57.  
    58.         },16);
    59.  
    60.  
    61.        }
    62.        window.onload=function(){
    63.             var btn=document.getElementById("btn");
    64.             var box=document.getElementById("box");
    65.  
    66.             btn.onclick=function(){
    67.                 move(box,'left',400,1000,'linear',function(){
    68.                     alert('运动完成了')
    69.                 });
    70.             }
    71.         }
    72.  
    73.     script>
    74. head>
    75. <body>
    76.     <input type="button" id="btn" value="开始">
    77. <div id="box">div>
    78. body>
    79. html>

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

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

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

    只有callback不是必须的额

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

  • 相关阅读:
    数据结构笔记（王道考研） 第七章：查找
    网络编程-UDP协议（发送数据和接收数据）
    飞天+CIPU体为元宇宙带来更大想象空间
    Java使用redis-Redis是并发安全的吗？
    【二开】【JeecgBoot】修改分页参数
    正需要！这个温湿度监控方法也太及时了
    HTML5期末大作业：基于 html css js仿腾讯课堂首页
    基础的正则表达式
    qlib架构
    导购APP、淘客查券机器人与淘客系统：全面对比与选择
  • 原文地址：https://blog.csdn.net/weixin_55355282/article/details/127780359