Inhaltsverzeichnis
Mojs installieren
HTML-Module in Mojs
Mojs 中可用的缓动功能
控制动画播放
最终想法
Heim Web-Frontend js-Tutorial Beginnend mit der Mojs-Animationsbibliothek: HTML-Komponenten

Beginnend mit der Mojs-Animationsbibliothek: HTML-Komponenten

Sep 01, 2023 pm 04:37 PM

从 Mojs 动画库开始:HTML 组件

Viele Websites verwenden heutzutage eine Art Animation, um ihre Zielseiten attraktiver zu gestalten. Zum Glück gibt es viele Bibliotheken, mit denen Sie Elemente auf Ihrer Webseite animieren können, ohne alles von Grund auf neu machen zu müssen. In diesem Tutorial lernen Sie eine solche Bibliothek namens mojs kennen.

Diese Bibliothek ist aufgrund ihrer einfachen deklarativen API sehr einfach zu verwenden. Die Animationen, die Sie mit Mojs erstellen können, sind flüssig und retinafreundlich, sodass alles professionell aussieht.

Mojs installieren

Es gibt viele Möglichkeiten, Mojs in Ihr Projekt einzubinden. Sie können die Bibliothek aus dem GitHub-Repository herunterladen. Alternativ können Sie Links zu den neuesten Repositories von verschiedenen CDNs direkt in Ihr Projekt einbinden.

<script src="//cdn.jsdelivr.net/mojs/latest/mo.min.js"></script>
Nach dem Login kopieren

Entwickler können Mojs auch mithilfe von Paketmanagern wie npm und Bower installieren, indem sie den folgenden Befehl ausführen:

npm install mo-js

bower install mojs
Nach dem Login kopieren

Sobald Sie die Bibliothek in Ihr Projekt eingebunden haben, können Sie mit den verschiedenen Modulen interessante Animationen erstellen.

HTML-Module in Mojs

Dieses Tutorial konzentriert sich auf die HTML-Module in der mojs-Bibliothek. Mit diesem Modul können verschiedene HTML-Elemente auf einer Webseite animiert werden.

Um ein DOM-Element zu animieren, müssen Sie zunächst ein Mojs-Objekt erstellen. Sie können Selektoren für die Elemente und deren Eigenschaften angeben, die Sie in diesem Objekt animieren möchten. Html

Durch das Festlegen eines Werts für

können Sie das Element identifizieren, das Sie mithilfe von Mojs animieren möchten. Sie können seinen Wert auf einen Selektor oder DOM-Knoten festlegen. el

HTML-Modul verfügt über einige vordefinierte Eigenschaften, die zum Animieren verschiedener transformationsbezogener Eigenschaften von DOM-Elementen verwendet werden können. Sie können beispielsweise ein Element entlang der X- oder Y-Achse neigen, indem Sie das Attribut

angeben. xyz 属性。您还可以使用 angleXangleYangleZ 属性沿不同轴旋转任何元素。这类似于 CSS 中相应的 rotateX()rotateY()rotateZ() 转换。您还可以借助 skewXskewY

Das Anwenden von Skalierungsanimationen auf verschiedene Elemente ist genauso einfach. Wenn Sie ein Element in beide Richtungen skalieren möchten, legen Sie einfach den entsprechenden Wert für das Attribut

fest, um die Skalierung des Elements entlang verschiedener Achsen zu animieren. scale 属性设置一个值即可。同样,您可以通过为 scaleXscaleY

Zusätzlich zu all diesen Eigenschaften, mit denen Sie die Anfangs- und Endwerte der Animation festlegen können, gibt es noch einige andere Eigenschaften, die die Animationswiedergabe steuern. Sie können

verwenden, das ebenfalls erwartet, dass sein Wert eine Zahl ist. duration 属性指定动画的持续时间。提供的值需要一个数字,它将设置动画持续时间(以毫秒为单位)。如果您想在延迟一段时间后开始动画,可以使用 delay 属性设置延迟值。就像 duration 一样,delay

Der Wert wird mit Hilfe des Attributs

