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 */
    rotateZ: 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({ translateX: "+=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 });

文档导航