我们首先来说说为什么要使用 velocity.js 这个库?

大家是否觉得 jquery.easing.js 提供的动画已经足够丰富了   但是今天这个库不仅能兼容最新的 css3 来实现效果 同时这个库也支持使用原生 js 来实现,结合 jquery react 等库 同时也支持模块化 requirejs 的加载方式 只需要配置 shim 参数就行 就像许多开发者确信的那样,在 Web 上使用 CSS 实现动画并不是唯一的方式,我们也可以使用 JS 来实现,并且 JS 还有一些 CSS 无法替代的优势。 然而抛开 JS 而选择 CSS 来实现动画,将以样式表内容膨胀,丧失对动画时间的控制为代价,并且无法灵活地实现基于物理运动模型的动画设计。 不要误导我! CSS 动画在 Web 中扮演重要的角色—–独自的实现动画或是同 JS 协作实现。 特别的,CSS 在一些简单基本的动画交互上表现的特别好,比如 hover 和 focus 等。(作者的意思是:客观的看待 CSS 动画和 JS 动画,他们各有优点) 然而,对于几乎所有事情,JS 都是不错的选择,因为他的能力太强大了。 如果我说 JS 的动画性能比 CSS 出色,你可能不会相信我。可能你曾经有使用 jQuery 设计动画的糟糕经历,比如动画出现抖动、不平滑,然后草率地归咎于 JS 语言。 完全不对,不要混淆 JS 和 jQuery 这俩种不同的生物。 jQuery 是由许多原生 JS 写的函数组成的库,就像 C++的标准库一样。jQuery 原本不是以动画引擎为目标设计的,而是为了使烦人的DOM操作变得方便高效(效果确实令人惊讶). 幸运的是目前就有一些开源的动画库,使得你可以绕开 jQuery 去利用原生 JS 那令人惊叹的魔力。通过这些动画库,您可以建立一个可控的动画工作流,而且这一切都基于能大幅提升网站动画性能的特征层之上。 我将带领你快速地了解Velocity.js,以便于你设计炫目平滑并且易配置的动画。

什么是 velocity.js ?

Velocity 专为动画而设计 ,简单易用,功能强大,广泛地被一些主流公司所使用(包括Tumblr,Microsoft and WhatsApp)。并且 Velocity 是基于MIT许可协议的开源库。 Velocity 模仿了 jQuery 的语法,可以完美地同 jQuery 协作,当然也能独立地使用,所以对你来说应该很容易学。由于 jQuery 使用普遍,我也将向你展示 Velocity 如何同它协作。

Note: 为了提高你所有动画的性能,只需要简单地将目前 jQuery 的 animate()函数调用换成 velocity(),因为 Velocity 将原来 jQueryanimate()函数的语法和功能在 velocity()函数内部都做了解释映射,所以能兼容以前 animate()的使用方式(velocity()还扩展了 animate()的功能)。但即使是这样的一个小改变,也能使你的网站有一个显著的性能提升。

Velocity 还有许多需要了解的地方。在我们深入之前,让我们快速地了解一下他能干什么,以便让你明白他的价值。 下面是一些不可能用 CSS 简单实现的 JS 动画。 先介绍到这里以后空了来补充 这个库的使用方法等其它注意事项 以及怎么配合 requirejs 模块加载 详情请看官网:Velocity.js