最近为了熟悉js动画效果,自己封装了一个简单的动画库
这里主要是使用了定时器来让动画,一步步的变换
这里值得注意的是,为了在结束的时候所有属性都能执行完成,我们在定时器中,一个属性执行完成之后我们从传过来的json中删除这个属性,一直到最后一个结束之后执行清除定时器以及执行回调函数
//这里是封装的动画--支持同时执行
function animate(obj, arrJson, callBack) {
clearInterval(obj.timer);
var current = 0;
obj.timer = setInterval(function () {
for (let attr in arrJson) {
if (attr != null && getStyle(obj, attr) != null) {
if (attr == 'opacity') {
current = Math.round(parseInt(getStyle(obj, attr) * 100)) || 0;
} else {
current = parseInt(getStyle(obj, attr));
}
//这里让step随着当前位置来变换,来实现动画执行速度的变换
var stepLen = (arrJson[attr] - current) / 10;
stepLen = stepLen > 0 ? Math.ceil(stepLen) : Math.floor(stepLen);
if (current == parseInt(arrJson[attr])) {
let arrCount = Object.keys(arrJson).length;
if (arrCount == 1) {
console.log('完成',arrCount,arrJson);
clearInterval(obj.timer);
if (callBack) {
callBack();
}
return;
}else{
delete arrJson[attr];
console.log(arrCount,arrJson);
}
}
//这里主要是有的需要单位有的不需要,这里进行区分一下
if (attr == 'opacity') {
obj.style[attr] = (current + stepLen) / 100;
} else {
obj.style[attr] = current + stepLen + 'px';
}
}else{
continue;
}
}
}, 30);
}
//此处是获取元素中属性的值--兼容写法
function getStyle(element, attr) {
if (element.currentStyle) {
return element.currentStyle[attr];
} else {
return getComputedStyle(element, false)[attr];
}
}
使用方法:
var btn = document.querySelector('.btn');
var box = document.querySelector('.box');
//注意这边的值会被处理成整数,opacity[0,100]
var json = {'left':100,'top':200,'width':200,'height':101,'opacity':60};
btn.addEventListener('click',function(){
animate(box,json,function(){
console.log('动画结束');
});
});