一个通用的js动画函数

最新推荐文章于 2024-08-03 17:05:14 发布

kissssheaven

最新推荐文章于 2024-08-03 17:05:14 发布

阅读量366

点赞数

分类专栏： JavaScript学习文章标签： javascript 动画

本文链接：https://blog.csdn.net/kissssheaven/article/details/49003881

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<pre name="code" class="javascript">此函数可以实现元素带有长度单位属性变化或者透明度变化的动画效果

function animate(obj, json, fn) {
	clearInterval(obj.timer);
	obj.timer = setInterval(function() {
		var bStop = true;	//假设所有运动都停止了
		for(attr in json) {
			var iCur = 0;
			if(attr == 'opacity') {
				iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);
			} else {
				iCur = parseInt(getStyle(obj, attr));
			}
			var iSpeed = (json[attr] - iCur)/8;
			iSpeed = iSpeed>0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
			
			if(iCur != json[attr]) {
				bStop = false;
			} 
			if(attr == 'opacity') {
				obj.style.filter = 'alpha(opacity:'+ (iCur + iSpeed) +')';
				obj.style.opacity = (iCur + iSpeed)/100;
			} else {
				obj.style[attr] = iCur + iSpeed + 'px';
			}	
		}
		if(bStop) {
			clearInterval(obj.timer);
			if(fn) {
				fn();
			}
		}
	},30);
}
function getStyle(obj, attr) {
	if(obj.currentStyle) {
		return obj.currentStyle[attr];
	} else {
		return getComputedStyle(obj,false)[attr];
	}
}