velocity--plugins

Plugins 插件

1. UI Pack (velocity.ui.js)

velocity.ui.js 是 velocity.js 的 动画插件（1.8 KB ZIP’ed） 我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js。

velocity.ui 有2个重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允许你将多个 Velocity 动画合并存储到一个自定义数组里，你可以通过引用该数组的名称 在项目中复用， 后者能帮你改进嵌套的动画序列 使得更易于管理。下载 Velocity.ui.js

这里还有个为 AngularJs 用户准备的 UI动画包 velocity-ui-angular（不依赖 jQuery）

1-1. $.Velocity.RunSequence()

你的代码里也许出现下面这种嵌套动画，如果嵌套层次很多时，会难以管理：

JavaScript

$element1.velocity({ translateX: 100 }, 1000, function() {
    $element2.velocity({ translateX: 200 }, 1000, function() {
        $element3.velocity({ translateX: 300 }, 1000);
    });
});

如何解决上面的问题？我们直接用$.Velocity.RunSequence()对上面代码进行重写：
e：element - 表示元素
p：properties - 属性集
o：options - 配置选项

JavaScript

// 将嵌套动画序列储存到一个数组里，很清晰的显示了它们的执行顺序
var mySequence = [
    { e: $element1, p: { translateX: 100 }, o: { duration: 1000 } },
    { e: $element2, p: { translateX: 200 }, o: { duration: 1000 } },
    { e: $element3, p: { translateX: 300 }, o: { duration: 1000 } }
];

// 调用这个自定义的序列名称 还可以在其他地方复用
$.Velocity.RunSequence(mySequence);

1-2. 内置特效

Velocity.ui.js 里内置了很多常用的动画特效，分为两类：callout 和 transition。查看各种特效的效果

这里列出了所有的特效名：

• callout.bounce
• callout.shake
• callout.flash
• callout.pulse
• callout.swing
• callout.tada
• transition.fadeIn
• transition.fadeOut
• transition.flipXIn
• transition.flipXOut
• transition.flipYIn
• transition.flipYOut
• transition.flipBounceXIn
• transition.flipBounceXOut
• transition.flipBounceYIn
• transition.flipBounceYOut
• transition.swoopIn
• transition.swoopOut
• transition.whirlIn
• transition.whirlOut
• transition.shrinkIn
• transition.shrinkOut
• transition.expandIn
• transition.expandOut
• transition.bounceIn
• transition.bounceUpIn
• transition.bounceUpOut
• transition.bounceDownIn
• transition.bounceDownOut
• transition.bounceLeftIn
• transition.bounceLeftOut
• transition.bounceRightIn
• transition.bounceRightOut
• transition.slideUpIn
• transition.slideUpOut
• transition.slideDownIn
• transition.slideDownOut
• transition.slideLeftIn
• transition.slideLeftOut
• transition.slideRightIn
• transition.slideRightOut
• transition.slideUpBigIn
• transition.slideUpBigOut
• transition.slideDownBigIn
• transition.slideDownBigOut
• transition.slideLeftBigIn
• transition.slideLeftBigOut
• transition.slideRightBigIn
• transition.slideRightBigOut
• transition.perspectiveUpIn
• transition.perspectiveUpOut
• transition.perspectiveDownIn
• transition.perspectiveDownOut
• transition.perspectiveLeftIn
• transition.perspectiveLeftOut
• transition.perspectiveRightIn
• transition.perspectiveRightOut

下面代码展示了 如何使用内置动画（注意：特效名必须为字符串）：

JavaScript

// 引用了"callout.shake"特效，第一个参数为特效名，第二个参数为可选配置项
$element.velocity("callout.shake", { duration: 600 });

开始

1-3. stagger, drag 和 backwards 选项

velocity.ui 有stagger,drag,backwards 三个可选配置项（注意：这些选项只在调用内置动画特效时 才起作用）

stagger：中文译为"错开"，当遍历一组元素时 (each)， 设置 stagger 为一个毫秒数 (ms) 能让每个元素 依次延迟该毫秒数执行动画，产生一种错开的运动节奏感。看示例：

HTML

<div class="box-stagger">1</div>
<div class="box-stagger">2</div>
<div class="box-stagger">3</div>

JavaScript

// 默认情况下，三个元素会同时运动
// 这里设置了 stagger 为 300 后，每个元素会依次延迟300ms执行动画
$(".box-stagger").velocity("transition.slideLeftBigIn", { stagger: 300 });

1

2

3

开始

drag：遍历一组元素时 (each)，当设置drag: true， 最后一个元素会产生一种类似缓冲的效果，但它和其他元素的动画的duration是一样的：

HTML

<div class="box-drag">1</div>
<div class="box-drag">2</div>
<div class="box-dragr">3</div>

JavaScript

// 最后一个元素产生缓冲效果
$(".box-drag").velocity("transition.slideLeftBigIn", { drag: true });