Velocity.js 中文文档

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.* 两类。
下面的 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 });

开始

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 });

开始

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-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.

Plugins 插件

1. UI Pack (velocity.ui.js)

1-1. $.Velocity.RunSequence()

1-2. 内置特效

1-3. stagger, drag 和 backwards 选项

1-4. $.Velocity.RegisterEffect()

2. VMD

3. Ember & Misc

导航