解析 JS 运动

已于 2022-12-04 11:32:05 修改
阅读量327 收藏 6
点赞数 1
分类专栏： javascript 文章标签： javascript 开发语言
于 2022-12-04 11:21:46 首次发布
原文链接：https://www.cnblogs.com/jingwhale/p/4622125.html
版权

文章目录

解析 JS 运动

物体运动原理：通过改变物体的位置，而发生移动变化。 任何运动都是相对的，就像物理中的运动公式：s（要达到的）=s0（当前的样式值）+vt。
方法：
  1.运动的物体使用***绝对定位***
  2.通过改变定位物体的属性（left、right、top、bottom）值来使物体移动。例如向右或左移动可以使用offsetLeft（offsetRight）来控制左右移动。
  3.公式
  	1.路程：s = vt 
      S表示路程，V表示速度，T表示时间。路程=速度*时间。
     2. 加速度公式：a=（vt-v0）/t
     	 a：加速度  v：速度  t：时间
	   加速度：a=v的变化量/t的变化量，加速度是矢量，既有方向又有大小
步骤：
1、开始运动前，先清除已有定时器 （因为：是连续点击按钮，物体会运动越来越快,造成运动混乱）
2、开启定时器，计算速度
3、把运动和停止隔开（if/else),判断停止条件，执行运动
关键点：
1、多物体

    将定时器附在对象上
2、链式运动

    循环调用定时器：fnEnd 函数里开启另外的定时器
3、多值运动

循环属性值数组：一个定时器时间，执行多个属性值得改变
判断运动结束，所有属性都到预定的值：增加一个布尔值标志，开始时，var bStop=true; //假设：所有值都已经到了；在循环的时候判断，如果 if(cur!=json[attr]) bStop=false;
一.定时器

在 javascritp 中，有两个关于定时器的专用函数，它们是：

1.倒计定时器：timename=setTimeout(“function();”,delaytime);

2.循环定时器：timename=setInterval(“function();”,delaytime);

function()是定时器触发时要执行的是事件的函数，可以是一个函数，也可以是几个函数，或者 javascript 的语句也可以，单要用;隔开；delaytime 则是间隔的时间，以毫秒为单位。
　　倒计时定时器就是在指定时间后触发事件，而循环定时器就是在间隔时间到来时反复触发事件，其区别在于：前者只是作用一次，而后者则不停地作用。
　　倒计时定时器一般用于页面上只需要触发一次的的情况，比如点击某按钮后页面在一定时间后跳转到相应的站点，也可以用于判断一个浏览者是不是你的站点上的“老客”，如果不是，你就可以在 5 秒或者 10 秒后跳转到相应的站点，然后告诉他以后再来可以在某个地方按某一个按钮就可以快速进入。
　　循环定时器一般用于站点上需要从复执行的效果，比如一个 javascript 的滚动条或者状态栏，也可以用于将页面的背景用飞雪的图片来表示。这些事件需要隔一段时间运行一次。
　　有时候我们也想去掉一些加上的定时器，此时可以用 clearTimeout(timename) 来关闭倒计时定时器，而用 clearInterval(timename)来关闭循环定时器。

二.运动研究

1.运动：匀速运动（让物体动起来）
对定时器的使用
给 DIV 加绝对定位
offsetLeft

问题：到达某个特定位罝停符
解决：做判断，符合条件时关掉定时器(存定时器 timer)
速度变慢(一般不动时间,而是改数字-速度)
用变量存速度

问题：取 7 时，offsetLeft 没有等于 300 的时候,div 停不下来
解决:>=300 //停在 301

问题：到 300 后点击按钮还继续走
原因：点击按钮,执行函数,开定时器(执行当前函数一至少执行一次)
解决:加 else (没有到达目标之前才执行)

问题：连续点击，速度变快
原因：每点击一次就开一个定时器，点击几次就有几个定时器同时工作
解决：保证每次只有一个定时器工作,先 cearlnterval ()

