javascript动画类库easyAnim

发表于 5年以前 | 总阅读数：2035 次

记得几年前刚接触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
如需转载请以链接形式注明原载或原文地址。