Get best of the week

Schnelltests von Motionia.js und Consoleimg.js


Carl Heyerdahl

Guten Tag.

Dieser kurze Artikel befasst sich mit dem Testen der Funktionen einiger kleiner neuer JavaScript-Bibliotheken - motionia.js und consoleimg.js . Die erste dient zum Arbeiten mit Animationen, die zweite zum Ausgeben von Bildern an die Konsole.

Motionia.js


Motionia.js ist eine Bibliothek zum Arbeiten mit Animationen.

Elemente werden mit animiert motionia('target', 'anim'), wobei Ziel ein beliebiges HTML-Element (ID, Klasse, Tag) ist und Animation der Name der Animation ist.

Laut dem Entwickler bietet motionia.js mehr als 100 integrierte Animationen mit Erweiterbarkeit.

Wir verbinden die Bibliothek:

<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>

Wir erstellen fünf Container. Fügen Sie jedem einen Klickereignishandler hinzu. Durch Klicken wird die Funktion „motionia“ aufgerufen, die als Argumente das Animationsziel (animiertes Element), den Namen der Animation und in zwei Fällen (den ersten und den letzten Container) einen zusätzlichen Parameter übergibt - Animationseinstellungen:

<div class="box1" onclick="motionia('.box5', 'slideX', '100px')">slideX</div>
<div class="box2" onclick="motionia('.box3', 'bounceIn')">bounceIn</div>
<div class="box3" onclick="motionia('.box4', 'rollIn')">rollIn</div>
<div class="box4" onclick="motionia('.box2', 'slideIn')">slideIn</div>
<div class="box5" onclick="motionia('.box1', 'slideY', '-100px')">slideY</div>

Stile hinzufügen:

body {
	margin: 0;
	height: 100vh;
	background: radial-gradient(circle, lightgreen, darkgreen);
	display: flex;
	justify-content: center;
	align-items: center;
}

div {
	margin: 0 .5em;
	width: 100px;
	height: 100px;
	background: linear-gradient(skyblue, steelblue);
	border-radius: 5px;
	box-shadow: 0 1px 2px rgba(0,0,0,.8);
	display: inherit;
	justify-content: center;
	align-items: center;
	font-family: system-ui;
	font-size: 1.2em;
	font-weight: bold;
	cursor: pointer;
	user-select: none;
}

Ergebnis:


Setzen Sie einen Stern auf Github für eine Idee.

Unter den Nachteilen kann Folgendes festgestellt werden:

  • Nach meinen Berechnungen gibt es 33 integrierte Animationen ( Animate.css hat zum Beispiel 97).
  • Einige Animationen funktionieren nicht, z. B. Flip.
  • Die Animationen sind ziemlich einfach.
  • Wenn wir versuchen, in einem anderen Skript zu verwenden, erhalten wir Uncaught ReferenceError: motionia is not defined, d.h. Sie können es nur in dem integrierten Skript verwenden, das nicht comme il faut ist.
  • Wird von jQuery verwendet, das auch nicht comme il faut ist. Ich habe nichts gegen jQuery, aber solche Funktionen könnten in reinem JS implementiert werden.
  • Von Selektoren sind nur Bezeichner, Klassen und Tags verfügbar.

Natürlich entscheiden Sie, ob Sie die Bibliothek nutzen möchten oder nicht.

Consoleimg.js


Consoleimg.js - Wie der Name schon sagt, handelt es sich um eine Bibliothek zur Ausgabe von Bildern an die Konsole.

Wir finden und laden ein geeignetes Bild herunter (alle Formate werden unterstützt, einschließlich gif und svg), laden das Skript von Github herunter und verbinden es:

<script src="consoleimg.min.js"></script>

Das Bild wird in der Konsole mit angezeigt consoleimg.load('image', {size: 320, color: 'transparent'}), wobei Bild der Name des Bildes ist, Größe die maximale Bildhöhe ist (standardmäßig 320 Pixel), Farbe die Hintergrundfarbe ist (standardmäßig transparent).

consoleimg.load('img.png', {size: 320, color: '#fff'})

Ergebnis:



Nutzlos, aber lustig.

Der Code ist hier .

Vielen Dank für Ihre Aufmerksamkeit.

More articles:


All Articles