示例 1,分享到：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #menu {
        width: 100px;
        height: 200px;
        background-color: gray;
        position: absolute;
        top: 300px;
        left: -100px;
      }
      #menu span {
        width: 20px;
        height: 60px;
        line-height: 20px;
        background-color: yellow;
        position: absolute;
        left: 100px;
        top: 70px;
      }
    </style>
  </head>
  <body>
    <div id="menu">
      <span>分享到</span>
    </div>
  </body>
  <script>
    window.onload = function () {
      var oMenu = document.getElementById("menu");

      oMenu.onmousemove = function () {
        starMove(3, 0); //speed为3，目标值为0px
      };

      oMenu.onmouseout = function () {
        starMove(-3, -100); //speed为-3，目标值为-100px
      };

      // 记录定时器返回值
      var timer = null;

      function starMove(speed, iTarget) {
        // 获取menu的id
        var oMenu = document.getElementById("menu");
        // 关闭定时器
        clearInterval(timer);
        // 运动和停止
        timer = setInterval(function () {
          if (oMenu.offsetLeft == iTarget) {
            clearInterval(timer);
          } else {
            oMenu.style.left = oMenu.offsetLeft + speed + "px";
          }
        }, 3);
      }
    };
  </script>
</html>

效果如下：
在这里插入图片描述

示例 2,淡入淡出：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出</title>
<style>
#div1 {width:200px; height:200px; background:red; filter:alpha(opacity:30); opacity:0.3;}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');

    oDiv.onmouseover=function ()
    {
        startMove(100);
    };
    oDiv.onmouseout=function ()
    {
        startMove(30);
    };
};

var alpha=30;
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');

    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;

        if (alpha<iTarget) { speed=10; }
        else { speed =- 10; }
        if ( alpha == iTarget )
        { clearInterval(timer); }
        else { alpha+=speed;
               oDiv.style.filter='alpha(opacity:'+alpha+')';
               oDiv.style.opacity=alpha/100;  }
    }, 30);
}
</script>
</html>

效果如下：
在这里插入图片描述

匀速运动的停止条件
距离足够近

示例 3,匀速运动的停止条件

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>匀速运动的停止条件</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
#div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
</style>
<script>
var timer=null;

function startMove(iTarget)
{
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function (){
        var speed=0;
        if(oDiv.offsetLeft<iTarget) { speed=7; }
        else { speed=-7; }
        if( Math.abs(iTarget-oDiv.offsetLeft) <= 7 )
        {  clearInterval(timer);
           oDiv.style.left=iTarget+'px'; }
        else { oDiv.style.left=oDiv.offsetLeft+speed+'px'; }
    }, 30);
}
</script>
</head>
<body>
<input type="button" value="到100" onclick="startMove(100)" />
<input type="button" value="到300" onclick="startMove(300)" />
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
</body>
</html>
2.变速运动（缓冲运动）

逐渐变慢,最后停止
距离越远速度越大

速度有距离决定
速度=(目标值-当前值)/缩放系数
如果没有缩放系数t速度太大,瞬间到达终点.没有过程

问题：并没有真正到达 300
原因：速度只剩 0.9 //像素是屏幕能够显示的最/J 库位，并不会四舍五入掉
Math.ceil ()向上取整
Math.floor ()向下取整

问题：向左走，又差一块–Math.floor ()
判断：三目 speed=speed>0 ? Math.ceil ( speed ): Math.floor ( speed )

示例,缓冲运动：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>缓冲运动</title>
<style>
#div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
#div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
</style>
<script>
function startMove()
{
    var oDiv=document.getElementById('div1');
    setInterval(function (){
        var speed=(300-oDiv.offsetLeft)/10;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        oDiv.style.left=oDiv.offsetLeft+speed+'px';

        document.title=oDiv.offsetLeft+','+speed;
    }, 30);
}
</script>
</head>

<body>
<input type="button" value="开始运动" onclick="startMove()" />
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

效果如下：
在这里插入图片描述

3.多物体运动

多个 div ,鼠标移入变宽
运动框架传参 obj,知道让哪个物体动起来
用到缓冲一定要取整

问题：div 没运动回去 //清除前一个定时器
原因：只有一个定时器
解决：加物体上的定时器，使每个物体都有一个定时器。定时器作为物体属性

多个 div 淡入淡出
首先关闭物体上的定时器
经验：多物体运动框架所有东西都不能共用

