Velocity.js 中文文档

洪德寿
2023-12-01

概述


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>
    <!-- dom -->
    <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.2.3/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. 模块加载器:WebpackBrowserify

使用 jQuery 时,必须在 Velocity 之前加载 jQuery:

JavaScript
window.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:

JavaScript
var 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

JavaScript
require.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+ 版本里增加了对 "pxemrem%degvw/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 });
 类似资料: