Velocity.js应用基础（一）

Velocity.js是一款优秀的js动画插件，内部模拟jquery的queue队列来实现animate效果。可以实现css3中的变形缩放等功能特效，速度和性能优于jquery和css3自定义动画。兼容流行js框架，体积小，压缩后仅有7K大小。
内部实现可参考官方API文档，或者阅读程序源码。文末将会给出官网地址。

Velocity.js提供基本的动画功能，如果有需要，可以引入扩展插件——Velocity.ui.js。

如果html文档有引入jquery的话，js文件的引入顺序应该为：

1 <script src="jquery.js"></script>

2 <script src="Velocity.js"></script>

3 <script src="Velocity.ui.js"></script>

 

下面介绍方法的基本参数和用法（Basics: Arguments）：
一，基本方法调用形式：

 1 $element.velocity({

 2 width: "500px",

 3 property2: value2

 4 }, {

 5 /* Velocity's default options */

 6 duration: 400, //持续时间（可用slow，fast，normal）

 7 easing: "swing", //过渡方式

 8 queue: "", //队列

 9 begin: undefined, //动画开始前执行函数

10 progress: undefined, //动画进行时执行函数

11 complete: undefined, //动画完成执行函数

12 display: undefined, //显示隐藏

13 visibility: undefined, //显示隐藏

14 loop: false, //回到上一步动画初始位置

15 delay: false, //延迟

16 mobileHA: true //是否开启硬件加速

17 });

 

注：接收两个参数
第一个参数为css属性和值，可以为json形式的名值对。
第二个参数为其他备选参数。
名值对之间用逗号隔开。

单个object也可以用以下方式。

$element.velocity({

properties: { opacity: 1 },

options: { duration: 500 }

});

 

Or:

$element.velocity({

properties: { opacity: 1 },

options: { duration: 500 }

});

 

Velocity也可以接收像jquery一样的逗号方法接收参数。但是仅限于： duration, easing, complete 三个属性。
例如：

$element.velocity({ top: 50 }, 1000);

$element.velocity({ top: 50 }, 1000, "swing");

$element.velocity({ top: 50 }, "swing");

$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

 

二，参数形式：
Properties Map（就是第一个参数）。
css属性和值的名值对。
不要使用padding：1 1 1 1这样的形式，因为你传入了多个值（多值情况下，只取第一个值）。
改为padding：1，或者paddingLeft：1的形式。

以下css属性可采用Feature: Hook（后面详细介绍）
textShadow, boxShadow,clip,backgroundPosition, transformOrigin.
或者分开来写的形式，例如：$element.velocity({ textShadowBlur: “10px” });

以下为英文原文：
However, Velocity includes hooks to break down the following properties that require multiple values: textShadow, boxShadow, clip,backgroundPosition, and transformOrigin. Refer to the CSS Support dropdown for a full listing of hooks.

传入属性值单位可支持 px, em, rem, %, deg, vw/vh 。不写单位默认为px。
传入值可使用符号+, -, *, /。
例如：

1 $element.velocity({

2 top: 50, // Defaults to the px unit type

3 left: "50%",

4 width: "+=5rem", // Add 5rem to the current rem value

5 height: "*=2" // Double the current height

6 });

 

注：
浏览器支持：REM单位不低于IE 9支持。VH / VW单位不低于IE 9或以下的Android 4.4支持。
Velocity可支持经典jquery链式写法。

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

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