使用 Velocity.js 將動畫加入網頁-js教程-PHP中文網

Velocity.js 的重要功能

使用 Velocity.js 加入動畫

index.html

範例

腳本.js

使用 Velocity.js 在單一元素上新增多個動畫

使用 Velocity.js 添加不透明度

使用 Velocity.js 的循环效果

使用 Velocity.js 实现淡入淡出效果

结论

首頁

web前端

js教程

使用 Velocity.js 將動畫加入網頁

王林

Sep 05, 2023 pm 06:17 PM

使用 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 选项。

结论

在本教程中，我们通过多个示例演示了如何使用 Velocity.JS 在其中添加不同的动画。

以上是使用 Velocity.js 將動畫加入網頁的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

免費脫衣圖片

Clothoff.io

AI脫衣器

Video Face Swap

使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！

熱工具

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

gmail信箱登陸入口在哪裡

7814

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

神秘的JavaScript：它的作用以及為什麼重要 Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。