由浅入深JavaScript13进阶-简单运动-优快云博客

本文链接：https://blog.youkuaiyun.com/zhangdongxu999/article/details/77333940

本文解析了JavaScript运动中的三种基本类型：匀速运动、缓冲运动及多物体运动，并详细介绍了实现原理与代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript运动
说到JavaScript运动就不得不提一提JS定时器函数
JS定时器有两种，延时性和周期性他们都是window对象的方法。
定时器
延时性定时器
setTimeout(函数，毫秒数)，返回值为该定时器。
周期性定时器
setInterval(函数，毫秒数)，返回值为该定时器。
取消定时器
clearInterval(定时器名称)
clearTimeout(定时器名称)
eg： setTimeout（function(){
           alert('2秒后执行')
   },2000）
以上是最简单的定时器，两秒后运行setTimeout中的匿名函数，执行alert
运动基础
所谓的运动不过是让元素的CSS样式不断发生改变
不断通过定时器来完成，样式通过style.来完成
例如：元素的位置不断改变，元素的透明度不断改变。
JS运动有很多种类，最简单即使匀速运动。

匀速运动
速度恒不变
易错点注意：
1：不断点击开始按钮，速度变快。因为不断点击按钮
   导致对同一对象开重复多个定时器，解决，在开定时器前先关定时器
   clearInterval(定时器名称)。

2:非行间样式的获取，自己封装函数getCssStyle
3：便于重复使用，我们把运动封装到move函数里，
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 100px;
               height: 100px;
               left: 0px;
               background-color: red;
               position: absolute;
           }
       </style>
       <script>
           window.onload = function(){
               var btn1 = document.getElementById('btn1');
               var div = document.getElementsByTagName('div')[0];
               btn1.onclick = function(){
                   move(div,800);
               }
           }
           var timer = null;
           function move(obj,target){
               clearInterval(timer);//不断点击开始按钮，速度变快
               timer = setInterval(function(){
                   var currentStyle = parseInt(getCssStyle(obj,'left'));
                   if(currentStyle>=800){
                       clearInterval(timer);
                   }else{
                       obj.style.left = currentStyle+20+'px';
                   }
               },30)
           }
           function getCssStyle(obj,name){
               var finalStyle = document.currentStyle||getComputedStyle(obj,null);
               return finalStyle[name];
           }
       </script>
   </head>
   <body>
       <input type="button" id="btn1" value="开始" />
       <div></div>
   </body>
</html>

JS运动，变速运动，又称缓冲运动。
变速运动
要点：
1:变速运动在于，速度不断变化
2:速度和距离成正比
3:速度=（期望值-当前值）/ 缩放系数
4:速度取整：speed = speed>0?Math.ceil(speed):Math.floor(speed);
因为像素最小为1，为正向上取整，为负向下取整
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 100px;
               height: 100px;
               left: 400px;
               background-color: red;
               position: absolute;
           }
       </style>
       <script>
           window.onload = function(){
               var btn1 = document.getElementById('btn1');
               var div = document.getElementsByTagName('div')[0];
               btn1.onclick = function(){
                   move(div,0);
               }
           }
           var timer = null;
           function move(obj,target){
               clearInterval(timer);
               timer = setInterval(function(){
                   var currentStyle = parseInt(getCssStyle(obj,'left'));
                   var speed = (target-currentStyle)/7;//速度=（期望值-当前值）/ 缩放系数
                   speed = speed>0?Math.ceil(speed):Math.floor(speed);//像素取整
                   if(currentStyle>=800){
                       clearInterval(timer);
                   }else{
                       obj.style.left = currentStyle+speed+'px';
                   }
               },30)
           }
           function getCssStyle(obj,name){
               var finalStyle = document.currentStyle||getComputedStyle(obj,null);
               return finalStyle[name];
           }
       </script>
   </head>
   <body>
       <input type="button" id="btn1" value="开始" />
       <div></div>
   </body>
</html>

多物体运动
JS运动还有多物体运动，顾名思义就是多个物体同时运动
要点：
1：每个运动物体单独一个定时器
2:所有东西都不能公用
3:定时器作为物体的自定义属性

以下例子我们给每个div都添加运动
每一个div对象都单独开一个定时器当做自定义属性挂到自己本身上
<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div{
               width: 100px;
               height: 100px;
               background-color: red;
               float: left;
               margin: 10px;
           }
       </style>
       <script>
           window.onload = function(){
               var divs = document.getElementsByTagName('div');
               for(var i = 0 ;i<divs.length;i++){
                   divs[i].onmouseover = function(){
                       move(this,400);
                   }
                   divs[i].onmouseout = function(){
                       move(this,100);
                   }
               }
           }
           function move(obj,target){
               clearInterval(obj.timer);//定时器作为物体的自定义属性
               obj.timer = setInterval(function(){
                   var currentStyle = parseInt(getCssStyle(obj,'height'));
                   var speed = (target-currentStyle)/7;
                   speed = speed>0?Math.ceil(speed):Math.floor(speed);
                   if(currentStyle>=800){
                       clearInterval(obj.timer);
                   }else{
                       obj.style.height = currentStyle+speed+'px';
                   }
               },30)
           }
           function getCssStyle(obj,name){
               var finalStyle = document.currentStyle||getComputedStyle(obj,null);
               return finalStyle[name];
           }
       </script>
   </head>
   <body>
       <div></div>
       <div></div>
       <div></div>
   </body>
</html>

以上就是JS运动中最简单的运动解析
包括匀速运动，缓冲运动，多物体运动。
各种各样的运动可以做出JS中大量的多彩特效
下期我们来解析，JS运动中的复杂运动。

说在最后的话：

本博会开一个JS专栏:《大神前端：JavaScript板块》长期更新，由浅入深带大家系统的学习JavaScript，
做出多彩的JS特效。
如果对你有用就关注一下专栏吧，我会不断的更新，后期还有其他版块。
http://blog.youkuaiyun.com/column/details/15918.html

想深入，系统全面的学习JS，博友们可以在优快云搜索我的课程《多彩JavaScript》@_@。
http://edu.youkuaiyun.com/course/detail/5619

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正