Option 配置项

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

1. Duration 动画执行时间

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

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

2. Easing 缓动效果

2-1. 默认 5 种缓动方式

  • jQuery 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 教程
JavaScript
/* 标准写法 */
$element.velocity({ width: 50 }, { easing: "easeInSine" });
/* 或 */
$element.velocity({ width: 50 }, "easeInSine");
JavaScript
/* 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 ]);

2-2. 缓动可应用于单个属性

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

2-3. 自定义缓动函数 (Advanced)

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

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

3. 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 演示了这个过程

JavaScript
// 自定义队列，这里并不会立即执行
$("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反向动画指令，不能和队列一起使用。

4. Begin & Complete & Progress 回调函数

4-1. Begin

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

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

4-2. Complete

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

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

4-3. Progress

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

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

请在浏览器控制台中查看（F12-Console）：

开始

5. mobileHA 移动端硬件加速

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

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

6. Loop 动画循环执行

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

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

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

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

7. Delay 动画延迟执行

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

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

8. Display & Visibility

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

JavaScript
/* 动画结束后 元素 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 选项都将被忽略。

文档导航