JS 流行库（十二）：Velocity

JS 流行库（十二）：Velocity

Velocity 是一个简单易用、性能极高、功能丰富的轻量级 JavaScript 动画库，可以和 jQuery / Zepto 完美协作，并且和 $.animate() 有相同的 API，即使不依赖 jQuery 也可以单独使用，此外，Velocity 也支持 transform 相关的动画等额外功能

基本使用

1. 导入 Velocity 动画库

<script src="./js/velocity.js"></script>

2. HTML

<div class="box"></div>

3. JavaScript

let oDiv = document.querySelector(".box");
Velocity(oDiv, {
    marginLeft: "500px"
}, {
    duration: 3000
})

上述示例也可以以 jQuery 风格编写，示例如下：

$(".box").velocity({
    marginLeft: "500px"
}, {
    duration: 3000
})

必须注意的是，在导入框架时，必须先导入 jQuery 库，后导入 Velocity 库

如果想为多个元素添加动画，那么所有元素必须能够以某种方式被同时选中，被传入的所有元素将同时执行此动画，示例如下：

• HTML

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

• JavaScript

let oDivs = document.querySelectorAll("div");
Velocity(oDivs, {
    marginLeft: "500px"
}, {
    duration: 3000
})

如果使用 Velocity 1.X 版本（目前最新为 2.X 版本），那么可以以数组的形式传入待执行动画的元素，示例如下：

let oDivs = document.querySelectorAll("div");
Velocity([".box1", ".box2", ".box3"], {
    marginLeft: "500px"
}, {
    duration: 3000
})

动画属性

类似于所有的动画库，为元素添加动画时可以设置动画属性，Velocity 同样也不例外，内容如下：

属性	类型	描述
duration	Number	持续时间（单位：毫秒）
delay	Number	延迟时间（单位：毫秒）
loop	Number	循环次数
easing	String	动画效果（easeInOutQuint 等）

示例如下：

• HTML

<div class="box"></div>

• JavaScript

$(".box").velocity({
    marginTop: "500px"
}, {
    duration: 3000,
    delay: 1000,
    loop: 2,
    easing: "easeInOutQuint"
})

动画事件

类似于所有的动画库，为元素添加动画时可以监听动画事件，Velocity 同样也不例外，内容如下：

事件	描述
begin	开始
complete	结束
progress	执行

示例如下：

• HTML

<div class="box"></div>

• JavaScript

$(".box").velocity({
    marginLeft: "500px"
}, {
    duration: 3000,
    begin: function (elements) {
        console.log("Begin", elements);
    },
    complete: function (elements) {
        console.log("Complete", elements);
    },
    progress: function (elements, complete, remaining, start, tweenValue) {
        console.log((complete * 100) + "%");
    }
})

所有事件监听的回调函数都将正在执行动画的元素作为参数传入，此外，progress 事件的回调函数有额外的参数，详情可以访问官网