缓动效果原理
- 思路:让盒子每次移动的距离慢慢变小 速度就会慢下来
- 核心算法: (目标值 - 现在的位置) / 10 做为每次移动的距离步长
- 停止的条件是:让当前盒子位置等于目标位置就停止定时器
缓动效果代码实现
点击按钮, 粉色盒子先快后慢移动
<!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>缓动效果代码实现</title> <style> div{ position: absolute; left: 0px; width: 100px; height: 100px; background-color: lightblue; } span{ position: absolute; left: 0px; top: 200px; display: block; width: 150px; height: 150px; background-color: pink; } </style> </head> <body> <button>点击BOM盒移动</button> <div></div> <span>BOM</span> <script> //简单动画函数封装obj目标对象 target 目标位置 //给不同的元素指定不同的定时器 function animate(obj, target) { // 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器 // 解决方案就是 让我们元素只有一个定时器执行 // 先清除以前的定时器 只保留当前的一个定时器执行 clearInterval(obj.timer) obj.timer = setInterval(function () { //步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整 var step = Math.ceil((target - obj.offsetLeft) / 10) if(obj.offsetLeft == target){ //停止动画 本质是停止定时器 clearInterval(obj.timer) } // 获取是offsetLeft 赋值是style.left // 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px' },15) } var span = document.querySelector('span') var btn = document.querySelector('button') //调用函数 btn.addEventListener('click',function(){ animate(span,500) }) // 匀速动画 就是 盒子是当前的位置 + 固定的值 10 // 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 ) </script> </body> </html>
缓动动画原理
点击按钮, 可以让div在两个位置之间移动
<!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>缓动动画原理</title> <style> div{ position: absolute; left: 0px; width: 100px; height: 100px; background-color: lightblue; } span{ position: absolute; left: 0px; top: 200px; display: block; width: 150px; height: 150px; background-color: pink; } </style> </head> <body> <button class="btn500">点击BOM盒移动500</button> <button class="btn800">点击BOM盒移动800</button> <span>BOM</span> <script> //简单动画函数封装obj目标对象 target 目标位置 //给不同的元素指定不同的定时器 function animate(obj, target) { // 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器 // 解决方案就是 让我们元素只有一个定时器执行 // 先清除以前的定时器 只保留当前的一个定时器执行 clearInterval(obj.timer) obj.timer = setInterval(function () { //步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整 // var step = Math.ceil((target - obj.offsetLeft) / 10) var step = ((target - obj.offsetLeft) / 10) // step > 0 向上取整 step < 0 向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step) if(obj.offsetLeft == target){ //停止动画 本质是停止定时器 clearInterval(obj.timer) } // 获取是offsetLeft 赋值是style.left // 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px' },15) } 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) }) // 匀速动画 就是 盒子是当前的位置 + 固定的值 10 // 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 ) </script> </body> </html>
缓动动画添加回调函数
移动后可以改变div的背景颜色
<!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>缓动动画添加回调函数</title> <style> div{ position: absolute; left: 0px; width: 100px; height: 100px; background-color: lightblue; } span{ position: absolute; left: 0px; top: 200px; display: block; width: 150px; height: 150px; background-color: pink; } </style> </head> <body> <button class="btn500">点击BOM盒移动500</button> <button class="btn800">点击BOM盒移动800</button> <span>BOM</span> <script> //简单动画函数封装obj目标对象 target 目标位置 //给不同的元素指定不同的定时器 function animate(obj, target, callBack) { console.log(callBack); // 当我们不断的点击按钮 这个元素的速度会越来越快 因为开启了太多的定时器 // 解决方案就是 让我们元素只有一个定时器执行 // 先清除以前的定时器 只保留当前的一个定时器执行 clearInterval(obj.timer) obj.timer = setInterval(function () { //步长值写到定时器的里面 // 把步长值改为整数 不要出现小数的问题 Math.ceil() 往上取整 // var step = Math.ceil((target - obj.offsetLeft) / 10) var step = ((target - obj.offsetLeft) / 10) // step > 0 向上取整 step < 0 向下取整 step = step > 0 ? Math.ceil(step) : Math.floor(step) if(obj.offsetLeft == target){ //停止动画 本质是停止定时器 clearInterval(obj.timer) //回调函数写到定时器结束里面 if(callBack){ //调用函数 callBack() } } // 获取是offsetLeft 赋值是style.left // 把每次加1 这个步长值 改为一个慢慢变小的值 (目标值 - 现在的位置) / 10 obj.style.left = obj.offsetLeft + step + 'px' },15) } 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, function(){ span.style.backgroundColor = 'red' }) }) // 匀速动画 就是 盒子是当前的位置 + 固定的值 10 // 缓动动画就是 盒子的当前位置 + 变化的值( (目标值 - 现在的位置) / 10 ) </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
