目录
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
, tweenValue
5个参数:
- 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
选项都将被忽略。