问题：不是因为定时器,而是因为 alpha
解决：作为属性附加到物体上 /不以变量形式存在

offset 的 bug

加 border 变宽

offsetWith 并不是真正的 width ,它获取的是盒模型尺寸
解决：躲着 宽度扔到行间,parselnt ( oDiv.style.width )

进一步解决： getStyle ( obj, name ) currentStyle , getComputedStyle
加 border ,只要 offset 就有问题 去掉 offset

示例,多物体运动：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
</style>
<script>
window.onload=function ()
{
    var aDiv=document.getElementsByTagName('div');

    for(var i=0;i<aDiv.length;i++)
    {
        aDiv[i].timer=null;

        aDiv[i].onmouseover=function ()
        {
            startMove(this, 400);
        };

        aDiv[i].onmouseout=function ()
        {
            startMove(this, 100);
        };
    }
};

function startMove(obj, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        // offsetWidth 水平方向 width + 左右padding + 左右border-width
        var speed=(iTarget-obj.offsetWidth)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(obj.offsetWidth==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style.width=obj.offsetWidth+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<div></div>
<div></div>
<div></div>
</body>
</html>

效果如下：

在这里插入图片描述

4.任意值运动

任意值运动的单位分为透明度和 px。

px 单位的任意值

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:200px; height:200px; margin:20px; float:left; background:yellow; border:10px solid black; font-size:14px;}
</style>
<script>
window.onload=function ()
{
    var oDiv1=document.getElementById('div1');
    oDiv1.onmouseover=function (){startMove(this, 'height', 400);};
    oDiv1.onmouseout=function (){startMove(this, 'height', 200);};

    var oDiv2=document.getElementById('div2');

    oDiv2.onmouseover=function (){startMove(this, 'width', 400);};
    oDiv2.onmouseout=function (){startMove(this, 'width', 200);};

    var oDiv3=document.getElementById('div3');
    oDiv3.onmouseover=function (){startMove(this, 'fontSize', 50);};
    oDiv3.onmouseout=function (){startMove(this, 'fontSize', 14);};

    var oDiv4=document.getElementById('div4');
    oDiv4.onmouseover=function (){startMove(this, 'borderWidth', 100);};
    oDiv4.onmouseout=function (){startMove(this, 'borderWidth', 10);};
};

function getStyle(obj, name)
{
    if(obj.currentStyle){return obj.currentStyle[name];}
    else{return getComputedStyle(obj, false)[name];}
}

function startMove(obj, attr, iTarget)
{
    clearInterval(obj.timer);
    obj.timer=setInterval(function (){
        var cur=parseInt(getStyle(obj, attr));

        var speed=(iTarget-cur)/6;
        speed=speed>0?Math.ceil(speed):Math.floor(speed);

        if(cur==iTarget)
        {
            clearInterval(obj.timer);
        }
        else
        {
            obj.style[attr]=cur+speed+'px';
        }
    }, 30);
}
</script>
</head>

<body>
<div id="div1">变高</div>
<div id="div2">变宽</div>
<div id="div3">safasfasd</div>
<div id="div4"></div>
</body>
</html>

效果如下：
在这里插入图片描述

透明度的任意值，需要做判断：
判断
var cur = 0
if (attr == 'opacity ') {
    cur = parseFloat(getStyle(obj, attr)) * 100
} else {
}
设置样式判断
if (attr == 'opacity ') {
    obj.style.fiIter = 'alpha ( opacity: '(cur + speed) + ')'
    obj.style.opacity = (cur + speed) / 100
} else {
}
5.链式运动

多出来的一个参数，只有传进去的时候才调用
鼠标移入变宽，结束之后弹出 abc
先横向展开.再以向展开
鼠标移出,先变回不透明，变矮，变窄

三.封装运动框架

基于以上的分析与总结，封装运动框架 move.js 如下：

function getStyle(obj, name) {
    if (obj.currentStyle) {
        return obj.currentStyle[name]
    } else {
        return getComputedStyle(obj, false)[name]
    }
}

function startMove(obj, json, fnEnd) {
    clearInterval(obj.timer)
    obj.timer = setInterval(function () {
        var bStop = true //假设：所有值都已经到了

        for (var attr in json) {
            var cur = 0

            if (attr == 'opacity') {
                cur = Math.round(parseFloat(getStyle(obj, attr)) * 100)
            } else {
                cur = parseInt(getStyle(obj, attr))
            }

            var speed = (json[attr] - cur) / 6
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed)

            if (cur != json[attr]) bStop = false

            if (attr == 'opacity') {
                obj.style.filter = 'alpha(opacity:' + (cur + speed) + ')'
                obj.style.opacity = (cur + speed) / 100
            } else {
                obj.style[attr] = cur + speed + 'px'
            }
        }

        if (bStop) {
            clearInterval(obj.timer)

            if (fnEnd) fnEnd()
        }
    }, 30)
}

