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);
}

最后

以上就是轻松鼠标为你收集整理的javaScript--animate函数的全部内容，希望文章能够帮你解决javaScript--animate函数所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。