javaScript--animate函数
一、思路
1、获取目标值
2、再获取初始值
3、得到总距离
4、定义定时器的执行间隔
5、获取时间
6、得到总次数
7、总距离/总次数 = 步长
8、使用setInterval不停地改变dom元素的每一个css值 让元素不停地改变样式 造成动画的错觉。
9、定义一个计数器 每改变一次样式就累加一次 直到计数器大于等于总次数 此时说明执行完毕
10、强行拉到终点
11、停表
12、执行回调函数
二、代码
/* * animate 函数能够实现动画 * @dom 要运动的元素 * @json css样式对象 * @time 时间 以毫秒值为单位 * callback 回调函数 */ function animate(dom, json, time, callback) { // 定义定时器的间隔 var interval = 20; // 定义总次数 var allCount = time / interval; // 获取初始值 // 因为不确定json中有多少条css样式 所以不能写具体的代码条数 // 使用对应的思想 所以 我们也定义一个json var nowJSON = {}; // 使用for循环获取初始值 for(var i in json) { // 强制性的给nowJSON添加属性 并赋值 if(window.getComputedStyle) { nowJSON[i] = parseInt(getComputedStyle(dom)[i]); } else { nowJSON[i] = parseInt(dom.currentStyle[i]); } } // 定义步长json var stepJSON = {}; for(var i in json) { stepJSON[i] = (json[i] - nowJSON[i]) / allCount; } // 定义计数器 var count = 0; var timer = setInterval(function() { count++; // 改变dom元素的css样式 for(var i in json) { dom.style[i] = nowJSON[i] + stepJSON[i] * count + "px"; } // 判断是否执行完毕 if(count >= allCount) { // 停表 clearInterval(timer); // 拉终 for(var i in json) { dom.style[i] = json[i] + "px"; } // 回调函数执行 callback && callback(); } }, interval); }