move.js 运动框架基本满足现在网页上所有动画的需求（不包括 css3）。

四.应用

应用 1，完成如下效果：

在这里插入图片描述

js 代码如下：

<script src="move.js"></script>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('play');
    var aBtn=oDiv.getElementsByTagName('ol')[0].getElementsByTagName('li');
    var oUl=oDiv.getElementsByTagName('ul')[0];

    var now=0;
    for(var i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            now=this.index;
            tab();
        };
    }

    function tab()
    {
        for(var i=0;i<aBtn.length;i++)
        {
            aBtn[i].className='';
        }
        aBtn[now].className='active';
        startMove(oUl, {top: -150*now});
    }

    function next()
    {
        now++;
        if(now==aBtn.length){now=0;}
        tab();
    }

    var timer=setInterval(next, 2000);

    oDiv.onmouseover=function (){clearInterval(timer);};

    oDiv.onmouseout=function (){timer=setInterval(next, 2000);};
};
</script>
应用 2，完成如下效果：

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.....
</style>
<script type="text/javascript" src="move.js"></script>
<script type="text/javascript">
window.onload=function ()
{
    var oBtn=document.getElementById('but');
    var oBottom=document.getElementById('zns_bottom');
    var oBox=document.getElementById('zns_box');
    var oBtnClose=document.getElementById('btn_close');

    oBox.style.display='block';
    var initBottomRight=parseInt(getStyle(oBottom, 'right'));
    var initBoxBottom=parseInt(getStyle(oBox, 'bottom'));
    oBox.style.display='none';

    oBtn.onclick=openHandler;
    oBtnClose.onclick=closeHandler;

    function openHandler()
    {
        startMove(oBottom, {right: 0}, function (){
            oBox.style.display='block';
            startMove(oBox, {bottom: 0});
        });
        oBtn.className='but_hide';
        oBtn.onclick=closeHandler;
    }

    function closeHandler()
    {
        startMove(oBox, {bottom: initBoxBottom}, function (){
            oBox.style.display='none';
            startMove(oBottom, {right: initBottomRight}, function (){
                oBtn.className='but_show';
            });
        });
        oBtn.onclick=openHandler;
    }
};
</script>
</head>
<body>
    ......
</body>
</html>

转载地址：https://www.cnblogs.com/jingwhale/p/4622125.html

