Velocity.js 中文文档

Velocity.js 2017年03月24日

概述

Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能，还拥有：颜色动画、转换动画(transforms)、循环、缓动、SVG 动画、和 滚动动画 等特色功能。

它比 $.animate() 更快更流畅，性能甚至高于 CSS3 animation，是 jQuery 和 CSS3 transition 的最佳组合，它支持所有现代浏览器，最低可兼容到 IE8 和 Android 2.3。

Velocity 目前已被数以千计的公司使用在自己的项目中，包括 WhatsApp, Tumblr, Windows, Samsung, Uber 等，这里 Libscore.com 统计了哪些站点正使用 velocity.js。

英文官网：http://velocityjs.org/下载 Velocity.js

先来看第一个 Velocity 的例子：

HTML<body>  <div class="element"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script> </body>

JavaScript// 标准写法 // (为了简洁，后面的示例代码中将直接使用 $element 来代替 jQuery 选择器) $(".element").velocity({ left: "200px" }, { duration: 450, delay: 1000 }); // $.animate() 的写法，效果同上 $(".element").delay(1000).velocity({left: "200px"}, 450);

你可以通过 npm 或 bower 安装 Velocity：

npm：npm install velocity-animate
bower：bower install velocity

Basics 基础用法

1. Dependencies 模块依赖

1-1. Velocity 不依赖 jQuery

Velocity.js 可以在不引入 jQuery 的情况下单独使用。如果你需要大部分动画效果能兼容 IE8，就必须引入 jQuery 1×。它也可以和 Zepto 一起使用，写法和 jQuery 一样：

JavaScript// 无 jQuery 或 Zepto 时，Velocity()方法挂载在 window 对象上 (window.velocity) // ( 第一个参数为原生js的dom选择器 ) Velocity(document.getElementById("dummy"), { opacity: 0.5 }, { duration: 1000 }); // 使用 jQuery 或 Zepto 时 $("#dummy").velocity({ opacity: 0.5 }, { duration: 1000 });

1-2. 模块加载器：Webpack, Browserify

使用 jQuery 时，必须在 Velocity 之前加载 jQuery：

JavaScriptwindow.jQuery = window.$ = require("path/to/jquery-x.x.x.js"); require("path/to/velocity.js"); require("path/to/velocity.ui.js"); // velocity.ui 在 velocity 之后加载 /* Your app code here. */ $("body").velocity({ opacity: 0.5 });

不使用 jQuery 就直接加载 Velocity：

JavaScriptvar Velocity = require("path/to/velocity.js"); require("path/to/velocity.ui.js"); /* Your app code here. */ Velocity(document.body, { opacity: 0.5 });

1-3. 模块加载器：RequireJS

JavaScriptrequire.config({ paths: { "jquery": "/path/to/jquery-x.x.x", "velocity": "path/to/velocity", // 如果你使用了 velocity.ui "velocity-ui": "path/to/velocity.ui" }, shim: { "velocity": { deps: [ "jquery" ] }, // velocity.ui 依赖 velocity "velocity-ui": { deps: [ "velocity" ] } } }); require([ "jquery", "velocity", "velocity-ui" ], function ($, Velocity) { /* Your app code here. */ $("body").velocity({ opacity: 0.5 }); });

2. Arguments 参数

2-1. 参数概述和基础写法：

Velocity 接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数为动画的额外配置项。下面为参数的写法：

JavaScript$element.velocity({ width: "500px", // 动画属性宽度到 "500px" 的动画 property2: value2 // 属性示例 }, { /* Velocity 动画配置项的默认值 */ duration: 400, // 动画执行时间 easing: "swing", // 缓动效果 queue: "", // 队列 begin: undefined, // 动画开始时的回调函数 progress: undefined, // 动画执行中的回调函数（该函数会随着动画执行被不断触发） complete: undefined, // 动画结束时的回调函数 display: undefined, // 动画结束时设置元素的 css display 属性 visibility: undefined, // 动画结束时设置元素的 css visibility 属性 loop: false, // 循环 delay: false, // 延迟 mobileHA: true // 移动端硬件加速（默认开启） });

2-2. 单一对象的参数写法：

Velocity 也支持 single-argument 的语法，看下面示例：

JavaScript$element.velocity({ properties: { opacity: 1 }, options: { duration: 500 } }); // 或者： $element.velocity({ p: { opacity: 1 }, // 可以将 properties 简写成 p o: { duration: 500 } });

2-3. 逗号分割的参数写法（类似 $.animate）：

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

3. Properties Map 动画属性

如果不写属性值的单位, Velocity 会将像素(px)作为默认单位

JavaScript// 等同 padding: 1px $element.velocity({ padding: 1 }); // 等同 padding-left: 1px, padding-right: 1px $element.velocity({ paddingLeft: 1, paddingRight: 1 }); // 但你不能这样写！因为这样相当于为 padding 赋了多个值 $element.velocity({ padding: "1 1 1 1" }); // error

Velocity 在 1.2.0+ 版本里增加了对 "px, em, rem, %, deg, vw/vh" 这些单位的支持，如果不填写属性单位默认单位还是"px"，但 "deg" 用于 rotateZ 属性时可以省略不写。 Velocity 还支持动态计算属性值，包括 "+, -, *, /"，还可以设置元素在动画执行前的初始值，看下面示例：
( 注意："rem" 只支持 IE9+，"vh/vw" 只支持 IE9+ 和 Android 4.4+ )

JavaScript$element.velocity({ top: 50, // 等同于 "50px" left: "50%", width: "+=5rem", // 每次在当前值上叠加 5rem height: "*=2" // 每次在当前值上叠乘 2 color: ["#888", "#000"] // 每次动画执行前，color 的初始值都为"#000"（从"#000"过渡成"#888"） });

4. Chaining 链式动画

当一个元素连续应用多个velocity()时，动画将以队列的方式执行：

JavaScript$element /* 先执行宽度变为75px的动画 */ .velocity({ width: 75 }) /* 等前面的宽度动画结束后，再执行高度变为0的动画 */ .velocity({ height: 0 });