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存在的这些问题，并且可以实现更炫的效果。后续会进行讲解说明，敬请期待！

posted @ 2015-10-05 20:20 黑MAO 阅读(1651) 评论(0) 编辑收藏举报

刷新页面返回顶部