velocity自定义动画

来源:互联网 时间:1970-01-01

话说好久没有写博客了,零星的整理了一些东西,没有形成系统,所以也没有在这里记录。

废话不多说了,进入今天的正题。不知道大家是否记得之前写过的一篇文章《制作炫酷的专题页面》,里面提到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存在的这些问题,并且可以实现更炫的效果。


相关阅读:
Top