使用 Velocity.js 将动画添加到网页-js教程-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.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 文件。我们在上面代码的标记内执行此操作。

考虑下面显示的代码片段。

<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>

登录后复制

这两行允许我们将 jQuery 和 Velocity.JS 导入到代码中，尽管我们只需要 Velocity.JS，但您可以调用导入其中之一或两者。由于比较 Velocity 和 jQuery 很有趣，因此我将它们都导入了。

现在我们要从标记中选择一个元素，然后用它来制作一些动画。考虑下面所示的代码片段。

<p id="sample-p">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p>
<button id="a-button">
   Click me!
</button>

登录后复制

在上面的代码片段中，我们可以看到有两个不同的标签，并且在每个标签中，我们都有一个与之关联的。我们将在 JavaScript 代码中使用这些 ID，就像使用这些 id 一样，我们将能够获取 Velocity 元素，然后在其上执行动画。

脚本.js

现在，我们在 script.js 中编写代码了。我们要做的第一件事是使用一个简单的 Velocity 对象，在其中我们将使用 Velocity.js 为

标签分配指定的宽度和高度。

考虑下面所示的 script.js 代码。

let $element = $("#sample-p");

$element.velocity({ width: "50px", left: "500px" });

登录后复制

在上面的代码中，我们指定了我们想要的 $element，它只是指向 HTML 代码的

标记，使其具有指定的宽度和高度。

当您运行 HTML 代码时，您应该看到

标记的内容具有指定的宽度和高度。

在上面的例子中，我们确保

标签内容的宽度变为500px，但是假设在一定的延迟之后，我们想要确保

标签的宽度或我们的$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");
// 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 中的一个常用选项，即 opacity。在下一个示例中，我们将探讨如何在具有不同选项的元素上使用不透明度。

第一个简单的场景是引入带有慢速选项的不透明动画。考虑下面所示的 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 选项。