Velocity.js中文文档

Option 配置项

Velocity 提供了丰富的可选配置项，可以更好的控制动画，你也可以利用这些配置做出炫酷复杂的动画特效。

Duration 动画执行时间

Velocity 的动画执行时间以毫秒为单位，并支持 jQuery 中的动画速度关键字: “slow”,”normal”,”fast”。

$element.velocity({ opacity: 1 }, { duration: 1000 });

// 支持 jQuery 中的动画速度关键字：
$element.velocity({ opacity: 1 }, { duration: "slow" });

Easing 缓动效果

默认 5 种缓动方式

Query UI 的缓动关键字（预定义在 Velocity 源码中）：
“linear”
“swing”
“spring”
“easeInSine”
“easeOutSine”
“easeInOutSine”
“easeInQuad”
“easeOutQuad”
“easeInOutQuad”
“easeInCubic”
“easeOutCubic”
“easeInOutCubic”
“easeInQuart”
“easeOutQuart”
“easeInOutQuart”
“easeInQuint”
“easeOutQuint”
“easeInOutQuint”
“easeInExpo”
“easeOutExpo”
“easeInOutExpo”
“easeInCirc”
“easeOutCirc”
“easeInOutCirc”
CSS3 的缓动关键字：
“ease”
“ease-in”
“ease-out”
“ease-in-out”
CSS3 贝塞尔曲线：
例如：[ 0.17, 0.67, 0.83, 0.67 ]
弹簧物理缓动（spring physics）以2位数组的形式 [ tension, friction ] tension 最大值为 500，friction 最大为20， Spring Physics 示例你可以在这例子中改变数组中的值试试效果

步骤缓动（step easings），以1位数组的形式使动画通过指定的步骤过渡到结束值 Step 示例，这有一篇 step 教程

/* 标准写法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });

/* 或 */
$element.velocity({ width: 50 }, "easeInSine");

/* jQuery UI easings */
$element.velocity({ width: 50 }, "easeInSine");

/* CSS3 easings */
$element.velocity({ width: 50 }, "ease-in");

/* 贝塞尔曲线 */
$element.velocity({ width: 50 }, [ 0.17, 0.67, 0.83, 0.67 ]);

/* 弹簧物理 */
$element.velocity({ width: 50 }, [ 250, 15 ]);

/* step easing */
$element.velocity({ width: 50 }, [ 8 ]);

缓动可应用于单个属性

$element.velocity({
    borderBottomWidth: [ "2px", "spring" ], // border-bottom 使用 "spring"
    width: [ "100px", [ 250, 15 ] ],        // width 使用 spring physics
    height: "100px"
}, {
    easing: "easeInSine" // 默认所有属性使用 "easeInSine"
});

自定义缓动函数 (Advanced)
如果你需要，还可以通过函数的形式注册自定义的缓动效果，函数将被扩展到$.Velocity.Easings对象上

// p：动画完成的百分比（十进制值）
// opts：传递到触发 .velocity() 调用的选项
// tweenDelta：补间
// (官网并没有详细说明如何使用，感兴趣的可以自己去查阅相关资料学习)
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
    return 0.5 - Math.cos( p * Math.PI ) / 2;
};

Queue 动画队列

你可以通过设置queue: false 强制并行执行一个新动画：

JavaScript
// 执行宽度变为"50px"的动画
$element.velocity({ width: "120px" }, { duration: 3000 });

setTimeout(function() {
    /* 1.5秒后 开始并行执行高度变为"50px"的新动画 */
    $element.velocity({ height: "120px" }, { duration: 1500, queue: false });
}, 1500);

也可以自定义动画队列，但不会立即执行，需要通过dequeue()方法手动执行动画，这有个 Demo 演示了这个过程

// 自定义队列，这里并不会立即执行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 执行队列"a"的动画
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 执行队列"b"的动画
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

注意:loop循环选项和reverse反向动画指令，不能和队列一起使用。

Begin & Complete & Progress 回调函数

Begin
begin为动画开始前的回调函数，但在循环模式下（设置了loop选项时），该函数只会在第一次循环前执行一次。

$element.velocity({
    opacity: 0
}, {
    begin: function(elements) { console.log(elements); }
});

Complete
complete为动画结束时的回调函数，在无限循环模式下（设置loop: true）该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3）该回调函数将只会在最后一次循环结束后执行一次。

$element.velocity({
    opacity: 0
}, {
    complete: function(elements) { console.log(elements); }
});

$element.velocity({
    opacity: 0
}, {
    // 动画循环执行3次
    loop: 3,
    // 回调函数将在第3次循环结束后 执行一次
    complete: function(elements) {
        alert("I am hungry！");
    }
});

Progress
progress为动画执行过程中调用的函数，有elements, complete, remaining,start, tweenValue5个参数：

elements：当前执行动画的元素，可以用$(elements)来获取
complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值并不带单位 (%)
remaining：整个动画过程还剩下多少毫秒，该值是递减的
start：动画开始时的绝对时间 (Unix time)
tweenValue：动画执行过程中两个动画属性之间的补间值

$element.velocity({
    opacity: 0,
    tween: 1000 // 可选的
}, {
    duration: 2000,
    progress: function(elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
        console.log(remaining + "ms remaining!");
        console.log("The current tween value is " + tweenValue)
    }
});

// 可以简写这些参数：
$element.velocity({
    tween: [ 0, 1000 ]
}, {
    easing: "spring",
    progress: function(elements, c, r, s, t) {
        console.log("The current tween value is " + t)
    }
});

mobileHA 移动端硬件加速

mobileHA可以设置是否开始移动端硬件加速，默认值为true，你也可以通过设置 mobileHA: false关闭硬件加速。

JavaScript
// 关闭移动端硬件加速
$element.velocity(propertiesMap, { mobileHA: false });

Loop 动画循环执行

用法1:设置loop为一个正整数，比如如设置loop: 2，就可以让动画循环执行2次：

// 循环执行2次（注意：元素height值变化到10em 再从10em变化到初始值 是一次循环）
$element.velocity({ height: "10em" }, { loop: 2 });

如果设置loop: true，可以让动画无限循环执行：

$element.velocity({ height: "10em" }, { loop: true });

Delay 动画延迟执行

和 jQuery 的$.delay()方法一样，动画将会延迟所设定的毫秒后执行：

// 动画将延迟1500毫秒后执行
$element.velocity({ height: "+=10em" }, { delay: 1500 });

Display & Visibility

可以在动画执行结束后动态设置元素的 css 属性:display或visibility：

/* 动画结束后 元素 display 属性设为 "none" */
$element.velocity({ opacity: 0 }, { display: "none" });

/* 动画结束后 元素的 visibility 属性设为 hidden */
$element.velocity({ opacity: 0 }, { visibility: "hidden" });

display 或 visibility 的值可以设为 css 中规定的其他值，比如 display: "inline-block"
注意：当使用reverse方向动画指令时，display 和 visibility 选项都将被忽略。

上一篇: Basics 基础用法下一篇: Command 指令

目录