velocity--Feature 特色_综合

Feature 特色

Velocity 提供了一些特色动画功能。

1. Transforms

Velocity 支持2D/3D变换动画，比如translate, scale, rotate, skew等。

JavaScript

$element.velocity({translateX: "200px",rotateZ: "45deg"
});

以下列举了所有常用的 transform 相关可用属性：

JavaScript

{/* translate */translateX: 20,     // 等同于"20px"translateY: "1.5em",translateZ: "20px", // IE10+/* scale */scale: 0.5,scaleX: 0.5,scaleY: 0.5,/* rotate */rotate: 45,       // 等同于"45deg"rotateX: "45deg", // IE10+rotateY: "45deg", // IE10+rotateZ: "45deg",/* skew */skewX: "30deg",skewY: "30deg",
}

浏览器支持：> IE9

2. Colors 颜色动画

Velocity 颜色动画支持的颜色属性有:color, backgroundColor, borderColor, outlineColor。属性值支持:rgb,hsla, 十六进制颜色码，但不支持关键词比如:"green"

JavaScript

$element.velocity({backgroundColor: "#ff0000",/* 背景色 RGBA 中的 A 透明度到50% */backgroundColorAlpha: 0.5,/* 字体颜色 RGB 中的 Red 到 50% (0.5 * 255) */colorRed: "50%",/* 字体颜色 RGB 中的 Blue 值叠加50 */colorBlue: "+=50",/* 字体颜色 RGBA 中的 A 透明度到85% */colorAlpha: 0.85
});

3. SVG

Velocity 支持 SVG 元素动画，包含所有常用 SVG 属性，例如:x, y, rx, fill, stroke-width, opacity 等。

JavaScript

$svgRectangle.velocity({/* 坐标动画 */x: 200,r: 25,/* 2D 变换动画 */translateX: "200px",/* 3D 变换动画（非IE浏览器） */translateZ: "200px",/* 颜色填充动画 "Fill" */fill: "#ff0000",strokeRed: 255,strokeGreen: 0,strokeBlue: 0,/* 一些标准的 CSS 属性动画 */opacity: 1,width: "50%"
});

浏览器支持：>= IE9 和 >= Android 3.0

来看一个 SVG 动画 Demo：

HTML

<svg class="element"><rect id="rect" width="50px" height="50px" x="1px" y="1px" fill="gray" stroke="rgba(80, 80, 80, 1)" stroke-width="0px" class="" style="fill: rgb(128, 255, 128); stroke-width: 2px; transform: rotateZ(0deg) scaleX(1);"></rect>
</svg>

CSS

svg {display: block;width: 100%;
}rect {transform-origin: 0% 0%;
}

JavaScript

$("#rect").velocity({ x: "+=200", rotateZ: 90, scaleX: 0.5, fill: "#00e5ff" }).velocity("reverse", { delay: 250 });

开始

4. Hook

Hook 可以设置多个CSS属性中的单独一个值，比如 "boxShadow", "clip"等，作用与 jQuery 的$.css()方法相似

关于哪些属性名可以使用，这里给出了参考：

JavaScript

$.Velocity.hook($element, "translateX", "500px"); // 值必须写上单位
$.Velocity.hook(elementNode, "textShadowBlur", "10px"); // 值必须写上单位

还可以获取单个 CSS 属性的值：

JavaScript

$.Velocity.hook($element, "translateX"); // 获取元素的translateX值
$.Velocity.hook(elementNode, "textShadowBlur");

5. Promises

Velocity 可以使用 ES6 的 Promises 对象的语法方式，但目前只有 Chrome 和 Firefox 支持，如果你需要详细了解 Promises，可以阅读阮一峰老师写的 ECMAScript 6 入门-Promises对象

JavaScript

/* 使用 Velocity 的公有方法，$element 为dom选择器 可以用jQuery的 或 原生js的 */
$.Velocity.animate($element, { opacity: 0.5 })/* 一旦动画执行完成 执行下面.then()中的回调函数（可以写多个.then()）*/.then(function(elements) { console.log("Resolved."); })/* 捕获错误后的回调函数 */.catch(function(error) { console.log("Rejected."); });

开始

6. Mock

如果设置$.Velocity.mock = true; 会强制页面里所有的 Velocity 动画的duration 和delay值为 0sm，动画会直接跳转到结束状态，这个方法常用于代码调试。

也可以将$.Velocity.mock设置为一个整数，可以加快或减慢页面上所有的 Velocity 动画速度：

JavaScript

/* 页面里所有 Velocity 动画 将以10为系数减慢 */
$.Velocity.mock = 10;

7. Utility Function

Velocity 的公有方法，看下面示例：

JavaScript

/* 标准的多参数语法 */
var divs = document.getElementsByTagName("div");
$.Velocity(divs, { opacity: 0 }, { duration: 1500 });

另一种写法：

JavaScript

// 可选的单参数语法（idea 来源于 CoffeeScript）
// e：element - 元素，一个dom选择器
// p: properties - 属性map { property1: value1, property2: value2, … }
// o: options - 配置选项
var divs = document.getElementsByTagName("div");
$.Velocity({ e: divs, p: { opacity: 0 }, o: { duration: 1500 });