suchen

Heim  >  Artikel  >  Web-Frontend  >  Fügen Sie mit Velocity.js Animationen zu Webseiten hinzu

Fügen Sie mit Velocity.js Animationen zu Webseiten hinzu

王林
王林nach vorne
2023-09-05 18:17:161110Durchsuche

使用 Velocity.js 将动画添加到网页

In der heutigen Welt der Webentwicklung ist Animation zu einem integralen Bestandteil der Website-Oberflächen geworden. Sie tragen dazu bei, das Benutzererlebnis einer Website zu verbessern. In diesem Artikel erfahren Sie, wie Sie mit Velocity.js schöne Animationen zu Webseiten hinzufügen.

VelocityJS ist eine JavaScript-Animations-Engine, die uns sehr schnelle Animationen liefert, die in Webseiten verwendet werden können. Es hat sich zu einer der führenden Animations-Engines entwickelt und es gibt mehrere Gründe für seinen Erfolg. Ich habe einige der wichtigsten Gründe genannt, die es zu einer sehr guten Wahl machen, wenn Sie sich für eine Animations-Engine für Ihre Webseiten entscheiden.

Wichtige Funktionen von Velocity.js

Nachstehend sind einige der wichtigen Funktionen von Velocity.js aufgeführt -

  • Bessere Leistung – In Bezug auf die Geschwindigkeit ist es so schnell wie CSS und bietet eine bessere Leistung im Vergleich zu seinem Hauptkonkurrenten jQuery, insbesondere auf mobilen Geräten. In der Vergangenheit wurde auch darüber diskutiert, dass die jQuery-Kernanimation durch VelocityJS ersetzt werden sollte. Ein weiterer Pluspunkt ist, dass CSS-Animationen einfach nicht über ausreichende Browserunterstützung verfügen, wohingegen VelocityJS-Animationen bereits im IE8 zuverlässig waren.

  • RunSequence – Stellen Sie sich runSequence als etwas vor, mit dem Sie eine Reihe von Animationen kontinuierlich ausführen können. Es führt zu besseren Ergebnissen und ist ein effizienterer Ansatz. Dies ist ein eleganter Ansatz im Vergleich zur Verkettung mehrerer Animationsfunktionen, die normalerweise in jQuery-Animationen zu finden sind.

  • Lernkurve – Die Lernkurve von Velocity.JS ist nicht sehr steil, da Leute, die jQuery kennen, problemlos mit der Verwendung beginnen können, da es eine ähnliche Syntax bietet.

Da wir nun die Grundkonzepte von Velocity.JS verstanden haben, versuchen wir, verschiedene Animationen zu erstellen, um zu verstehen, wie Velocity.JS-Animationen funktionieren.

Animation mit Velocity.js hinzufügen

Als erstes müssen wir ein einfaches HTML-JS-Projekt erstellen, in dem der Code für Velocity.JS hauptsächlich in JavaScript-Dateien geschrieben wird und die HTML-Datei als Ausgangspunkt für den Import von Velocity.JS-Abhängigkeiten dient.

Erstellen Sie Dateien mit den Namen index.html und script.js in Ihrem bevorzugten Code-Editor oder Ihrer bevorzugten IDE. Betrachten Sie den unten gezeigten Befehl, der Ihnen beim Erstellen der Dateien index.html und script.js hilft. 

touch index.html 
touch script.js

HINWEIS – Wenn touch nicht funktioniert, können Sie den Befehl vi verwenden.

index.html

Nachdem Sie diese beiden Dateien erstellt haben, besteht der nächste Schritt darin, den folgenden Code in Ihre index.html-Datei einzufügen.

Beispiel

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

Im obigen Code müssen Sie einige Punkte beachten. Der erste besteht darin, sicherzustellen, dass Sie die Velocity.JS-Datei in den Code importieren können. Wir tun dies innerhalb des

-Tags im obigen Code.

Bedenken Sie den unten gezeigten Codeausschnitt. 

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

Diese beiden Zeilen ermöglichen es uns, jQuery und Velocity.JS in den Code zu importieren. Obwohl wir nur Velocity.JS benötigen, können Sie import entweder oder beide aufrufen. Da es interessant war, Velocity und jQuery zu vergleichen, habe ich beide importiert.

Jetzt wählen wir ein Element aus dem

-Tag aus und verwenden es, um einige Animationen zu erstellen. Betrachten Sie den unten gezeigten Codeausschnitt. 
<p id="sample-p">
   Lorem ipsum, dolor sit amet consectetur adipisicing elit. 
</p>
<button id="a-button">
   Click me!
</button>

Im obigen Codeausschnitt können wir sehen, dass es zwei verschiedene

-Tags gibt und mit jedem Tag ein verknüpft ist. Wir werden diese IDs in unserem JavaScript-Code verwenden und genau wie mit diesen IDs können wir das Velocity-Element abrufen und dann Animationen darauf ausführen.

script.js

Jetzt schreiben wir den Code in script.js. Als Erstes verwenden wir ein einfaches Velocity-Objekt, in dem wir mithilfe von Velocity.js dem

-Tag eine bestimmte Breite und Höhe zuweisen.

Bedenken Sie den unten gezeigten script.js-Code. 

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

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

Im obigen Code geben wir an, dass das $element, das einfach ein

-Tag ist, das auf den HTML-Code verweist, die angegebene Breite und Höhe haben soll.

Wenn Sie den HTML-Code ausführen, sollten Sie sehen, dass der Inhalt des

-Tags die angegebene Breite und Höhe hat.

Im obigen Beispiel haben wir dafür gesorgt, dass sich die Breite des

-Tag-Inhalts auf 500 Pixel ändert. Nehmen wir jedoch an, dass wir nach einer bestimmten Verzögerung sicherstellen möchten, dass sich die Breite des

-Tags oder unseres $elements auf 200 Pixel ändert. Dasselbe können wir mit Hilfe des unten gezeigten Codes erreichen. 

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

$element.velocity({ width: "200px" }, { duration: 500, delay: 1000 });

Wenn wir nun die HTML-Datei ausführen, ändert sich die Breite von $element nach einer Verzögerung von 1 Sekunde auf 200 Pixel.

Fügen Sie mit Velocity.js mehrere Animationen zu einem einzelnen Element hinzu

Bisher haben wir in diesen beiden Beispielen gelernt, wie man einfache Animationen mit Velocity.JS ausführt. Konzentrieren wir uns nun auf den Teil, in dem wir mehrere Animationen für ein einzelnes Element ausführen möchten.

Wenn wir mehrere Animationen ausführen möchten, können wir sie einzeln ausführen oder verketten, sodass sie in der Reihenfolge ausgeführt werden können, in der wir den Link definieren. Betrachten Sie den unten gezeigten script.js-Code. 

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 在其中添加不同的动画。

Das obige ist der detaillierte Inhalt vonFügen Sie mit Velocity.js Animationen zu Webseiten hinzu. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：
Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
Vorheriger Artikel：Wie viele Zahlen in einem bestimmten Array sind unter Verwendung der Perzentilformel in Javascript kleiner/gleich einem bestimmten Wert?Nächster Artikel：Wie viele Zahlen in einem bestimmten Array sind unter Verwendung der Perzentilformel in Javascript kleiner/gleich einem bestimmten Wert?

In Verbindung stehende Artikel

Mehr sehen