转角羊儿
关注
  • 1
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS运动框架move.js注释解析
qq_40237375的博客
03-22 228
unction getStyle(obj, name)//获得当前所需的样式{ if(obj.currentStyle)//兼容性设置 { return obj.currentStyle[name]; } else { return getComputedStyle(obj, false)[name]; }}function startMove(obj, json, fnEnd)//json里...
如何利用js实现小球运动【全网最详解析】
weixin_54139195的博客
08-11 2648
js实现小球运动随着人工智能的不断发展，web前端这门技术也越来越重要，很多人都开启了学习web前端，本文就介绍web前端的基础内容。以上就是今天要讲的内容，本文仅仅简单介绍了js怎样实现小球运动，以上用到了DOM距离，分别为：元素的可视距离: tag.clientHeight,tag.clientWidth ，元素控件距离: tag.offsetHeight,tag.offsetWidth，被撑开的距离: tag.scrollHieght,tag.scrollWidth。.........
javascript解析人体运动
Dream Space
11-27 1371
var xp=0;   var imgIndex=1;   var moveTimer;   function move(){    xp=xp+20;   //每一次div的位移的辐度    document.getElementById('red').style.left=xp+'px'; //开始的位置,px像素    imgIndex=imgIndex==5?1:(imgInd
Javascript(Basic Pink) 预解析
LeungSr的博客
07-27 142
文章目录格式1.过渡效果源代码最终效果2.过度练习最终效果写在最后 格式 transition: 变化的属性 花费时间 运动曲线 何时开始 如果需要写多个属性，需要用逗号进行分割 如果所有的属性都要变化，属性写all 谁要过度给谁加 1.过渡效果 源代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA.
JavaScript 运动框架
cherry4115
12-27 512
JavaScript的运动，即让某元素的某些属性由一个值变到另一个值的过程。如让div的width属性由200px变到400px，opacity属性由0.3变到1.0，就是一个运动过程。 实现运动要注意以下方面： 1. 匀速运动（改变left、right、width、height、opacity等属性） 2. 缓冲运动（速度是变化的） 3. 多物体运动（注意所有东西都不能共用，否则
工业6轴机械臂运动学逆解（解析解）
weixin_43879302的博客
12-20 3040
6轴工业机械臂运动学逆解（解析解）
JS初级案例解析
qq_44930306的博客
07-04 1193
JS初级的知识点所衍生的案例练习
threejs 源码解析_Three.js源码阅读笔记(Object3D类)
weixin_39766258的博客
12-19 1103
这是Three.js源码阅读笔记的第二篇，直接开始。Core::Object3DObject3D似乎是Three.js框架中最重要的类，相当一部分其他的类都是继承自Object3D类，比如场景类、几何形体类、相机类、光照类等等：他们都是3D空间中的对象，所以称为Object3D类。Object3D构造函数如下：THREE.Object3D = function () {THREE.Object3D...
JavaScript之轮播图运动函数
qq_44531034的博客
04-02 220
var oDiv=document.querySelectoe('div'); var oBtn=document.querySelector('button') function move(ele，obj){ //先通过for...in循环，来调用参数2，获取其中的执行属性和目标位置的数值 //目前是obj中，有一个单元会循环一次，生成left方向的定时器 //如果obj中，有多个单元，会循环多...
js运动应用实例解析
10-23
### JS运动应用实例解析 #### 知识点一：JS运动动画原理与实现 JavaScript (简称 "JS") 是一种轻量级的编程语言，被广泛应用于网页开发中，用于实现动态效果、用户交互等。在网页开发中，通过JS可以轻松实现元素的...
JS运动特效之链式运动分析
10-18
JavaScript事件及事件处理机制详解》、《JavaScript设计模式与实战》、《JavaScript数据结构与算法应用解析》及《JavaScript函数深度解析》。 链式运动在JavaScript特效中是一种常见的手法，它允许开发者创建流畅且...
JS实现多物体运动的方法详解
11-27
在JavaScript中实现多物体运动，通常涉及到DOM操作、事件监听以及动画帧的更新。下面将详细解析这个过程。 首先，我们需要获取要进行运动的多个元素。在这个实例中，通过`getElementsByTagName`方法获取到所有的`li...
JS运动特效之同时运动实现方法分析
10-18
本文将详细解析如何实现JS中的同时运动特效，即让一个元素同时改变多个属性，如宽度、高度和透明度。 首先，我们需要理解JavaScript动画的基本原理。通常，我们通过设置定时器（如`setInterval`）来间隔性地更新...
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 535
JavaScript青少年简明教程：函数及其相关知识（下）
HarmonyOS应用开发者高级认证，Next版本发布后最新题库 - 多选题序号4
Gusha_的博客
07-23 1314
HarmonyOS应用开发者高级认证最新题库，编写于2024年7月19日，Next版本发布之后
【React 】开发环境搭建详细指南
lph159的博客
07-24 1086
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
已解决：vue-office/excel 多个sheet点击切换，滚动条高度不重置，表格视图位置不正确
weixin_42289080的博客
07-26 155
解决 @vue-office/excel 多个sheet切换，内容以及滚动条展示不正确的问题
vue el-select的下拉树形结构 带检索功能
Jokerxiuka的博客
07-26 102
【代码】vue el-select的下拉树形结构。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值