使用 Velocity.js 向网页添加动画
在当今的 Web 开发世界中，动画已成为网站界面中不可或缺的一部分。它们有助于增强网站的用户体验，在本文中，我们将学习如何利用 Velocity.js 为我们的网页添加精美的动画。
VelocityJS 是一个 JavaScript 动画引擎，它为我们提供可以在网页中使用的非常快速的动画。它已成为领先的动画引擎之一，其成功的原因有很多。我已经提到了一些最重要的原因，这些原因使它成为您决定为网页选择动画引擎时的一个非常好的选择。
Velocity.js 的重要功能
Velocity.js 的一些重要功能如下所列 -
更好的性能 - 就速度而言，它与 CSS 一样快，与主要竞争对手 jQuery 相比，它提供了更好的性能，尤其是在移动设备上。曾经，也有关于 jQuery 核心动画应该被 VelocityJS 取代的讨论。此外，另一个主要优势是 CSS 动画根本没有足够的浏览器支持，而 VelocityJS 动画早在 IE8 中就已经很可靠了。
RunSequence − 将 runSequence 视为允许您以连续方式执行一堆动画的东西，它会产生更好的结果，并且是一种比链接通常在 jQuery 动画中找到的多个动画函数更优雅的方法。
学习曲线 − Velocity.JS 的学习曲线不是很陡峭，因为了解 jQuery 的人可以轻松开始使用它，因为它提供了类似的语法。
现在我们对 Velocity.JS 有了基本的了解，让我们尝试创建多个不同的动画，以了解 Velocity.JS 动画的工作原理。
使用添加动画Velocity.js
我们需要做的第一件事是创建一个简单的 HTML-JS 项目，其中 Velocity.JS 的代码将主要写在 JavaScript 文件中，HTML 文件将作为我们导入 Velocity.JS 依赖项的起点。
在您最喜欢的代码编辑器或 IDE 中创建一个名为 index.html 和 script.js 的文件。请考虑下面显示的命令，它将帮助您创建 index.html 和 script.js 文件。
touch index.html touch script.js
注意 - 如果 touch 不起作用，则可以使用 vi 命令。
index.html
创建这两个文件后，下一步是将以下代码放入 index.html 文件中。
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Velocity - Examples</title>
</head>
<body>
<p id="sample-p">
Lorem ipsum, dolor sit amet consectetur adipisicing elit.
</p>
<button id="a-button">
Click me!
</button>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
<script>
$('#a-button').click(function() {
var $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
});
</script>
</body>
</html>
您需要关注上述代码中的几个要点，首先，您要确保能够在代码中导入 Velocity.JS 文件。我们在上述代码的 <body> 标记内执行此操作。
请考虑下面显示的代码片段。
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> <script src="//cdn.jsdelivr.net/velocity/1.1.0/velocity.min.js"></script>
这两行代码允许我们将 jQuery 和 Velocity.JS 导入到代码中，尽管我们只需要 Velocity.JS，但您可以自行决定导入其中一个还是两个。比较 Velocity 和 jQuery 很有趣，因此我将它们都导入了。
现在到了我们要从 <body> 标签中选择一个元素，然后使用它来执行一些动画的部分。请考虑下面显示的代码片段。
<p id="sample-p"> Lorem ipsum, dolor sit amet consectetur adipisicing elit. </p> <button id="a-button"> Click me! </button>
在上面的代码片段中，我们可以看到我们有两个不同的 <body> 标签，并且在每个标签中，我们都有一个与之关联的 <id>。我们将在 JavaScript 代码中使用这些 ID，因为有了这些 id，我们将能够获取 Velocity 元素，然后我们可以在其上执行动画。
script.js
现在，是时候在 script.js 中编写代码了。我们要做的第一件事是使用一个简单的 Velocity 对象，在该对象中，我们将使用 Velocity.js 为 <p> 标签分配指定的宽度和高度。
考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
$element.velocity({ width: "50px", left: "500px" });
在上面的代码中，我们指定我们希望 $element(它只是指向 HTML 代码的 <p> 标签)具有指定的宽度和高度。
运行 HTML 代码时，您应该看到 <p> 标签的内容具有指定的宽度和高度。
在上面的例子中，我们确保 <p> 标签内容的宽度变为 500px，但假设在一定延迟后，我们希望确保 <p> 标签或我们的 $element 的宽度变为 200px。我们可以借助下面显示的代码实现相同的目的。
let $element = $("#sample-p");
$element.velocity({ width: "200px" }, { duration: 500, delay: 1000 });
现在，如果我们运行 HTML 文件，那么延迟 1 秒后，我们的 $element 的宽度将更改为 200px。
使用 Velocity.js 在单个元素上添加多个动画
到目前为止，在两个示例中，我们了解了如何使用 Velocity.JS 运行简单动画。现在让我们关注我们想要在单个元素上运行多个动画的部分。
如果我们想要运行多个动画，我们可以逐个运行它们，也可以将它们链接起来，这样它们就可以按照我们定义的链接顺序运行。考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
// 链接
$element
// 使高度为 300px 的 $element 持续 1000ms
.velocity({ height: 400 }, { duration: 1000 })
/* 使宽度动画完成后，在 600ms 内使 $element 动画到左侧位置
200px */
.velocity({ top: 200 }, { duration: 600 })
// 移动完成后淡入淡出元素
.velocity({ opacity: 0 }, { duration: 200 });
在上面的代码中，我们有不同的动画相互链接，这是您在探索更多 Velocity.JS 示例时会发现的更常见的模式之一。
使用 Velocity.js 添加不透明度
现在，让我们讨论一下 Velocity.JS 中经常使用的选项，即不透明度。在下一个示例中，我们将探索如何使用不同选项在元素上使用不透明度。
第一个简单的场景是使用慢速选项引入不透明度动画。请考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: "slow" });
在上面的代码中，我们确保元素的不透明度达到 0，持续时间较慢。
在下一个示例中，我们甚至可以决定元素的不透明度达到 0 的确切时间延迟。请考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
$element.velocity({ opacity: 0 }, { duration: 5000 });
在上面的代码中，我们确保元素的不透明度达到 0，持续时间为 5000ms。
特定动画完成后，我们还可以记录 div 的元素和附加属性。请考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
// 不透明度
$element.velocity({
opacity: 0
}, {
/* 记录所有动画 div。 */
complete: function(elements) { console.log(elements); }
});
在上面的代码中，我们打印了将打印附加属性的元素以及控制台中的所有元素。
使用 Velocity.js 实现循环效果
现在让我们看看如何使用 Velocity.js 实现循环效果。通过循环，我想说明如何在特定循环中执行特定动画，并且您将可以访问该循环的不同属性，例如要执行循环的次数、延迟时间等等。
让我们从一个非常基本的示例开始。考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
// 循环
$element.velocity({ height: "5em" }, { loop: 2 });
在上面的代码中，我们创建了一个动画，该动画将使"$element"项的高度为 5em，并且它将循环运行两次。
现在假设我们想要运行一个类似的示例，但同时，我们想要确保当我们循环回来时，我们也应该有一个延迟。考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
// 循环
$element.velocity(
{
height: "+=10em"
},
{
loop: 4,
/* 等待 300 毫秒后再交替返回。 */
delay: 300
}
);
在上面的代码中，我们创建了一个动画，该动画将使"$element"项的高度为 10em，并且它将循环运行四次，每次从一个循环返回到另一个循环时延迟 300ms。
使用 Velocity.js 实现淡入淡出效果
现在让我们看看如何使用 Velocity.JS 实现淡入淡出效果。请考虑下面显示的 script.js 代码。
let $element = $("#sample-p");
// 淡入淡出
$element
.velocity("fadeIn", { duration: 1500 })
.velocity("fadeOut", { delay: 500, duration: 1500 });
在上面的代码中，我们使用了 Velocity.JS 中的 fadeIn 和 fadeOut 选项。
结论
在本教程中，我们通过多个示例演示了如何使用 Velocity.JS 在其中添加不同的动画。
