JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数
Posted jane_panyiyun
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数相关的知识，希望对你有一定的参考价值。
封装缓动（变速）动画函数---增加任意多个属性&增加回调函数
回掉函数fn，在所有元素到达目的位置后，判断是否传入一个函数，有就调用 if(fn){fn()};
这样一次点击，产生多个动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { margin-top: 30px; width: 200px; height: 100px; background-color: green; position: absolute; left: 0; top: 0; } </style> </head> <body> <input type="button" value="移动到400px" id="btn1" /> <div id="dv"> </div> <script src="common.js"></script> <script> //点击按钮,改变宽度到达一个目标值,高度到达一个目标值 //获取任意一个元素的任意一个属性的当前的值---当前属性的位置值 function getStyle(element, attr) { return window.getComputedStyle ? window.getComputedStyle(element, null)[attr] : element.currentStyle[attr] || 0; } //element---元素 //json---对象---多个属性及多个目标值 //fn---函数 function animate(element, json, fn) { clearInterval(element.timeId); element.timeId = setInterval(function () { var flag = true; for (var attr in json) { var current = parseInt(getStyle(element, attr)); var target = json[attr]; var step = (target - current) / 10; step = step > 0 ? Math.ceil(step) : Math.floor(step); current += step; element.style[attr] = current + "px"; if (current != target) { flag = false; } } if (flag) { clearInterval(element.timeId); if (fn) { fn(); } } //测试代码 console.log("目标：" + target + "，当前：" + current + "，每次移动的步数" + step); }, 20) } my$("btn1").onclick = function () { var json1 = { "width": 400, "height": 200, "left": 500, "top": 80 }; animate(my$("dv"), json1, function () { var json2 = { "width": 200, "height": 100, "left": 200, "top": 120 }; animate(my$("dv"), json2, function () { var json3 = { "width": 400, "height": 300, "left": 300, "top": 80 }; animate(my$("dv"), json3); }); }); }; </script> </body> </html>
以上是关于JS---封装缓动（变速）动画函数---增加任意多个属性&增加回调函数的主要内容，如果未能解决你的问题，请参考以下文章