Velocity.js实现动画序列的三种方法

来源:互联网 发布:医学论文造假 知乎 编辑:程序博客网 时间:2024/04/29 04:40

Velocity.js实现动画序列的三种方法

velocity.js该插件兼容IE8和Android 2.3(兼容性非常好)

用velocity.js插件实现动画序列所需要用到的js库有:

jquery.js 、  velocity.min.js 、 velocity.ui.min.js

在利用velocity.js插件制作动画序列时,需要同时引入这三个库文件。


第一种方法:

index.html代码:



velocity.js代码:


Id为div1的盒子,定义动画内容为,宽度变化为400px,动画持续时间为1000ms。

在id=div1的盒子的动画执行完成之后,开始执行id=div2的盒子的动画,动画内容与div1盒子的动画相同,都是宽度的变化。


如果想让他们同时动画,则需分开定义:


方法一代码复用率不高。


方法二:定义动画序列


这样就增加了代码的复用性


方法三:当鼠标移入到div1盒子上时,盒子左右晃动


callout.shake是velocity.js预定义的动画,可以直接调用


自定义动画:鼠标移入,div盒子有脉动的效果



注:RegisterEffect 与 RegisterUI 的效果差不多

自定义的动画,一次定义多次使用。





0 0