Velocity.js应用基础（二）

Velocity.js应用基础（二）

三，参数选项：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 3s3 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: 03 }, {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）博客，文章内容均为毛桃原创，转载请在博客下留言，并保留出处，谢谢合作。