实现小球不匀速运动
<!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: 0; padding: 0; } #ball { width: 100px; height: 100px; background-color: red; border-radius: 50%; position: absolute; left: 100px; top: 200px } #wall_l { width: 1px; height: 300px; background-color: black; position: absolute; left: 99px; top: 150px; } #wall_r { width: 1px; height: 300px; background-color: black; position: absolute; left: 1200px; top: 150px; } </style> </head> <body> <div id="ball"></div> <div id="wall_l"></div> <div id="wall_r"></div> <button>向右</button><button>向左</button> <button>开始</button> <script> //1.查 var ball = document.querySelector('#ball'); var wall_l = document.querySelector('#wall_l') var wall_r = document.querySelector('#wall_r') var btns = document.querySelectorAll('button'); //向右 btns[0].onclick = function () { moveR() } btns[1].onclick = function () { moveL() } btns[2].onclick = function () { animate(ball,1100,function(){ animate(ball,100) }) } //缓慢动画 （由快到慢） //速度公式 speed= (end-start)/10 var timer; function moveR() { clearInterval(timer); timer= setInterval(function () { // 获得小球当前的位置 var l=ball.offsetLeft; var target=1100;//目标位置 结束位置 var speed=(target-l)/10; speed= Math.ceil(speed) console.log(speed);//0.4~~~0 if(ball.offsetLeft==target){ clearInterval(timer) } //让小球 改变位置 ball.style.left=l+speed+'px' }, 25) } function moveL() { clearInterval(timer); timer= setInterval(function () { // 获得小球当前的位置 var l=ball.offsetLeft; var target=100;//目标位置 结束位置 var speed=(target-l)/10; speed= Math.floor(speed) console.log(speed);//-0.5~~~0 if(ball.offsetLeft==target){ clearInterval(timer) } //让小球 改变位置 ball.style.left=l+speed+'px' }, 25) } </script> <script> //封装一下 // obj 对象 target 目标位置 callback回调函数 -可选 function animate(obj,target,callback){ clearInterval(obj.timer);//防止定时器累加 或来回拉扯的过程 obj.timer= setInterval(function () { // 获得小球当前的位置 var l=obj.offsetLeft; var speed=(target-l)/10; speed= speed>0? Math.ceil(speed):Math.floor(speed) if(obj.offsetLeft==target){ clearInterval(obj.timer); callback&&callback(); } //让小球 改变位置 obj.style.left=l+speed+'px' }, 25) } </script> </body> </html>
