1、简介
Velocity 是一个简单易用、高性能、功能丰富的轻量级JS动画库。它能和 jQuery 完美协作，并和$.animate()有相同的 API， 但它不依赖 jQuery，可单独使用。
2、兼容性
可兼容到 IE8 和 Android 2.3。
若需要兼容 IE8，就必须引入 jQuery 1.x
3、示例代码(注意文件引用路径)
（1）index.html
<!DOCTYPE html><html lang="zh"> ???<head> ???????<meta charset="UTF-8" /> ???????<link rel="stylesheet" type="text/css" href="css/style.css" /> ???????<title>velocity.js使用</title> ???</head> ???<body> ???????<div class="box" id="div1"> ???????</div> ???????<div class="box" id="div2"> ???????</div> ???????<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script> ???????<script src="js/velocity.min.js" type="text/javascript" charset="utf-8"></script> ???????<!--velocity.ui 在 velocity 之后加载--> ???????<script src="js/velocity.ui.min.js" type="text/javascript" charset="utf-8"></script> ???????<script src="js/index.js" type="text/javascript" charset="utf-8"></script> ???</body></html>
（2）style.css
.box{ ???width: 100px; ???height: 100px; ???background-color: pink;}(3)index.js
(function($) { ???// ???$(‘#div1‘).velocity({ ???// ???????width: ‘300px‘ ???// ???}, { ???// ???????//动画时长 ???// ???????duration: 3000, ???// ???????//动画执行完后执行的回调 ???// ???????complete: function() { ???// ???????????$(‘#div2‘).velocity({ ???// ???????????????width: ‘300px‘ ???// ???????????}, { ???// ???????????????duration: 3000 ???// ???????????}) ???// ???????} ???// ???}); ???//动画序列// ???var seq = [{// ???????????elements: $(‘#div1‘),// ???????????properties: {// ???????????????width: ‘300px‘// ???????????},// ???????????options: {// ???????????????durations: 1000// ???????????}// ???????},// ???????{// ???????????elements: $(‘#div2‘),// ???????????properties: {// ???????????????width: ‘300px‘// ???????????},// ???????????options: {// ???????????????durations: 1000// ???????????}// ???????}// ???];// ???$.Velocity.RunSequence(seq);//预定义动画$(‘#div1‘).on(‘mouseover‘,function(){ ???$(this).velocity(‘callout.shake‘)});})(jQuery);4、使用
（1）参数配置：
$element.velocity({ ???properties: { opacity: 1 }, ???options: { duration: 500 }});// 或者：$element.velocity({ ???p: { opacity: 1 }, // 可以将 properties 简写成 p ???o: { duration: 500 }});基础配置：
$element.velocity({ ???width: "500px", ???????// 动画属性 宽度到 "500px" 的动画 ???properties: 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）Complete属性
complete为动画结束时的回调函数，在无限循环模式下（设置loop: true） 该回调函数将不会执行，但是有规定次数的循环模式下（比如设置设置loop: 3） 该回调函数 将只会在最后一次循环结束后 执行一次。
（3）delay属性
和 jQuery 的$.delay()方法一样，动画将会延迟所设定的毫秒后执行。
（4）支持SVG动画
（5）velocity.ui.js
velocity.ui.js 是 velocity.js 的 动画插件（1.8 KB ZIP’ed） 我们可以用它快速创建炫酷的动画特效，它依赖于 velocity.js。
elocity.ui 有2个重要方法:$.Velocity.RegisterEffect()和 $.Velocity.RunSequence()
前者允许你将多个 Velocity 动画合并存储到一个自定义数组里，你可以通过引用该数组的名称 在项目中复用， 后者能帮你改进嵌套的动画序列 使得更易于管理。
Velocity.ui.js 内置了很多常用的动画特效，分为 callout.* 和 transition.* 两类。
Velocity.js动画库使用
原文地址：https://www.cnblogs.com/mengfangui/p/8432063.html