大家好，欢迎来到IT知识分享网。
动画实现原理
核心原理：通过定时器setInterval() 不断移动盒子位置。
实现步骤：
- 获得盒子当前位置
- 让盒子在当前位置加上1个移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位，才能使用element.style.left
缓动效果原理
缓动就是变速运动，最常见的就是让速度慢下来
思路：
- 让盒子每次移动的距离慢慢变小，速度就会慢慢减下来
- 核心算法：（目标值-现在的位置）/ 10 作为每次移动的距离步长
- 停止的条件是：让盒子位置等于目标位置就停止定时器
动画函数多个目标值之间来回移动
点击按钮时，判断步长是正值还是负值
var step = (target – obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
- 如果是正值，则步长 往大了取整
- 如果是负值 则步长往小了取整
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { position: absolute; left: 0; width: 100px; height: 100px; background-color: pink; } span { position: absolute; left: 0; top: 200px; display: block; width: 170px; height: 170px; line-height: 170px; background-color: rebeccapurple; color: white; } </style> </head> <body> <div></div> <button class="btn500">点击我到500</button> <button class="btn800">点击我到800</button> <span>今天也要好好敲代码哦</span> <script> //给不同元素指定了不通定时器 function animate(obj, target) { //当我们不断地点击按钮，这个元素的速度会越来越快，因为开启了太多定时器 //解决方案就是 让我们的元素只有一个定时器执行 //先清除以前的定时器，只保留当前的一个定时器 clearInterval(obj.timer); obj.timer = setInterval(function () { //步长值写到定时器里面 // var step = Math.ceil((target - obj.offsetLeft) / 10); var step = (target - obj.offsetLeft) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); if (obj.offsetLeft == target) { //停止动画 本质是停止定时器 clearInterval(obj.timer); } obj.style.left = obj.offsetLeft + step + "px"; }, 30); } var div = document.querySelector("div"); var span = document.querySelector("span"); var btn500 = document.querySelector(".btn500"); var btn800 = document.querySelector(".btn800"); btn500.addEventListener("click", function () { animate(span, 500); }); btn800.addEventListener("click", function () { animate(span, 800); }); animate(div, 300); </script> </body> </html>
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/25947.html
