配置项

优质

小牛编辑

130浏览

2023-12-01

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

执行时间

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

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

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

easing缓动效果

Velocity默认包含5种缓动效果

1、jQuery UI的缓动关键字

"linear"
"swing"
"spring"
"easeInSine"
"easeOutSine"
"easeInOutSine"
"easeInQuad"
"easeOutQuad"
"easeInOutQuad"
"easeInCubic"
"easeOutCubic"
"easeInOutCubic"
"easeInQuart"
"easeOutQuart"
"easeInOutQuart"
"easeInQuint"
"easeOutQuint"
"easeInOutQuint"
"easeInExpo"
"easeOutExpo"
"easeInOutExpo"
"easeInCirc"
"easeOutCirc"
"easeInOutCirc"

2、CSS3缓动关键字

"ease"
"ease-in"
"ease-out"
"ease-in-out"

3、CSS3 贝塞尔曲线

[ 0.17, 0.67, 0.83, 0.67 ]

4、弹簧物理缓动（spring physics）

以2位数组的形式 [ tension, friction ]，tension最大值为500，friction 最大值为20

5、步骤缓动（step easings）

以1位数组的形式使动画通过指定的步骤过渡到结束值

/* 标准写法 */
$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"
});

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

// p：动画完成的百分比（十进制值）
// opts：传递到触发 .velocity() 调用的选项
// tweenDelta：补间
$.Velocity.Easings.myCustomEasing = function (p, opts, tweenDelta) {
  return 0.5 - Math.cos( p * Math.PI ) / 2;
};

动画队列

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

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

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

下面是一个例子

<button id="btn">开始运动</button>
<button id="reset">还原</button>
<div id="test" style="height:100px;width:100px;background:pink;position:absolute;left:0;"></div>
<script src="http://files.cnblogs.com/files/xiaohuochai/jquery-1.10.0.js"></script>
<script src="http://files.cnblogs.com/files/xiaohuochai/velocity.min.js"></script>
<script>
$("#reset").click(function(){
  history.go();
})
$("#btn").click(function(){
  // 执行宽度变为"50px"的动画
  $("#test").velocity({ width: "200px" }, { duration: 3000 });  
  setTimeout(function() {
  /* 1.5秒后 开始并行执行高度变为"50px"的新动画 */
  $("#test").velocity({ height: "200px" }, { duration: 1500, queue: false });
  }, 1500);  
})
</script>

也可以自定义动画队列，但不会立即执行，需要通过dequeue()方法手动执行动画

// 自定义队列，这里并不会立即执行
$("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()

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可以设置是否开始移动端硬件加速，默认值为true，也可以通过设置 mobileHA: false关闭硬件加速

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

Loop动画循环执行

设置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 选项都将被忽略。