velocity自定义动画
话说好久没有写博客了，零星的整理了一些东西，没有形成系统，所以也没有在这里记录。
废话不多说了，进入今天的正题。不知道大家是否记得之前写过的一篇文章《制作炫酷的专题页面》，里面提到velocity.js可以实现高效的动画方式。并且支持原生JS和jquery或者zepto的结合，让我们方便的使用动画，并且能够方便的监听元素的动画状态。
我们可以通过提供的Velocity方法对元素的css属性进行改变，如：宽、高，位置等，同时还提供了begain、complele等回调函数便于监听元素的动画状态。与此同时，velocity.js提供了一种快速使用动画的方式—UI Pack。
UI Pack提供了多种动画方式，如：callout.bounce、callout.shake、callout.flash等等，可以方便我们快速的完成元素的动画。与此同时，他提供了一个方法—Velocity.RegisterEffect，可以方便的注册新的动画方式，便于用户自定义一些很炫酷的动画，自己快速使用。
这里说一下RegisterEffect函数的参数是做什么用的。
Velocity.RegisterEffect(name, parms);
name：字符串，自定义动画名称
parms：对象
{
defaultDuration: 0,
calls: [],
reset: {}
}
其中，defaultDuration是默认的动画时长，calls是一个二维数组，存储动画序列，reset设置动画的初始状态，在动画执行完毕后，会恢复到reset状态。calls中子元素的结构是：[properties, duration, options]，properties是一个对象，用于设置元素的css属性值，duration指的是这部分属性变化需要的时间长度；options指的其他额外的属性，比如：easing、delay、complete等等。
需要注意的是：
- properties操作的元素css属性和原生的属性右细微的差别，比如：blur，是用来设置模糊程度的，直接写成{blur: 10}即可，不需要写成filter...类似这种情况还有一些，需要在实现的时候注意一下
- duration的值是百分比，意思是defaultDuration的百分比，并且使用者可以覆盖初始化的值
- options可以设置额外的配置，比如执行这个动画的类型：linear还是ease-in-out等等
下面来一个例子：
Velocity.RegisterEffect('shake', {
defaultDuration: 800,
calls: [
[ { translateX: -11, opacity: 1}, 0.125 ],
[ { translateX: 11 }, 0.125 ],
[ { translateX: -11 }, 0.125 ],
[ { translateX: 11 }, 0.125 ],
[ { translateX: -11 }, 0.125 ],
[ { translateX: 11 }, 0.125 ],
[ { translateX: -11 }, 0.125 ],
[ { translateX: 0 }, 0.125 ]
]
})；
$element.velocity(’shake');
这个例子完成了振动的效果，就是左右摇摆。
我们发现，使用这种方式注册新的动画很方便，这样可以自己实现一些小动画，然后需要的时候可以直接使用，不需要每次都做重复的工作。同时UI Pack也存在的一些问题：
- 动画名称过长，语意性差
- 使用UI Pack的动画，loop属性会失效
- 无法监听动画完成时机
这些问题，我们接下来会想办法解决。
目前线上我们用的比较多的是css3动画，使用简单，操作方便受到开发者的喜欢。css3库中，使用比较多的当属animation.css和magic.css了，两个加起来提供了将近两百种动画类型，基本上可以解决我们的动画需求。css动画存在一个严重的问题，同一个元素无法同时执行两种动画，我们也无法将两种动画作为序列进行执行。另外我们也无法很简单的监听CSS3动画是否执行完毕。
使用velocity可以解决css3存在的这些问题，并且可以实现更炫的效果。 后续会进行讲解说明，敬请期待！
