JS——缓慢动画封装
在知道如何获取内嵌式和外链式的标签属性值之后，我们再次封装缓慢动画：
单个属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { position: absolute; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <button>运动到400</button> <button>宽度变为400</button> <div></div> <script> var btnArr = document.getElementsByTagName("button"); var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () { animate(div, "left", 400); } btnArr[1].onclick = function () { animate(div, "width", 400); } //参数变为3个 function animate(ele, attr, target) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //四部 var leader = parseInt(getStyle(ele, attr)) || 0;//获取值可能含有px，我们只取数字部分parseInt() //1.获取步长 var step = (target - leader) / 10; //2.二次加工步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.赋值 ele.style[attr] = leader + "px"; //4.清除定时器 if (Math.abs(target - leader) <= Math.abs(step)) { ele.style[attr] = target + "px"; clearInterval(ele.timer); } }, 25); } //兼容方法获取元素样式 function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </body> </html>
多个属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { position: absolute; top: 40px; left: 0px; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <button>运动到400</button> <div></div> <script> var btnArr = document.getElementsByTagName("button"); var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () { var json = {"left": 100, "top": 200, "width": 300, "height": 200}; animate(div, json); } //参数变为2个，将属性atrr和值都存储到json中 function animate(ele, json) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值，分别单独处理json //attr == k(键) target == json[k](值) for (var k in json) { //四部 var leader = parseInt(getStyle(ele, k)) || 0; //1.获取步长 var step = (json[k] - leader) / 10; //2.二次加工步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 // if (json[k] !== leader) { // bool = false; // } if (Math.abs(json[k] - leader) > Math.abs(step)) { bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if (bool) { for (k in json) { ele.style[k] = json[k] + "px"; } clearInterval(ele.timer); } }, 25); } //兼容方法获取元素样式 function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </body> </html>
回调函数
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } div { position: absolute; top: 40px; left: 0px; width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <button>运动到400</button> <div></div> <script> var btnArr = document.getElementsByTagName("button"); var div = document.getElementsByTagName("div")[0]; btnArr[0].onclick = function () { var json1 = {"left": 100, "top": 200, "width": 300, "height": 200}; var json2 = {"left": 0, "top": 40, "width": 100, "height": 100}; animate(div, json1, function () { animate(div, json2); }); } //参数变为2个，将属性atrr和值都存储到json中 function animate(ele, json, fn) { //先清定时器 clearInterval(ele.timer); ele.timer = setInterval(function () { //开闭原则 var bool = true; //遍历属性和值，分别单独处理json //attr == k(键) target == json[k](值) for (var k in json) { //四部 var leader = parseInt(getStyle(ele, k)) || 0; //1.获取步长 var step = (json[k] - leader) / 10; //2.二次加工步长 step = step > 0 ? Math.ceil(step) : Math.floor(step); leader = leader + step; //3.赋值 ele.style[k] = leader + "px"; //4.清除定时器 //判断: 目标值和当前值的差大于步长，就不能跳出循环 //不考虑小数的情况：目标位置和当前位置不相等，就不能清除清除定时器。 // if (json[k] !== leader) { // bool = false; // } if (Math.abs(json[k] - leader) > Math.abs(step)) { bool = false; } } console.log(1); //只有所有的属性都到了指定位置，bool值才不会变成false； if (bool) { for (k in json) { ele.style[k] = json[k] + "px"; } clearInterval(ele.timer); //所有程序执行完毕之后执行回调函数 //现在只有传递了回调函数，才能执行 if (fn) { fn(); } } }, 25); } //兼容方法获取元素样式 function getStyle(ele, attr) { if (window.getComputedStyle) { return window.getComputedStyle(ele, null)[attr]; } return ele.currentStyle[attr]; } </script> </body> </html>
