Js运动
JavaScript之Js运动
在我们进行web开发的过程中,为了与用户进行更加友好、有趣的交互,拥有一套完美的运动框架就能轻松解决。
这次就给大家带来Javascript学习中Js运动的编写和注意事项。实现运动的思想很简单,首先对这个元素获取定位,然后通过改变该元素的left值和top值或者透明度,通过定时器就可以实现元素的运动效果。
Js运动代码编写的过程,基本步骤如下:
1、关闭上一次定时器。
因为重复点击多次开始运动,就相当于重复启动了多次定时器,这样造成的麻烦就是点击多次运动会加速。如果我们确保同一时间只启动一个定时器,在每次启动定时器之前先将上一次定时器关闭,就可以有效的解决上述问题。
关闭定时器:
clearInterval(timer);
2、运动和停止分开。
到达目的值后,点击按钮,还会往前运动,这时我们就需要用if-else语句将运动和停止分开。
var timer = setInterval(function(){ if(oDiv.offsetLeft >= 500){ clearInterval(timer); //停止运动 }else{ oDiv.style.left = oDiv.offsetLeft + speed + "px"; //运动 } },30);
3、分析元素怎么动
接下来我们将从匀速运动、淡入淡出、缓冲运动、多物体运动这些案例逐一展开分享。
一、匀速运动:速度不会改变。
分析: 1.实现匀速运动效果,我们先设置元素样式,然后通过document.getElementById(id)获取到对应的id节点元素。
2.关闭上一次定时器
3.定义speed速度(可以随意定义运动的速度值)
4.设置运动和停止分开
【注】接下来的案例分析与之类似,在代码块中详细注释。
<!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> //css样式设置 *{margin: 0px; padding: 0px;} #div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;} </style> <script> window.onload = function (){ var oBtn = document.getElementById("btn1");//获取btn1元素节点 var oDiv = document.getElementById("div1");//获取div1元素节点 oBtn.onclick = function(){ clearInterval(timer);//关闭上一次定时器 var speed = 8;//设置速度为8 var timer = setInterval(function(){//记录定时器返回值,设置定时器,30ms运动一下 if(oDiv.offsetLeft >= 500){ clearInterval(timer);//如果运动到目的值,关闭定时器 }else{ oDiv.style.left = oDiv.offsetLeft + speed + "px";//运动方式 } },30); } } </script> </head> <body> <button id = 'btn1'>开始运动</button> <div id = 'div1'></div> </body> </html>
来看一下匀速运动的效果图:
二、分享到菜单案例
封装了starMove和startMove2函数
<!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> <script> window.onload = function(){ var oMenu = document.getElementById("menu"); //鼠标移入,调用startMove函数 oMenu.onmouseover = function(){ startMove(); } //鼠标移出,调用startMove2函数 oMenu.onmouseout = function(){ startMove2(); } } var timer = null; //记录定时器返回值 function startMove(){ var oMenu = document.getElementById("menu"); var speed = 5; //1、每次启动定时器,将上一次定时器关闭 clearInterval(timer);//关闭定时器 timer = setInterval(function(){ //2、运动和停止分开,目的值是左侧边框位置0px if(oMenu.offsetLeft == 0){ clearInterval(timer); }else{ oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动 } }, 30); } function startMove2(){ var oMenu = document.getElementById("menu"); var speed = -5; //1、每次启动定时器,将上一次定时器关闭 clearInterval(timer); timer = setInterval(function(){ //2、运动和停止分开,目的值是左侧边框位置-100px if(oMenu.offsetLeft == -100){ clearInterval(timer);//关闭定时器 }else{ oMenu.style.left = oMenu.offsetLeft + speed + 'px';//运动 } }, 30); } </script> </head> <body> <div id = 'menu'> <span>分享到</span> </div> </body> </html>
上面的代码未免显得啰嗦笨拙,我们可以将它改动一下,把speed和iTarget的值作为形参传递到函数中,这样只封装成一个startMove函数就可以实现。
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); } }
来看一下分享到菜单的效果图:
三、淡入淡出效果
通过改变透明度的值来实现元素的淡入淡出效果。
<!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> #img1{opacity: 0.3; filter: alpha(opacity=30);} body{background-color: black;} </style> <script> window.onload = function(){ var oImg = document.getElementById("img1"); //鼠标移入,透明度为1 oImg.onmouseover = function(){ startMove(100); } //鼠标移出,透明度为0.3 oImg.onmouseout = function(){ startMove(30); } } //计算透明度的时候,如果遇到浏览器不兼容的问题,可以通过设置中间变量alpha完成计算 var alpha = 30;//设置中间变量 var timer = null;// function startMove(iTarget){ var oImg = document.getElementById("img1"); var speed = 2; //1、判断速度的正负 if(alpha < iTarget){ speed = Math.abs(speed);//如果当前值小于目标值,速度取正 }else{ speed = -Math.abs(speed);//如果当前值大于目标值,速度取负,停止运动 } //2、每次启动定时器之前,现将上一次定时器关闭掉 clearInterval(timer); timer = setInterval(function(){ //3、运动和停止要分开 if(alpha == iTarget){ clearInterval(timer); }else{ alpha += speed; //设置透明度 oImg.style.opacity = alpha / 100; oImg.style.filter = `alpha(opacity=${alpha})`; // alert(`alpha(opacity=${alpha})`) } }, 30); } </script> </head> <body> <img id = 'img1' src="timg.jpeg" alt=""> </body> </html>
来看一下淡入淡出的效果图:
四、缓冲运动
匀速运动的动画效果就像一个钢铁直男,直来直去。为了给动画效果做的更加流畅、舒适,我们现在来了解一下缓冲运动。
什么是缓冲运动?举个栗子,刹车就是缓冲运动!速度与距离成正相关就是缓冲运动,距离越大,速度越大;距离越小,速度越小。在Js中,(距离/速度=8)实现的缓冲效果最好,所以我们可以定义速度:var speed = (iTarget - node.offsetLeft) / 8;
但是要特别注意的是,计算机能够识别的最小像素是1px,小于1px不能识别,同时定义速度的时候必须为整数,要不然可是会出大事情!!所以要在定义速度的时候给它一个判断:speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);即speed>0时,向上取整,否则向下取整。
下面来看看代码,详细学习一下缓冲运动。
<!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> *{margin: 0px; padding: 0px;} #div1{width: 100px; height: 100px; background-color: red; position: absolute; left: 0px; top: 200px;} span{width: 1px; height: 500px; background-color: black; position: absolute; left: 500px; top: 0px; display: block;} </style> <script> window.onload = function(){ var oBtn = document.getElementById("btn1"); //点击按钮,调用startMove函数,目标值为500px oBtn.onclick = function(){ startMove(500); } } //定时器 var timer = null; //封装startMove函数 function startMove(iTarget){ var oDiv = document.getElementById("div1"); var oTxt = document.getElementById("txt1"); //关闭上一次的定时器 clearInterval(timer); timer = setInterval(function(){ //计算速度 var speed = (iTarget - oDiv.offsetLeft) / 8; //如果速度>0,向上取整,否则向下取整。 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); //运动和停止分开 if(oDiv.offsetLeft == iTarget){ clearInterval(timer);//到达目的值,关闭定时器 }else{ oDiv.style.left = oDiv.offsetLeft + speed + 'px'; } //用来打印速度和当前值,更好的理解缓冲运动 oTxt.value += speed + ", " + oDiv.offsetLeft + "\n"; }, 30); } </script> </head> <body> <button id = 'btn1'>开始运动</button> <div id = 'div1'></div> <span></span> <textarea name="" id="txt1" cols="30" rows="10"></textarea> </body> </html>
缓冲运动效果图如下:
五、多物体运动
多个元素一起运动会出现一个问题,就是上个元素运动未结束再去执行下一个运动的时候,上个元素会被干扰,暂停运动。这时就要让每一个元素拥有自己独享的定时器:node.index = i; node.timer = 定时器;
<!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> div{width: 100px; height: 50px; background-color: red; margin: 50px;} </style> <script> window.onload = function(){ var aDivs = document.getElementsByTagName("div"); for(var i = 0; i < aDivs.length; i++){ aDivs[i].onmouseover = function(){ //100 => 300 startMove(this, 300); } aDivs[i].onmouseout = function(){ //300 => 100 startMove(this, 100); } } } /* 让每一个运动的物体,都拥有一个自己独享的定时器。 node.index = i; node.timer = 定时器 */ function startMove(node, iTarget){ clearInterval(node.timer); node.timer = setInterval(function(){ //计算速度 var speed = (iTarget - node.offsetWidth) / 8; speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed); if(node.offsetWidth == iTarget){ clearInterval(node.timer); }else{ node.style.width = node.offsetWidth + speed + 'px'; } }, 30); } </script> </head> <body> <div></div> <div></div> <div></div> <div></div> </body> </html>
多物体运行图
以上是Js运动的基本动画效果。相信大家看完这篇文章对Js运动有了一定的了解。下一篇将继续为大家深入Js运动,实现多物体多样式案例效果,并且为大家封装一个完美运动函数。
文章为学习阶段一个总结,有错误之处希望大家指正!
坚强阳光努力的人运气都不会太差!
- 点赞 33
- 收藏
- 分享
- 文章举报
- js多个物体运动功能实例分析
- js动画2 多物体运动
- js运动练习
- js实现同一页面多个运动效果的方法
- js动画之匀速运动、缓冲运动、弹性运动、碰撞运动、属性变化动画
- js多个物体运动的问题1
- JS运动之多物体框架--多个div变宽
- JS-简单地匀速运动框架
- JS运动总结
- JS-匀速运动-运动停止
- js之导航栏目弹性运动效果
- 原生JS封装运动框架。
- js-运动框架(时间版)
- JS运动基础(一)
- js运动技术--多物体运动框架(变宽、变高、改变字体、改变border、透明度)以及替换offset的使用
- js实现带简单弹性运动的导航条
- js运动技术--完美运动框架
- JavaScript:用原生js实现重力条件下,可拖拽小球的碰撞运动
- js笔记---(运动)通用的move方法,兼容透明度变化
- js 运动的强大版