雨夜带刀

最近将去年写过的easyAnim进行了重构和优化以整合到我的javascript框架中，回过头来发现以前写的代码确实还有很多可以改进的地方，这也证明自己还是有点进步的。趁有点时间，将javascript动画运行的机制和实现的思路整理了一下，算是做个小总结，也希望对有兴趣的人有点帮助。篇幅稍长，看之前请自备瓜子啤酒。

当然这里说的javascript动画是指利用javascript来计算DOM元素的CSS属性值来实现的动画，HTML5和CSS3的发展让WEB中的动画有了更多的可能，但这些看起来比较高级的东西还需要浏览器给力点才行。

解析CSS属性值

理论上，只要CSS的属性值包含了数值，就可以进行动画，事实上，包含了数值的CSS属性值有很多很多，拿最常见的属性来说：

div{ left:100px; }

上面的位置值就包含了数值“100”，要想实现该元素从100px的位置到600px的位置，只要不断的修改该元素的位置值，达到一定的速度就实现了动画，据国外的统计，每25毫秒切换一次画面，就可以实现“动”的效果。

CSS属性值都是字符串，为了方便进行计算，需先将字符串转换成数值，并且很多属性值都包含了单位，所以最好解析成下面这种格式：

'100px' ==> { val : 100, unit : 'px' }

记得几年前刚接触jQuery的时候，就一直叹服于jQuery竟然能如此轻松的实现javascript的动画。前不久想研究下javascript的动画，当时就萌生了自己开发一个javascript动画类库的念头，于是就有了现在的easyAnim。

javascript动画的实现原理看起来很简单：连续改变元素的CSS属性，如：width, height, left, margin等，只要有一定的速度就可以达到动画效果，与动画片的制作原理类似。尽管如此，自己真正动手开发起来并不简单，也从中学到了不少东西。

easyAnim小巧、简洁、易用，API和jQuery的调用几乎一样，熟悉jQuery动画的人甚至不用去看API说明就能轻松使用，jQuery这么高的使用率与其简洁易用的API设计是分不开的。

如何使用easyAnim？

// 引入easyAnim(为了你的网页性能，强烈建议在底部引用)

比如要给元素box添加一个slideUp效果：

easyAnim( 'box' ).slideUp();

easyAnim()接收一个参数，该参数可以是元素的ID也可以是一个DOM对象，将元素实例化后就可以调用easyAnim的动画方法了。easyAnim支持联写，支持动画队列：

easyAnim( 'box' ).slideDown( 'slow' )
	.custom( { left : '500px' }, 600, 'linear' )
	.slideUp( 400, 'easeInStrong' function(){
		alert( 'I am is callback!' );
	});