在网页中添加动画使用Velocity.js

动画已成为当今网站界面的非常重要的一部分。它们有助于提升网站的用户体验，在本文中，我们将学习如何使用Velocity.js在我们的网页上添加美丽的动画。

Velocity.js是一个JavaScript动画引擎，它提供了非常快速的动画效果，我们可以在我们的网页中使用它。它已成为领先的动画引擎之一，并且成功的原因有很多。我已经提到了一些最重要的原因，当你决定选择一个动画引擎来为你的网页时，它是一个非常好的选择。

Velocity.js的重要特性

下面列出了Velocity.js的一些重要特性：

更好的性能 - 在速度方面，它与CSS一样快，与其主要竞争对手jQuery相比，它提供了更好的性能，特别是在移动设备上。曾经还有讨论过一个问题，即是否要用Velocity.js来替换jQuery核心动画。此外，对于CSS动画，浏览器支持不够，而Velocity.js动画可以在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="//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为标签分配指定的宽度和高度。

考虑以下 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中经常使用的选项之一，即不透明度。在下一个示例中，我们将探索如何在元素上使用不同的选项来设置不透明度。

第一个简单的场景是使用慢速选项引入不透明度动画。考虑以下 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，并在循环中运行四次，每次循环结束时的延迟时间为300ms。

Fading Effect Using 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选项。