velocity.js学习记录

简介:

Velocity是一个动画引擎，与jQuery的$.animate（）具有相同的API。它可以使用和不使用jQuery。它的速度非常快，它具有色彩动画，变换，循环，缓动，SVG支持和滚动功能。它是jQuery和CSS转换相结合的最佳选择。

引用：

1.
//有 jQuery的引用情况:先JQ 再VE
window.jQuery = window.$ = require("path/to/jquery-x.x.x.js");
require("path/to/velocity.js");
// ps: If you're using the UI pack, require it after Velocity.就是一套很优秀的动画预设插件
// (You don't need to assign it to a variable.您无需将其分配给变量)
require("path/to/velocity.ui.js");
/* Your app code here. */
$("body").velocity({ opacity: 0.5 });
2.
//没有 jQuery的引用情况
If you're using Velocity without jQuery, simply require Velocity as normal:
var Velocity = require("path/to/velocity.js");//需要变量
require("path/to/velocity.ui.js");//和上面一样
/* Your app code here. */
Velocity(document.body, { opacity: 0.5 });

简单说明

Velocity 接收一组 css 属性键值对 (css map) 作为它的第一个参数，该参数作为动画效果的最终属性。第二个参数是可选参数为动画的额外配置项。下面为参数的写法：(说明：如果提供的最终属性包含字母，那么要将它们用半角引号括起来)

$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({
    properties: { opacity: 1 },
    options: { duration: 500 }
});
或者
$element.velocity({
    p: { opacity: 1 },// 可以将 properties 简写成 p
    o: { duration: 500 }
});

velocity接受多个参数。第一个参数是一个对象，用于将CSS属性映射到最终的期望数值上。例如：
//设置元素的width属性值变动至“500px”且其opacity属性值变动至1的动画。$element.velocity({ width:500px , opacity :1 }) ;
还有一种参数简写语法，那就是不将选项对象作为第二个参数传入，而是使用逗号分隔参数语法。这种写法需要列举出动画的持续时间、缓动形式和动画执行完毕后触发的一个回调函数。

【逗号分割的参数写法】
$element.velocity({ top: 50 }, 1000); 
$element.velocity({ top: 50 }, 1000, "swing");
$element.velocity({ top: 50 }, "swing");
$element.velocity({ top: 50 }, 1000, function() { alert("Hi"); });

举个栗子：

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <link rel="stylesheet" type="text/css" href="demo.css" />
        <title>velocity.js使用</title>
    </head>
   <body>
    <div id="demo"></div>
<br />
<button id="btn">运动</button>
    <script type="text/javascript" src="jquery.js" ></script>
    <script type="text/javascript" src="velocity.js" ></script>
    <script type="text/javascript" src="demo.js" ></script>
</body>
</html>
/*******js********/
let btn = document.getElementById('btn')
btn.onclick = function() {
//   不使用jquery的用法
Velocity(document.getElementById("demo"),{left: '300px'},3000,function() { alert("Hi");})
};
//使用jQuery的用法
$("#demo").velocity({ 
  opacity: "/=2",
  width: "*=2"
}, 2000);

值

支持px,em,rem,%,deg,vw【默认px】
*Velocity 还支持动态计算属性值，包括 "+, -, , /"，还可以设置元素在动画执行前的初始值

链式操作

当一个元素链式调用多个velocity函数时，会自动形成队列（一个动画结束后一个动画接着执行）

let btn = document.getElementById('btn')
btn.onclick = function() {
//   不使用jquery的用法
$("#demo")
    /* Animate the width property. */
    .velocity({ width: 75 })
    /* Then, when finished, animate the height property. */
    .velocity({ height: 0 });
};

begin(开始）和complete(完成)

let btn = document.getElementById('btn')
btn.onclick = function() {
//   不使用jquery的用法
$("#demo").velocity(
  {width:'500px'},
  {
    duration:3000,
      begin:function(){
        alert("begin")
      },
    complete:function(){
      alert("complete")
    }
 }
)
};

动画队列

可以通过设置queue: false 强制并行执行一个新动画

let btn = document.getElementById('btn')
btn.onclick = function() {
//   不使用jquery的用法
$("#demo").velocity({width:'500px'},{duration:3000});
setTimeout(function(){
      /* 1.5秒后 开始并行执行高度变为"200px"的新动画 */
$("#demo").velocity({ height: "200px" }, { duration: 1500, queue: false });
},1500)
};

也可以自定义动画队列，但不会立即执行，需要通过dequeue()方法手动执行动画

// 自定义队列，这里并不会立即执行
$("div")
  .velocity({ translateX: 75 }, { queue: "a" })
  .velocity({ width: 50 }, { queue: "b" })
  .velocity({ translateY: 75 }, { queue: "a" })
  .velocity({ height: 0 }, { queue: "b" })

// 2秒后 执行队列"a"的动画
setTimeout(function() {
  $("div").dequeue("a");
}, 2000);

// 4秒后 执行队列"b"的动画
setTimeout(function() {
  $("div").dequeue("b");
}, 4000);

[注意]loop循环选项 和reverse反向动画指令，不能和队列一起使用