中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!

中午做了几个紧急的BUG Fix,已经支持火狐,和Css Hack,请大家放心大胆的用吧 

 

本周原本要接着KitJs的高级事件继续写下去的,不过鼠标手势还有一些技术问题需要解决,暂不放出。本周我们先来说说KitJs的Animation这个类。

demo地址:http://xueduany.github.com/KitJs/KitJs/demo/Animation/demo.html

KitJs官网:http://xueduany.github.com/KitJs

DOC地址:http://xueduany.github.com/jsdoc/out/$Kit.Animation.html

源代码:https://github.com/xueduany/KitJs

(一)为什么要单独搞一个animation类?

说实话,我用了mooltools,也用了jQuery等很多Css动画类,但是感觉用的不爽,太复杂,主要集中在一下方面

1. 动画效果的timeout基本是针对单个dom node,内部实现也就是一个interval控制一个节点。

2. 动画串联方式不自由,基本上,他会让你把一些需要实现的动画,放在一个什么队列,然后依次执行,要想在队列中间阻塞火车插入一段匿名方法不太方便

3. 不支持Css3属性,比如-webkit-tranform,3D旋转等等

*4. 有的类库居然还不支持颜色渐变。。。这么简单的东西。。。

(二)KitJs Animation的优点

1. 多node,一起动,无需设置起点状态,只需要设置终点状态,即可实现,兄弟们从四面八风冲一点集中的效果。

2. 动画串联非常方便,直接通过匿名函数链的方式,链接任意匿名函数,随便你做什么都行

3. 支持Css3属性,支持-webkit-transform,支持3D旋转,支持颜色渐变

4. 支持滚动条scrollTop,scrollLeft

(三)Demo

先来点干货,我们要实现一个动画,一般需要设置的参数有

el : ".test1"  什么node需要变化,直接传递一个Css3 Selector神马是最方便的了

duration: 300 动画持续时间

要变成一个什么样子,传递一个json对象是最合适的了

to : {
                            'background-color' : 'rgba(255,255,255,0.5)',
                            'color' : '#000000',
                            '-webkit-transform' : 'translateY(100px) translateX(100px) scale(1)'
                        }

fx: $kit.anim.Fx.easeOutQuad 动画函数,需要什么样子的动画效果就要靠他了

基本上上面三个就满足基本要求了,可能你还需要以下参数

动画初始状态,也是一个css的json

from : {
                            'background-color' : 'rgba(0,0,0,1)',
                            'color' : '#ffffff',
                            '-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
                        }

动画结束了干嘛呢?弄一个匿名函数,随便你干嘛,想干嘛就干嘛,当然你可以在匿名函数里面再加一个动画

then : function() {

    …

}

除了以上参数,还有一些,你可能基本不需要用到

timeSeg : 17,动画间隔

等等,其他参数你可以再https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/anim.js看到

其实,对于一个动画效果,来说,无非两个最重要的事情,就是开始什么样子,然后要变成什么样子

我们可以简洁的抽象为开始是一个Css状态,然后变成另外一个Css状态,

写法为

$kit.anim.motion({
                        duration : 3000,
                        el : ".test1",
                        from : {
                            'background-color' : 'rgba(0,0,0,1)',
                            'color' : '#ffffff',
                            '-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
                        },
                        to : {
                            'background-color' : 'rgba(255,255,255,0.5)',
                            'color' : '#000000',
                            '-webkit-transform' : 'translateY(100px) translateX(100px) scale(1)'
                        },
                        then : function() {
                            $kit.anim.motion({
                                duration : 3000,
                                el : ".test1",
                                to : {
                                    'background-color' : 'rgba(0,0,0,1)',
                                    'color' : '#00c700',
                                    '-webkit-transform' : 'translateY(0px) translateX(0px) scale(3)'
                                },
                                then : function() {
                                    $kit.css($kit.el('.test1')[0], {
                                        position : 'static',
                                        '-webkit-transform' : 'scale(1)',
                                        'background-color': '#ccc',
                                        color: 'inherit'
                                    })
                                }
                            });
                        }
                    });

 

from表示初始的Css状态,to表示要变化成为的Css状态,当这段动画结束时,执行then的匿名方法,上面代码就是把队列队列用then参数链接起来,实现动画队列,很清楚明了把

(四)动画方法和参数

DOC地址:http://xueduany.github.com/jsdoc/out/$Kit.Animation.html

依赖关系参考文档,(kitjs符合CommonJs标准,你可以使用requireJs加载以上js)

使用方法为

$kit.anim.motion({

    …

})

的方式,

参数如下

中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!_第1张图片 

(五)额外的福利,fadeIn/fadeOut,slideDown/slideUp

另外kitjs还提供类似jQ的fade动画和slide动画,其中slide动画是基于绝对定位制作的,全浏览器兼容,而不是jQ那种压缩高度比的方式,给你真实的滑动的感觉

中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!_第2张图片 中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!_第3张图片

(六)终止当前动画,或者在上一次动画播放中,开始新的动画

有时候,我们需要在一个动画效果进行中的时候终止,开始新的动画,比如fadeIn,fadeOut两个相关的动画,对于同一个元素当fadeOut到50%的时候,我们又点了fadeIn,这个时候就需要终止fadeOut动画,从当前的状态Css开始fadeIn,

当然kitjs的fadeIn,fadeOut内部已经做了这样的处理

对于自定义的动画怎么做的,

我们看到motion方法提供了一个timeout属性,config.timeout,他可以直接传入一个数字(setInterval返回的句柄是一个不重复的数字id),或者是一个string(在$kit.anim.handleMap会以string为key,保存定义的setInterval的数字句柄)

我们只要在

function a(){

  $kit.anim.motion({

    timeout:’asd’,

  })

}

function b(){

  $kit.anim.motion({

    timeout:’asd’

  })

}

 

指定一样的timeout,既可以实现在动画a进行时候,触发了动画b,会立即停止动画a,开始动画b

(七)动画算法

 

中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!_第4张图片 中文前端UI框架Kit(五)支持Css全属性/Css Hack/Css3属性/颜色渐变的Javascript动画,相比JQuery和Mooltools,功能更为强大,这不是标题党!_第5张图片

 

 

建议直接看代码比较方便,有注释

source code: https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/anim.js#L307

 

(八) 首款支持Css Hack的动画类

 你可以使用_ * +等IE Hack,也可以使用-webkit,-moz等

你可能感兴趣的:(JavaScript)