雨夜带刀's Blog

javascript动画类库easyAnim

记得几年前刚接触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!' );
	});

easyAnim的方法:

show( duration, easing, callback ) / hide( duration, easing, callback )

无参数的情况下,只改变元素的显式模式为block,有duration参数的时候,通过改变元素的width、height、opacity、padding、borderWidth来动态的显示/隐藏元素。在jQuery中这个方法的使用频率很高,并且都是没有duration参数的情况下,jQuery会通过判断浏览器默认样式下元素的显式模式来显示元素,比如某元素在浏览器默认样式的情况下显示模式为inline,那么jQuery将会在show的时候将元素的显示模式设置成inline。这种判断浏览器默认显示模式的方法也有弊端,如果想将inline元素显示为block的时候就会发生意外的结果,所以如果是这种情况最好是直接改变元素的样式而不是使用show,正是因为这样,easyAnim没有判断元素的浏览器默认样式。

slideDown( duration, easing, callback ) / slideUp( duration, easing, callback )

通过改变元素的height、paddingTop、paddingBottom、borderTopWidth、borderBottomWidth来动态地显示/隐藏元素。jQuery的slide没有将borderTopWidth、borderBottomWidth算进来,kissy的slide只有height,甚至没有paddingTop、paddingBottom,如果元素有这2个CSS属性那么动画看起来会很别扭。

slideToggle( duration, easing, callback )

slideToggle会判断当前元素是否隐藏,如果是隐藏状态,将调用slideUp,如果是非隐藏状态,将调用slideDown。

fadeIn( duration, easing, callback ) / fadeOut( duration, easing, callback )

通过改变元素的opacity来显示和隐藏元素。

custom( props, duration, easing, callback )

自定义动画的方法。easyAnim除了支持常见的CSS属性以外还支持borderWidth、backgroundColor、color、borderColor的动画。

delay( time )

该方法为延时器,参数time为number类型,可以设置动画在多久后才执行。

stop( clear, end )

stop方法有2个参数,参数类型都为布尔值,clear为清除队列,如果没有动画队列设置该参数无效,如果有动画队列,并且clear为true,那么将清除元素中所有的动画队列。end为false时立即停止当前队列的动画,为true时将立即执行当前动画队列的最后一帧,不论是false还是true,如果该元素还有未执行完的动画队列(clear为false),将继续执行下一个队列的动画。默认情况下clear和end都为false。

easyAnim方法中的几个常用的参数:

duration String & Number 动画持续的时间,3个常规的速度fast,defaults,slow,也支持数字参数如:1000 单位为毫秒。默认为defaults。

props Object 用于自定义动画,最后一帧的CSS属性和属性值,可以是单独的属性和属性值:

{ width : '50px' }

也可以是集合:

{ height : '50px', left : '200px' }

如果是集合所有列出的属性将同时进行动画,注意书写规范,属性一定要用JS的驼峰式写法如:backgroundColor,属性值有单位的一定带单位。

easing String & Function 动画的tween算法。该参数可以是字符串也可以是自定义的函数,如果是字符串easyAnim本身就集成了不少常用的优雅的算法公式(jQuery需要引用额外的插件easing),无需借助插件就可以直接调用你喜欢的效果。由于easyAnim实现动画的核心方法与jQuery有区别,所以两者的算法不能通用,但是和kissy的是通用的。easyAnim默认使用的算法:

easeBoth : function (t) {
	return (t *= 2) < 1 ?
		.5 * t * t :
		.5 * (1 - (--t) * (t - 2));
};

easyAnim其他的算法:linear(匀速运动)、easeIn、easeOut、easeInStrong、easeOutStrong、easeBothStrong、easeOutQuart、easeInOutExpo、easeOutExpo、swingFrom、swingTo、backIn、backOut、bounce共15种。

callback Function 动画执行完后执行的回调函数。

8月31日更新至1.1,加入了缓存系统,尽量避免直接在动画元素中存储数据而引起的内存泄露。

下载:http://stylechen.com/wp-content/uploads/download/easyanim.zip

原载于:雨夜带刀's Blog
本文链接:http://stylechen.com/easyanim.html
如需转载请以链接形式注明原载或原文地址。

“javascript动画类库easyAnim”目前已有 12 条评论

发表评论:

  • *
  • *
头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。