JS动画,实质是对DOM样式的改变。只要把主流浏览器DOM元素的属性方法搞清楚,做JS动画并不算难。网上也有很多封装好的JS动画库,但大多因为功能过于完善,而至于代码量大动辄过千行,不宜在小项目中使用。这里自己封装了一个很轻量的动画库,主要功能都已实现。难免有疏漏之处,还请大家多多指教。

   这里先说明一下功能和用法,以及注意点,随后是一个很简单的可运行示例。

用法及注意事项:
	anim(elemId, cssObj, time, animType, funObj)
	参数说明:
		elemId (必选)需要施加动画效果的元素id
		cssObj (必选)动画结束时的样式,对象类型,键值对形式,
			其中键是能直接用在JS中的“驼峰”形式的css属性,而不是原来的css属性。
			例如:{ marginLeft: '200px', top: '200px', borderWidth: '8px'}
		time (必选)动画持续时间(单位ms)
		animType (可选)默认为线性变化,代码里的Tween类型包含可选的其他参数
		funObj (可选)如果要此选项,需要加入开始和结束时候执行的函数。
			形如:{ el为elemId所指向的元素
                start: function (el) { el.innerHTML = 'start!'; }, 
                complete: function (el) { el.innerHTML = 'Completed!'; }
            }
	
	几点注意事项:
		1、没有做低版本浏览器兼容,支持IE8+、FF、chrome、safari、opera
		2、注意用能直接用在JS中的“驼峰”形式的css属性(本来应把css转“驼峰”形式,
			但是基本所有JS程序员都能直接写出驼峰形式,所以没转)
		3、如果需要把动画应用到绝对定位(position:absolute;)元素上,
			需要注意在这些元素上设置CSS的方法。
			例如:设置top和marginTop,对于绝对定位元素,应该设置top而不是marginTop,
				更不应该将二者混合使用,因为二者的参考点是不一样的,同时设置很容易造成混乱。
				所以,这里也不支持同时设置二者。
				其他相似的同理(left和marginLeft、right和marginRight)
				同时设置top和bottom、left和right也不支持。
		4、引用了Tween缓动算法,支持线性、渐入渐出等多种变化方式。
		5、“动画队列”功能尚未实现,此版本为初级版本,疏漏之处还请多多指正。