高性能js动画库velocity.js

velocity.js官网

一、为什么是velocity不是jquery

时下，如何快速制作js动效，许多人可能会首先想到使用jquery。jquery的就是如此流行。使用jquery制作的各种动效在网络上也非常丰富。jquery的优点不言而喻，简单易用，高效开发。但要知道jquery动画性能并不是最优的。因为jquery想要实现的目标太多，动画性能上就不可避免做出妥协。因此要制作高性能js动画，可能不得不放弃jquery，转而使用原生js制作动画。那有没有一种js高性能动效库，既像jquery一样简单易用，动画又高性能？这就是velocity.js动画库了。

二、velocity的优点

1、Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API，但它不依赖 jQuery，可单独使用。 Velocity 不仅包含了 $.animate() 的全部功能， 还拥有：颜色动画、转换动画(transforms)、循环、 缓动、SVG 动画、和 滚动动画 等特色功能。
2.也有几十种类似animate.css的预定义动画api
3.支持自定义动效，拼装队列动效等等
4.动画回调 比如 Begin & Complete & Progress 回调函数
5.它支持所有现代浏览器，最低可兼容到IE8和Android 2.3

三、velocity的使用

1、velocity的引入
可以使用script标签引入

也可以通过npm安装

npm install velocity-animate

2、Velocity语法

Velocity使用和jquery相同的语法。换句话说，如果你熟悉jquery的animate()函数，那么你只需把animate()语法套用在velocity()就行。
Jquery：

$(选择器).animate();

Velocity：

$(选择器).velocity();

Velocity参数用法

$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 // 移动端硬件加速（默认开启）

});

简单点就是：

$element.velocity(

{css参数列表},

{动画配置项}

)

其他写法：

$element.velocity({css参数列表 }, dalay延迟,easing缓动效果, function回调函数);

示例：

$element.velocity({ width: "50px" }, 1000);

$element.velocity({ width: "50px" }, 1000, "swing");

$element.velocity({ width: "50px" }, "swing");

$element.velocity({ width: "50px" }, 1000, function() {});

这里特别讲解一个非常有趣的用法，就是动画效果原路返回。如果我们做了一个比较炫酷或者比较复杂的动画效果，然后需要制作动画原路返回的效果，只需如此：

$element.velocity("reverse")；

velocity会自动记录下动画执行的路径、时间以及效果等，然后会按动画原效果返回。也就是说，不管你动画效果设计得再复杂，如果要动画原路返回，只需一句代码，是不是很酷?继续关注源码时代，更多技术文https://www.cnblogs.com/xiaohuochai/p/7404928.html。