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

这里还有个为 React 用户准备的动画包 velocity-react

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.* 两类。
下面的 demo 可以查看所有的动画特效：

执行动画
JavaScript
// 第一个参数为特效名，第二个参数为可选配置项
$element.velocity("callout.bounce", { duration: 650 });

所有的特效名：

  • 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

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 });
1
2
3
开始

backwards：中文译为"向后的"，这个选项通常和drag一起使用， 元素会方向从最后一个开始依次延迟执行动画：

HTML
<div class="box-backwards">1</div>
<div class="box-backwards">2</div>
<div class="box-backwards">3</div>
JavaScript
$('.box-backwards').velocity('transition.slideLeftBigIn', {
    stagger: 300,
    backwards: true
});
1
2
3
开始

1-4. $.Velocity.RegisterEffect()

$.Velocity.RegisterEffect()方法允许你注册自定义动画特效，以便在项目中复用，语法如下：

JavaScript
// name：动画特效名称 为字符串类型
// defaultDuration：默认动画执行时间 单位为毫秒(ms)
// calls：动画队列数组，property - 动画属性，durationPercentage - 当前动画所占总时间的百分比 (写成浮点数)，option - 选项
// reset：设置元素在动画开始时的初始值
$.Velocity.RegisterEffect(name, {
    defaultDuration: duration,
    calls: [
        [ { property: value }, durationPercentage, { options } ],
        [ { property: value }, durationPercentage, { options } ]
    ],
    reset: { property: value, property: value }
});

下面是一个使用$.Velocity.RegisterEffect()的例子：

JavaScript
// "callout.customPulse" 只是示例，可以随便命名 比如"superSlide"
$.Velocity.RegisterEffect("callout.customPulse", {
    defaultDuration: 900,
    calls: [
        [ { scaleX: 1.5 }, 0.50 ], // 0.50 为 动画总时间的50%
        [ { scaleX: 1 }, 0.50 ]
    ]
});
// 调用
$element.velocity("callout.customPulse");
开始

还可以使用 链式的写法 注册一系列自定义动画：

JavaScript
$.Velocity
    .RegisterEffect("transition.customFlipXIn", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 1, rotateY: [ 0, -55 ] } ]
        ]
    });
    .RegisterEffect("transition.customFlipXOut", {
        defaultDuration: 700,
        calls: [
            [ { opacity: 0, rotateY: 55 } ]
        ],
        reset: { rotateY: 0 }
    });
// 调用
$element
    .velocity("transition.customFlipXIn")
    .velocity("transition.customFlipXOut", { delay: 1000, display: "none" });

2. VMD

这个插件将 jQuery, Velocity.js 和 Velocity.ui.js 合并为一个文件：

HTML
<script src="https://julian.com/research/velocity/vmd.min.js"></script>
<!-- 或 -->
<script>
    (function(d) { var vmd=d.createElement("script"); vmd.src="https://julian.com/research/velocity/vmd.min.js"; d.body.appendChild(vmd); })(document);
</script>

3. Ember & Misc

运用 Velocity 的一些其他 UI 框架或插件，若你感兴趣就去看看：

  • Ember UI is a UI component library with motion design powered by Velocity.
  • Liquid Fire provides comprehensive Velocity-powered animation.
  • Ember Velocity Mixin is an alternative to Liquid Fire.
  • Tweene is a timeline manipulation library that works on top of Velocity.
  • Bellows is a mobile-first accordion widget that that uses Velocity for its motion.
  • ScrollMagic is standalone scroll animation library that works with Velocity.

文档导航