JavaScript反弹动画效果的实现代码

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title文档/title style # box { width :200 px；高度：200 px绝对位置：top:0left:200px背景：浅蓝色；} .BTN { position : absolutetop :200 pxleft :100 px高度：50 px} .btn输入{ display : inline-block；左边距left:50pxoutline:无；宽度宽度：100像素高度：50 pxborder:1px纯绿色；光标：指针指针；}/style/head body div id=' box '/div class=' BTN '输入类型='按钮'值='向左id='btnLeft '输入类型='按钮'值='向右id='btnRight' /div脚本var oBox=document。getelementbyid(' box ')；var minLeft=0；var maxLeft=utils。win('客户端宽度')-obox。用.抵消；定义变量步长=5;定义变量计时器=null函数move(target){ //target:告诉我要运动的目标位置window.clearTimeout(计时器);var COlft=utils。CSS(oBox，‘left’)；if(CRoplTarget){//向右走if(CRoFt步骤目标){//边界utils.css(oBox，' left '，target)；返回；} CRopLt=steputils.css(oBox，' left '，CulFort)} else if(CulForTarget){//向左走if(CRoFt-step目标){//边界utils.css(oBox，' left '，target)；返回；} COlFlt-=step；utils.css(oBox，' left '，COlFlt)} else {//不需要运动返回；} //timer=window.setTimeout(移动，10)//这里有一个问题，点击按钮第一次目标的值是有的，但是第二次通过setTimeout执行的时候没有给目标进行传值。是未定义的计时器=窗口。settimeout(函数(){ move(目标))；},10)//这样使用匿名函数包裹一下，就解决了上面的问题，但是这样写性能不好，因为每一次到达时间的时候，都需要执行一次匿名函数（形成一个私有的作用域),在匿名函数中再执行移动，但是移动中需要用到的数据值在第一次执行的移动方法中，需要把匿名函数形成的这个私有的作用域作为跳板找到之前的，这样就导致了匿名函数形成的这个私有的作用域不能销毁}文档。getelementbyid(' btnLeft ').onclick=function(){ move(MinLeft)}文档。getelementbyid(' BTN右').onclick=function(){ move(MaxLeft)}/script/body/html为了解决上面性能不好的问题，下面是一个优化后的代码：里面在使用一个函数包裹，这样就只有移动函数创建的一个私有作用域没有销毁，等到移动(_ m)执行完毕走吧就自然会进行销毁。

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title document/title style # box { width :200 px；高度：200 px；绝对位置：top:0left:200px背景： light blue；} .btn { position:absolutetop:200pxleft:100px高度：50 px；} .btn输入{ display : inline-block；左边距left:50pxoutline:无；宽度width:100px高度：50 px；border:1px纯绿色；cursor:pointer指针；}/style/head body div id=' box '/div class=' BTN ' input type=' button ' value=' left ' id=' btnleft ' input type=' button ' value=' right ' id=' BTN right '/div script varobox=document . getelementbyid(' var minLeft=0；var maxLeft=utils . win(' client width ')-obox . offset with；var步长=5；var计时器=null函数move (target) {//target:告诉我要移动的目标位置_ move()；function _ move(){ window . cleartime out(计时器)；var COlft=utils . CSS(oBox，' left ')；if(CulFortTarget){//Go right if(CulFort step target){//Border utils . CSS(oBox，' Left '，target)；返回；} CRopLt=step；Urls.css (obox，' left '，colloft)} else if(colloft target){//go left if(colloft-step target){//boundary utils . CSS(oBox，' left '，target)；返回；} COlFlt-=step；Urls.css (obox，' left '，coll offt)} else {//不需要移动返回；} timer=window.setTimeout(_move，10)；} } document . getelementbyid(' btnLeft ')。onclick=function(){ move(minLeft)} document . getelementbyid(' BTN right ')。onclick=function(){ move(MaxLeft)}/script/body/html note :为了使当前元素同时只运行一个动画(下一个动画开始时，首先清除上一个动画的计时器):要确保当前元素的所有动画都接收到计时器返回的变量，有两种方法：1。全局接收(例如，上面的代码vartimer=null)；2.向元素添加自定义属性(如下图所示)

总结：通过以上，可以得到动画优化的四个规律：

1.给边界判断增加步长

2.清除无用的计时器

3.当外部函数需要传递参数时，可以在内部嵌套一层函数，避免范围的积累。

4.将计时器的返回值存储在元素的用户定义属性上，以防止全局变量冲突和多个动画同时执行

以上是边肖介绍的JavaScript反弹动画效果的实现代码，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！