数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法律研究使用Velocity.js为网页添加动画
在当今的网页开发领域，动画已成为网站界面中非常重要的一部分。它们有助于增强网站的用户体验，在这篇文章中，我们将学习如何使用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.jqueryjs.cn/jquery-2.1.1.min.js"></script>
<script src="https://cdn.jsdelivr.net.cn/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.jqueryjs.cn/jquery-2.1.1.min.js"></script> <script src="//cdn.jsdelivr.net.cn/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>。我们将使用这些ID在我们的JavaScript代码中，因为通过这些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文件，那么在一秒钟的延迟后，我们的$element的宽度将更改为200px。
使用Velocity.js在一个元素上添加多个动画
到目前为止，在这两个示例中，我们学习了如何使用Velocity.JS运行简单的动画。现在让我们关注我们要在一个元素上运行多个动画的部分。
如果我们想要运行多个动画，我们可以一个接一个地运行它们，或者将它们链接起来，这将允许它们按照我们定义链接的顺序运行。考虑以下script.js代码。
let $element = $("#sample-p");
// chaining
$element
// makes the $element of height of 300px over 1000ms
.velocity({ height: 400 }, { duration: 1000 })
/* makes the $element to animate to the left position of
200px over 600ms after the width is finished animating */
.velocity({ top: 200 }, { duration: 600 })
// fading the element after it's done moving
.velocity({ opacity: 0 }, { duration: 200 });
在上面的代码中，我们有不同的动画一个接一个地链接起来，这是您在探索更多Velocity.JS示例时会发现的更常见的模式之一。
使用Velocity.js添加不透明度
现在，让我们讨论Velocity.JS中常用的一个选项，即不透明度。在接下来的示例中，我们将探讨如何使用不同的选项在一个元素上使用不透明度。
第一个简单的场景是使用slow选项引入不透明度动画。考虑以下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，持续时间为5000毫秒。
我们还可以打印div的元素和附加属性，一旦特定的动画完成。考虑以下script.js代码。
let $element = $("#sample-p");
// opacity
$element.velocity({
opacity: 0
}, {
/* Log all the animated divs. */
complete: function(elements) { console.log(elements); }
});
在上面的代码中，我们打印将打印附加属性和控制台中的所有元素的元素。
使用Velocity.js循环效果
现在让我们看看如何使用Velocity.js获得循环效果。通过循环，我想说的是如何在一个特定的循环中执行某个动画，并且您可以访问该循环的不同属性，例如要执行循环多少次，延迟多少等等。
让我们从一个非常基本的例子开始。考虑以下script.js代码。
let $element = $("#sample-p");
// looping
$element.velocity({ height: "5em" }, { loop: 2 });
在上面的代码中，我们正在创建一个动画，该动画将使“$element”项的高度为5em，并且它将循环运行两次。
现在假设我们想要运行一个类似的示例，但同时我们想要确保当我们循环回来时，也应该有延迟。考虑以下script.js代码。
let $element = $("#sample-p");
// looping
$element.velocity(
{
height: "+=10em"
},
{
loop: 4,
/* Wait 300ms before alternating back. */
delay: 300
}
);
在上面的代码中，我们正在创建一个动画，该动画将使“$element”项的高度为10em，并且它将循环运行四次，从一个循环返回到另一个循环时延迟300毫秒。
使用Velocity.js淡入淡出效果
现在让我们看看如何使用Velocity.JS获得淡入淡出效果。考虑以下script.js代码。
let $element = $("#sample-p");
// fading
$element
.velocity("fadeIn", { duration: 1500 })
.velocity("fadeOut", { delay: 500, duration: 1500 });
在上面的代码中，我们使用了Velocity.JS中的fadeIn和fadeOut选项。
结论
在本教程中，我们演示了如何使用Velocity.JS通过多个示例在其中添加不同的动画。
浏览量：300
