animate函数封装
前端
0
351
0
发表于: 2020-08-13 23:00:11
简介: 暂无~
animate封装
话不多说,直接上代码:
/**
* obj 必选,要操作的dom对象
* json 必选,{},要操作属性,如果是opacity,范围还是0-1;
* interval 必选,时间间隔
* callback 可选,回调函数
*/
function animate(obj, json, interval, callback) {
clearInterval(obj.timer);
if (json.hasOwnProperty('opacity')) {
json['opacity'] = json['opacity'] * 100
}
obj.timer = setInterval(function () {
console.log('setInterval');
var flag = true;
for (var attr in json) {
var now = 0;
if (attr === 'opacity') {
// 获取原本的opacity是个小数,直接parseInt结果是0,因此这里给它扩大100倍再parseInt
now = parseInt(getStyle(obj, attr) * 100);
}
else {
now = parseInt(getStyle(obj, attr));
}
// step是每次变化的步长,步长越大(即stepNum越小),动画总时长越短
let stepNum = 6
var step = (json[attr] - now) / stepNum
// 计算step的时候,如果step是正零点几的时候让他等于1,如果step是负零点几的时候,让他等于0
step = step > 0 ? Math.ceil(step) : Math.floor(step);
var sum = now + step;
if (attr == 'opacity') {
//前面扩大了几倍,这里就要缩小几倍
obj.style.opacity = sum / 100;
} else {
obj.style[attr] = sum + 'px';
}
if (now !== sum) {
// 只要有一个没有运动到位就不会清除定时器
flag = false;
}
// 不能加else,否则只要有一项完成了,就清除定时器了
// else{
// flag = true
// }
}
if (flag) {
clearInterval(obj.timer);
// 如果有传回调函数就调用回调函数
callback && callback();
}
}, interval)
}
function getStyle(obj, name) {
if (window.getComputedStyle) {
// 非ie
return window.getComputedStyle(obj, null)[name];
}
else {
// ie
return obj.currentStyle[name];
}
}
最后更新于:2021-02-16 21:15:29
欢迎评论留言~
0/400
支持markdownComments | 0 条留言
登录
按时间
按热度
目前还没有人留言~