festgelegt. Dieser plötzliche Sprung vom Endzustand zum Anfangszustand ist möglicherweise nicht in allen Situationen ideal. repeat 属性,可以多次重复动画。它的默认值为零,这意味着动画只会播放一次。设置为1将播放动画两次,设置为2将播放动画3次。动画完成第一次迭代后,元素将返回到其初始状态并再次开始动画(如果您已为 repeat

Wenn Sie möchten, dass die Animation nach Erreichen des Endzustands rückwärts abgespielt wird, können Sie die Eigenschaft

festlegen, um die Geschwindigkeit festzulegen, mit der die Animation abgespielt wird. Der Standardwert ist 1. Wenn Sie den Wert auf 2 setzen, wird die Animation doppelt so schnell abgespielt. Wenn Sie den Wert auf 0,5 setzen, wird die Animation ebenfalls mit halber Geschwindigkeit abgespielt. isYoyo 属性的值设置为 true。默认设置为 false 。最后,您可以使用 speed

Das von Ihnen erstellte Mojs-Objekt

animiert einzelne Elemente nicht alleine. Sie müssen die Methode play() für jede Mojs-Animation aufrufen, die Sie abspielen möchten. Hier ist ein Beispiel, das alle gerade besprochenen Eigenschaften verwendet, um drei verschiedene Boxen zu animieren: Html 对象不会自行为各个元素设置动画。您必须在要播放的每个 mojs Html 动画上调用 play()

var htmlA = new mojs.Html({
  el: ".a",
  x: {
    0: 400
  },
  angleZ: {
    0: 720
  },
  duration: 1000,
  repeat: 4,
  isYoyo: true
});

var htmlB = new mojs.Html({
  el: ".b",
  x: {
    400: 0
  },
  angleY: {
    0: 360
  },
  angleZ: {
    0: 720
  },
  duration: 1000,
  repeat: 4
});

var htmlC = new mojs.Html({
  el: ".c",
  x: {
    0: 400
  },
  angleY: {
    0: 360
  },
  scaleZ: {
    1: 2
  },
  skewX: {
    0: 30
  },
  duration: 1000,
  repeat: 4,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
  htmlB.play();
  htmlC.play();
});
Nach dem Login kopieren

您不仅限于为元素的变换属性设置动画。 mojs 动画库还允许您对所有其他可动画化的 CSS 属性进行动画处理。您只需确保为它们提供有效的初始值和最终值即可。例如,您可以通过为 background 指定有效值来设置元素的背景颜色动画。

如果要设置动画的 CSS 属性包含连字符,则在 mojs camelCase >Html 对象。这意味着您可以通过为 borderRadius 属性设置有效值来对 border-radius 进行动画处理。下面的例子应该可以让一切变得清晰:

var htmlA = new mojs.Html({
  el: ".a",
  x: { 
    0: 400
  },
  angleZ: {
    0: 360
  },
  background: {
    red: 'black'
  },
  borderWidth: {
    10: 20
  },
  borderColor: {
    'black': 'red'
  },
  borderRadius: {
    0: '50%'
  },
  duration: 2000,
  repeat: 4,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});
Nach dem Login kopieren

在上面的示例中,边框颜色从黑色变为红色,同时边框半径从 0 变化到 50%。您应该注意,无单位的数字将被视为像素值,而带单位的数字应指定为“50%”等字符串。

到目前为止,我们已经使用了一组补间属性来控制不同动画的播放。这意味着一个元素从 x:0 移动到 x:200 所需的时间与从 scale 进行缩放所需的时间相同: 1规模:2

这可能不是一个理想的行为,因为您可能希望延迟 延迟 某些属性的动画并控制它们的 duration 。在这种情况下,您可以在属性对象本身内部指定每个属性的动画播放参数。

var htmlA = new mojs.Html({
  el: ".a",
  x: { 
    0: 400,
    duration: 1000,
    repeat: 8,
    isYoyo: true
  },
  angleY: {
    0: 360,
    delay: 500,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  },
  angleZ: {
    0: 720,
    delay: 1000,
    duration: 1000,
    repeat: 4,
    isYoyo: true
  }
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});
Nach dem Login kopieren

Mojs 中可用的缓动功能

默认情况下,您创建的每个动画都会应用 sin.out 缓动。如果您希望使用不同的缓动函数进行动画播放,可以使用 easing 属性指定其值。默认情况下,当动画向后播放时,也会使用为 easing 指定的值。如果您想对向后动画应用不同的缓动,可以为 backwardEasing 属性设置一个值。

mojs 库有 11 种不同的内置缓动函数。这些是 lineareasesinquadcubicquartquintexpocircback elastic。线性缓动只有一种变体,名为 linear.none。这是有道理的,因为动画在不同阶段将以相同的速度进行。所有其他缓动函数都具有三种不同的变体,其中 inoutinout 添加在末尾。

有两种方法可以指定动画的缓动函数。您可以使用 elastic.in 这样的字符串,也可以使用 mojs.easing 对象直接访问缓动函数,例如 mojs.easing。 elastic.inout。在嵌入式 CodePen 演示中,我在每个条形上应用了不同的缓动函数,因此其宽度将以不同的速度变化。这将使您了解每次缓动时动画速度有何不同。

var allBoxes = document.querySelectorAll(".box");

var animations = new Array();

var easings = ['ease.in', 'sin.in', 'quad.in', 'cubic.in', 'quart.in', 'quint.in', 'expo.in', 'circ.in', 'back.in', 'elastic.in'];

allBoxes.forEach(function(box, index) {
  var animation = new mojs.Html({
    el: box,
    width: {
      0: 550,
      duration: 4000,
      repeat: 8,
      isYoyo: true,
      easing: easings[index]
    }
  });
  animations.push(animation);
});

document.querySelector(".play").addEventListener("click", function() {
  animations.forEach(function(anim) {
    anim.play();
  });
});
Nach dem Login kopieren

由于我们只想更改应用于每个框的缓动函数,因此我创建了一个循环来迭代它们,然后应用从 easings 数组中选取的缓动函数。这可以防止不必要的代码重复。您可以使用相同的技术为多个元素设置动画,其中属性值根据模式而变化。

控制动画播放

Mojs 提供了很多方法,允许我们在动画开始后控制不同元素的动画播放。您可以随时通过调用 pause() 方法暂停动画。同样,您可以通过调用 resume() 方法来恢复任何暂停的动画。

使用 pause() 暂停的动画将始终从您调用 pause() 的位置恢复。如果您希望动画在暂停后从头开始,您应该使用 stop() 方法。

您还可以使用 playBackward() 方法向后播放动画。之前,我们使用 speed 属性来控制 mojs 播放动画的速度。 Mojs 还有一个 setSpeed() 方法,可以在动画仍在进行时设置动画速度。在下面的示例中,我使用了所有这些方法来控制基于按钮点击的动画播放。

var speed = 1;

var htmlA = new mojs.Html({
  el: ".a",
  angleZ: {
    0: 720
  },
  borderRadius: {
    0: '50%'
  },
  borderWidth: {
    10: 100
  },
  duration: 2000,
  repeat: 9999,
  isYoyo: true
});

document.querySelector(".play").addEventListener("click", function() {
  htmlA.play();
});

document.querySelector(".pause").addEventListener("click", function() {
  htmlA.pause();
});

document.querySelector(".stop").addEventListener("click", function() {
  htmlA.stop();
});

document.querySelector(".faster").addEventListener("click", function() {
  speed = speed + 1;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});

document.querySelector(".slower").addEventListener("click", function() {
  speed = speed/2;
  htmlA.setSpeed(speed);
  document.querySelector(".data").innerHTML = "Speed: " + speed;
});
Nach dem Login kopieren

在下面的演示中,当前动画播放速度显示在左下角的黑框中。点击更快会将当前速度提高 1,点击更慢会将当前速度减半。

最终想法

在本教程中,我们学习了如何使用 mojs 中的 HTML 模块为网页上的不同 DOM 元素设置动画。我们可以使用选择器或 DOM 节点指定要设置动画的元素。该库允许您使用 mojs Html 对象的内置属性对不同的变换属性和任何元素的不透明度进行动画处理。但是,您还可以通过使用 camelCase 表示法指定名称来对其他 CSS 属性进行动画处理。

JavaScript 并非没有学习曲线,而且还有大量的框架和库可以让您忙碌起来。如果您正在寻找其他资源来学习或在工作中使用,请查看我们在 Envato 市场中提供的资源。

如果您希望我在本教程中澄清任何内容,请告诉我。我们将在下一个教程中介绍 mojs 库中的 Shape 模块。

Das obige ist der detaillierte Inhalt vonBeginnend mit der Mojs-Animationsbibliothek: HTML-Komponenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Ersetzen Sie Stringzeichen in JavaScript Ersetzen Sie Stringzeichen in JavaScript Mar 11, 2025 am 12:07 AM

Detaillierte Erläuterung der Methode für JavaScript -Zeichenfolge und FAQ In diesem Artikel werden zwei Möglichkeiten untersucht, wie String -Zeichen in JavaScript ersetzt werden: Interner JavaScript -Code und interne HTML für Webseiten. Ersetzen Sie die Zeichenfolge im JavaScript -Code Die direkteste Möglichkeit ist die Verwendung der Ersatz () -Methode: str = str.replace ("find", "ersetzen"); Diese Methode ersetzt nur die erste Übereinstimmung. Um alle Übereinstimmungen zu ersetzen, verwenden Sie einen regulären Ausdruck und fügen Sie das globale Flag G hinzu:: STR = Str.Replace (/fi

Erstellen Sie Ihre eigenen AJAX -Webanwendungen Erstellen Sie Ihre eigenen AJAX -Webanwendungen Mar 09, 2025 am 12:11 AM

Hier sind Sie also bereit, alles über dieses Ding namens Ajax zu lernen. Aber was genau ist das? Der Begriff AJAX bezieht sich auf eine lose Gruppierung von Technologien, mit denen dynamische, interaktive Webinhalte erstellt werden. Der Begriff Ajax, ursprünglich von Jesse J geprägt

Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Wie erstelle ich meine eigenen JavaScript -Bibliotheken? Mar 18, 2025 pm 03:12 PM

In Artikel werden JavaScript -Bibliotheken erstellt, veröffentlicht und aufrechterhalten und konzentriert sich auf Planung, Entwicklung, Testen, Dokumentation und Werbestrategien.

Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Wie optimiere ich den JavaScript -Code für die Leistung im Browser? Mar 18, 2025 pm 03:14 PM

In dem Artikel werden Strategien zur Optimierung der JavaScript -Leistung in Browsern erörtert, wobei der Schwerpunkt auf die Reduzierung der Ausführungszeit und die Minimierung der Auswirkungen auf die Lastgeschwindigkeit der Seite wird.

Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Wie debugge ich den JavaScript -Code effektiv mithilfe von Browser -Entwickler -Tools? Mar 18, 2025 pm 03:16 PM

In dem Artikel werden effektives JavaScript -Debuggen mithilfe von Browser -Entwickler -Tools, der Schwerpunkt auf dem Festlegen von Haltepunkten, der Konsole und der Analyse der Leistung erörtert.

JQuery Matrixeffekte JQuery Matrixeffekte Mar 10, 2025 am 12:52 AM

Bringen Sie Matrix -Filmeffekte auf Ihre Seite! Dies ist ein cooles JQuery -Plugin, das auf dem berühmten Film "The Matrix" basiert. Das Plugin simuliert die klassischen grünen Charakter-Effekte im Film und wählen Sie einfach ein Bild aus, und das Plugin verwandelt es in ein mit numerischer Zeichen gefüllte Bild im Matrix-Stil. Komm und probiere es aus, es ist sehr interessant! Wie es funktioniert Das Plugin lädt das Bild auf die Leinwand und liest die Pixel- und Farbwerte: Data = ctx.getImagedata (x, y, setting.grainize, setting.grainesize) .data Das Plugin liest geschickt den rechteckigen Bereich des Bildes und berechnet JQuery, um die durchschnittliche Farbe jedes Bereichs zu berechnen. Dann verwenden Sie

So bauen Sie einen einfachen JQuery Slider So bauen Sie einen einfachen JQuery Slider Mar 11, 2025 am 12:19 AM

In diesem Artikel werden Sie mit der JQuery -Bibliothek ein einfaches Bildkarousel erstellen. Wir werden die BXSLIDER -Bibliothek verwenden, die auf JQuery basiert und viele Konfigurationsoptionen zum Einrichten des Karussells bietet. Heutzutage ist Picture Carousel zu einem Muss auf der Website geworden - ein Bild ist besser als tausend Wörter! Nachdem Sie sich entschieden haben, das Bild -Karussell zu verwenden, ist die nächste Frage, wie Sie es erstellen. Zunächst müssen Sie hochwertige, hochauflösende Bilder sammeln. Als nächstes müssen Sie ein Bildkarousel mit HTML und einem JavaScript -Code erstellen. Es gibt viele Bibliotheken im Web, die Ihnen helfen können, Karussell auf unterschiedliche Weise zu erstellen. Wir werden die Open -Source -BXSLIDER -Bibliothek verwenden. Die BXSLIDER -Bibliothek unterstützt reaktionsschnelles Design, sodass das mit dieser Bibliothek gebaute Karussell an alle angepasst werden kann

So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter So laden und herunterladen Sie CSV -Dateien mit Angular hoch und laden Sie sie herunter Mar 10, 2025 am 01:01 AM

Datensätze sind äußerst wichtig für den Aufbau von API -Modellen und verschiedenen Geschäftsprozessen. Aus diesem Grund ist das Import und Exportieren von CSV eine häufig benötigte Funktionalität. In diesem Tutorial lernen Sie, wie Sie eine CSV-Datei in einem Angular herunterladen und importieren.

See all articles