动画实现原理
核心原理: 通过定时器setInterval()不断移动盒子位置
- 获得盒子当前位置
- 让盒子在当前位置加上相应移动距离
- 利用定时器不断重复这个操作
- 加一个结束定时器的条件
- 注意此元素需要添加定位,才能使用element.style.left
- 运行效果是一个长宽都为100px的盒子在网页上平滑移动
当运行距离大于400px时停止移动
<!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; } </style> </head> <body> <div></div> <script> var div = document.querySelector('div') var timer = setInterval(function () { if(div.offsetLeft >= 400){ //停止动画 本质是停止定时器 clearInterval(timer) } // 获取是offsetLeft 赋值是style.left div.style.left = div.offsetLeft + 1 + 'px' },30) </script> </body> </html>
动画的函数封装
<!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> <div></div> <span>BOM</span> <script> //简单动画函数封装obj目标对象 target 目标位置 function animate(obj, target) { var timer = setInterval(function () { if(div.offsetLeft >= target){ //停止动画 本质是停止定时器 clearInterval(timer) } // 获取是offsetLeft 赋值是style.left obj.style.left = obj.offsetLeft + 1 + 'px' },30) } var div = document.querySelector('div') var span = document.querySelector('span') //调用函数 animate(div, 200) animate(span, 100) </script> </body> </html>
给不同对象添加不同定时器
<!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 () { if(obj.offsetLeft >= target){ //停止动画 本质是停止定时器 clearInterval(obj.timer) } // 获取是offsetLeft 赋值是style.left obj.style.left = obj.offsetLeft + 1 + 'px' }, 30) } var div = document.querySelector('div') var span = document.querySelector('span') var btn = document.querySelector('button') //调用函数 animate(div, 200) btn.addEventListener('click',function(){ animate(span,100) }) </script> </body> </html>
不积跬步无以至千里 不积小流无以成江海
