Velocity.js Begin & Complete & Progress 回调函数
2018年2月5日Begin
begin为动画开始前的回调函数，但在循环模式下（设置了loop选项时），该函数只会在第一次循环前执行一次。
|
1 2 3 4 5 |
$element.velocity({ opacity: 0 }, { begin: function(elements) { alert(<span class="hljs-string">"I love you！"</span>);} }); |
Complete
complete为动画结束时的回调函数，在无限循环模式下（设置loop: true） 该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3） 该回调函数 将只会在最后一次循环结束后 执行一次。
|
1 2 3 4 5 |
$element.velocity({ opacity: 0 }, { complete: function(elements) { alert(<span class="hljs-string">"I love you！"</span>); } }); |
Progress
progress为动画执行过程中调用的函数， 有elements、complete、remaining、start、tweenValue5个参数：
- elements：当前执行动画的元素，可以用$(elements)来获取
- complete：整个动画过程执行到百分之多少，该值是递增的，注意：该值为一个十进制数值 并不带单位 (%)
- remaining：整个动画过程还剩下多少毫秒，该值是递减的
- start：动画开始时的绝对时间 (Unix time)
- tweenValue：动画执行过程中 两个动画属性之间的补间值
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
$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）：
mobileHA 移动端硬件加速
mobileHA可以设置是否开始移动端硬件加速， 默认值为true，你也可以通过设置 mobileHA: false关闭硬件加速
|
1 2 |
// 关闭移动端硬件加速 $element.velocity(propertiesMap, { mobileHA: false }); |
Loop 动画循环执行
用法1:设置loop为一个正整数，比如如设置loop: 2，就可以让动画循环执行2次：
|
1 2 |
// 循环执行2次（注意：元素height值变化到10em 再从10em变化到初始值 是一次循环） $element.velocity({ height: "10em" }, { loop: 2 }); |
如果设置loop: true，可以让动画无限循环执行：
|
1 |
$element.velocity({ height: "10em" }, { loop: true }); |
Delay 动画延迟执行
和 jQuery 的$.delay()方法一样，动画将会延迟所设定的毫秒后执行：
|
1 2 |
// 动画将延迟1500毫秒后执行 $element.velocity({ height: "+=10em" }, { delay: 1500 }); |
Display & Visibility
可以在动画执行结束后 动态设置元素的 css 属性:display或visibility：
|
1 2 3 4 5 |
/* 动画结束后 元素 display 属性设为 "none" */ $element.velocity({ opacity: 0 }, { display: "none" }); /* 动画结束后 元素的 visibility 属性设为 hidden */ $element.velocity({ opacity: 0 }, { visibility: "hidden" }); |
