Velocity.js应用基础（2）

三，参数选项：
1，durations： //动画完成时间
可选参数有数值，或者jquery命名速度参数：”slow”, “normal”, and “fast”。

2，easing： //过渡方式
可选参数很多，如果引入的有其他库，也可以使用其他库的命名参数，主要参数有：
css3命名参数值：”ease”, “ease-in”, “ease-out”, and “ease-in-out”。
css3贝塞尔曲线（bezier curves）。
Spring physics：通过一个两项阵列中[张力，摩擦]的形式。（不太明白）
步骤分解：（这个也不懂）。

3，queue： //队列
参见jquery队列使用。 velocity的核心就是利用jquery的队列，因此性能得到加强。

可以设置queue属性的值为false，来将一个动画加入到队列中去。方法如下：

1 /* Trigger the first animation (width). */
2 $element.velocity({ width: "50px" }, { duration: 3000 }); // Runs for 3s
3 setTimeout(function() {
4     /* Will run in parallel starting at the 1500ms mark. */
5     $element.velocity({ height: "50px" }, { queue: false });
6 }, 1500 // 1500ms mark);

自定义队列是不会自动执行的，你可以用$element.dequeue(“queueName”)jq方法，或者Velocity.Utilities.dequeue(element(s), “queueName”) velocity方法执行。

4,Begin & Complete： //回调函数

Begin：动画开始前触发。

1 $element.velocity({
2 opacity: 0
3 }, {
4 /* Log all the animated divs. */
5 begin: function(elements) { console.log(elements); }
6 });

Complete：完成后触发。

$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
complete: function(elements) { console.log(elements); }
});

5，Progress ： //进度。
定义一个回调函数，控制持续时间等。
回调函数参数有complete,remaining, start, tweenValue。

complete:完成百分比.
remaining: 剩余时间毫秒 (ms)为单位.
start: 回调开始时间 (Unix时间).
tweenValue:这个，不懂。
示例：

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

6,mobileHA: //硬件加速
当设置为true – 它的默认值 – 速度动画是硬件自动在移动设备上加速。
该属性不影响桌面应用程序。

7，Loop： //循环执行
参数为数值，当设置为true时，无限循环执行。
注意：
这里的循环是指从动画开始前，到动画结束，再到动画开始前算一个循环。
实际上，这里的loop指的是原路返回到上一步动画开始时的效果。

8，Delay： //延迟
参数为数值

9，Display & Visibility //显示方式
动画结束后，元素的显示方式（不用多说，不过是要放在第二个参数里面）。
$element.velocity({ opacity: 0 }, { display: “none” });
如果使用Command命令去设置函数的第一个参数时，该属性会被忽略。

Velocity.js官方网站：http://www.julian.com/research/velocity/

本文来自前端365（http://qianduan365.com）博客，文章内容均为毛桃原创，转载请在博客下留言，并保留出处，谢谢合作。