ANIJS: Eine deklarative Handhabungsbibliothek für CSS -Animationen

Animation war schon immer ein heißer Favorit unter den Schülern, die lernen, das Programm zu programmieren. Während eines kürzlichen Webentwicklungs -Workshops am Wochenende, an dem ich teilgenommen habe, gab es eine Diskussion über Animationen mit CSS. Dann stolperte ich auf ANIJS, ​​eine deklarative Handhabungsbibliothek für CSS -Animationen.

In diesem Tutorial werden wir sehen, worum es bei ANIJS geht und wie man es verwendet, um einige coole Animationseffekte zu erstellen.

Key Takeaways

• anijs ist eine deklarative Handhabungsbibliothek für CSS -Animationen, mit der Animationen mit einfachen, deklarativen Befehlen erstellt werden können, die direkt in HTML geschrieben wurden, wodurch die Verwaltung von Animationen vereinfacht wird.
• Die Bibliothek verwendet ein benutzerdefiniertes Attribut namens Data-Anijs in HTML5-Datenattributen, um deklarative Aussagen für Animationen zu erstellen. Beispielsweise bedeutet der Code `` Wenn sich das Eingabefeld fokussiert, wird eine "Wackel" -Animation zu einem Anker -Tag -Element ausgeführt.
• ANIJs können verwendet werden, um Webanwendungen mit Animationen zu verbessern. Das Tutorial verwendet das Beispiel einer einfachen Benutzerregistrierungs- und Anmeldungs-App, um zu demonstrieren
Die Bibliothek bietet auch die Möglichkeit, eine Funktion vor und nach Animationen mit dem Schlüsselwort "vor" aufzurufen. Dies kann verwendet werden, um den Animationsfluss zu steuern, z. B. die Validierung von Formulareinträgen, bevor eine Animation ausgeführt wird oder verschiedene Bildschirme angezeigt und versteckt werden, bevor eine Animation ausgeführt wird.

Einführung in Anijs

Verwenden von ANIJs können wir Animationen mit deklarativen Befehlen in unserem HTML schreiben. Es bietet eine einfachere Möglichkeit, Animationen mithilfe von Erklärungen zu verwalten, die die Logik ausdrücken. Unten finden Sie ein Beispiel für die ANIJS -deklarative Syntax:

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

In dem obigen Code heißt es in der deklarativen Syntax,

Wenn Sie sich konzentrieren, dann machen Sie ein Wackeln mit einem Anker -Tag -Element.

Erste Schritte

Im Verlauf dieses Tutorials erstellen wir eine App, die mit Anijs mit Animationen verbessert wird. Diese App ist eine einfache Benutzerregistrierungs- und Anmeldungs ​​-App, die einige Animationen mit ANIJs enthält. Der Hauptaugenmerk dieses Tutorials liegt darin, wie wir Animationen in unseren Web -Apps mit Anijs funktionieren können.

loslegen, ANIJs herunterladen und in Ihre Seite einbeziehen oder auf die CDN -Version verweisen.

Für das Styling werden wir das Animate.css libray von Dan Eden verwenden.

<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

Erstellen des Anmeldebildschirms

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>

Zuerst erstellen wir einen Bildschirm, damit sich der Benutzer anmeldet. Hier ist das HTML:

Was wir bisher haben, ist nur eine statische Anmeldeseite. Mit einigen CSS sieht es so aus:

<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>

Siehe das Tutorial von Stift ANIJS, ​​statischer Anmeldebildschirm von SitePoint (@sinepoint) auf CodePen.

Wir haben unseren Bildschirm erstellt, jetzt müssen wir den Anmeldevorgang validieren. Um den animierten Effekt anzuhängen, verwenden wir das Data-Anijs-Attribut auf dem jeweiligen Element. Wir schreiben unsere deklarativen Aussagen mithilfe von HTML5-Datenattributen unter Verwendung eines benutzerdefinierten Attributs namens Data-Anijs. Fügen wir dieses Attribut zur Signin -Taste hinzu, wie unten gezeigt:

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

In dem obigen Code heißt es in dem deklarativen Satz Wenn die Schaltfläche Anmeldung geklickt wird, machen Sie eine Scharnieranimation zum Element mit der Klasse .Login_screen . Wenn wir also auf die Schaltfläche klicken, wirkt sich die Scharnieranimation aus, wie Sie sehen können, indem Sie auf die Schaltfläche "Signin" in der folgenden Demo klicken:

Siehe die Demo der Stift Anijs, fehlgeschlagen von SitePoint (@sinepoint) auf CodePen.

In der obigen Demo funktioniert die Animation, wenn auf die Schaltfläche klickt, unabhängig davon, ob es eine gültige oder ungültige Anmeldung gibt. Das ist nicht wirklich das, was wir wollen. Ändern wir den vorhandenen Code also so auf eine ungültige Anmeldung.

Um zu überprüfen, ob die Anmeldung gültig ist, müssen wir vor der Animation eine Validierungsfunktion aufrufen. Dafür verwenden wir das vor dem Keyword. Eine detaillierte Dokumentation zum Aufrufen einer Funktion vor und nach Animationen finden Sie in den ANIJS -Dokumenten. Wir werden im Ereignisobjekt übergeben, um die Animation sowie den AnimationContext auszulösen.

Erstens definieren wir den ANIJS -Helfer und dann die vorab Animationsfunktion deklarieren. So sieht die Funktion aus:

<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

Wir werden auch das Datenattribut der Signin -Schaltfläche so ändern, dass die vorab Animationsfunktion angezeigt wird, wie unten gezeigt:

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>

Jetzt findet die Animation nur statt, wenn das Feld E -Mail oder Passwort leer ist. Die Animation wird mit dem Befehl AnimationContext.run () im obigen JavaScript -Code -Block ausgeführt. Wenn sowohl eine E -Mail als auch ein Passwort eingegeben werden, wird eine "Verarbeitung ..." -Meldung angezeigt.

Hier ist eine Demo von dem, was wir bisher haben:

Siehe die Demo der Stift -Anijs, die Signin -Taste von SitePoint (@sinepoint) auf CodePen validiert.

Erstellen des Registers Bildschirm

Als nächstes erstellen wir eine Register- (oder Anmeldung) für unsere App. Wie Sie sehen können, haben wir bereits einen Register -Link auf unserer Anmeldeseite. Wir werden dem Register -Link einige Animationen und Ereignisse anschließen. Fügen Sie zunächst die folgende HTML für die Register -Seite zu unserem vorhandenen HTML hinzu:

<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>

Beachten Sie das Inline -CSS mit Anzeige: Keine im Element .reg_screen, wodurch dieser Bildschirm standardmäßig versteckt wird. Um den Register-Link im Anmeldebildschirm mit diesem neuen Bildschirm zu verbinden, fügen wir dem Link:

das Attribut "Data-Anijs" hinzu:

<span><span><span><input> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</span>></span></span></span>

Der obige Code besagt Wenn der Anmeldungslink klickt, führen Sie eine Rollin-Animation auf dem Element durch, das eine Klasse von reg_screen enthält (das ist unser Registerbildschirm). Dies funktioniert jedoch nicht, da der Registerbildschirm versteckt ist.

Was wir tun müssen, ist eine Funktion, bevor die Animation auftritt. In dieser Funktion verbergen wir den Anmeldebildschirm, während wir den Registerbildschirm sichtbar machen. Dann führen wir die Animation aus. Hier ist das JavaScript:

<span><span><span><script> src<span >="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</script></span>></span><span><span></span>></span></span>

Dann ändern wir das Data-Anijs-Attribut des Registers Link:

<span><span><span><link> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</span>></span></span></span>

Hier ist eine Demo mit unserem neu hinzugefügten Code:

Siehe den Stift Zdjlc von sitepoint (@sitepoint) auf CodePen.

Jetzt, da der Registerbildschirm sichtbar gemacht werden kann, müssen wir den Anmeldeverbindungslink im Registerbildschirm auch mit dem ursprünglichen Anmeldebildschirm anschließen, ähnlich wie wir es gerade für den Registerbildschirm gemacht haben. Hier ist die Funktion:

<span><span><span><div> class<span>="container"</span>>

    <span><span><span><div> id<span>="divLogin"</span> class<span>="login_screen"</span>>
      <span><span><span><h2 id="id-span-spnLogin-span-gt"> id<span>="spnLogin"</span>></h2></span>Sign In<span><span></span>></span>
</span>      <span><span><span><input> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="btn"</span>></a></span>
</span>        SignIn
      <span><span><span></span>></span>
</span>      <span><span><span><a> href<span>="#"</span> class<span>="signup-link"</span>></a></span>Register?<span><span></span>></span>
</span>    <span><span><span></span></span></span></span></span></span></span></span>
</div></span>></span><!-- .login-screen -->
</span>
<span><span><span></span></span></span>
</div></span>></span><!-- .container --></span>

Und hier ist das modifizierte Data-Anijs-Attribut für den Anmeldelink:

<span><span><span><a> href<span>="#"</span> 
</a></span></span><span>   <span>class<span>="btn"</span> 
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen"</span>></span>
</span>  SignIn
<span><span><span></span>></span></span></span>

Und hier ist eine Demo mit dem neuen Code:

Anmerkung des Editors: Die folgenden Demos scheinen in diesen Einbettungen nicht zu 100% zu funktionieren, insbesondere wenn Sie versuchen, zwischen „Anmelden“ und „Register“ mehrmals hin und her zu wechseln. Versuchen Sie den Link "Bearbeiten" im CodePen -Frame, um die vollständige Demo anzuzeigen, in der er gut funktionieren sollte.

Siehe die Demo der Stift Anijs, anzeigen Login & Show Register von SitePoint (@sinepoint) auf CodePen.

Ähnlich wie beim Anmeldebildschirm werden wir das Registerformular mit einer Funktion validieren:

<span>var animationHelper = AniJS.getHelper(),
</span>    spnLogin <span>= document.getElementById('spnLogin');
</span>
animationHelper<span>.validateLogin = function (e<span>, animationContext</span>) {
</span>    <span>var email = document.getElementById('txtLoginId').value;
</span>    <span>var pass = document.getElementById('txtLoginPass').value;
</span>    <span>if (email && pass) {
</span>      spnLogin<span>.innerHTML = 'Processing...';
</span>    <span>} else {
</span>      spnLogin<span>.innerHTML = 'Fill Required fields.';
</span>      animationContext<span>.run();
</span>    <span>}
</span><span>}</span>

Normalerweise würden wir viele dieser Objekte in Variablen zwischengespeichert, anstatt die Referenzen auf sie zu wiederholen. Wir machen es so nur für dieses einfache Beispiel.

und schließlich ändern wir das Data-Anijs-Attribut in unserem HTML, um den Animations- und Funktionsaufruf aufzunehmen.

<span><span><span><a> href<span>="#"</span>
</a></span></span><span>   <span>class<span>="btn"</span>
</span></span><span>   <span>data-anijs<span>="if: click, do: hinge animated, to: .login_screen, before: validateLogin"</span>></span>
</span>  SignIn
<span><span><span></span>></span></span></span>

Und hier ist unsere letzte Demo:

Siehe das Finale des Stift -Anijs -Demo von SitePoint (@sinepoint) auf CodePen.

Schlussfolgerung

In diesem Tutorial ist das, was wir diskutiert haben, nur ein kleiner Höhepunkt in dieser fantastischen Bibliothek. Eingehende Informationen zur Verwendung finden Sie in den ANIJS-Dokumenten.

häufig gestellte Fragen (FAQs) zu Anijs

Was ist Anijs und wie funktioniert es? Es ermöglicht Entwicklern, Animationen mit einer einfachen und intuitiven Syntax zu erstellen, ohne komplexen JavaScript -Code schreiben zu müssen. ANIJS arbeitet, indem es das Data-Anijs-Attribut in Ihren HTML-Elementen analysiert und die entsprechenden Animationen ausführt. Dies erleichtert es, Animationen zu verwalten und zu steuern, da Sie sie direkt in Ihrem HTML definieren können.

Wie installiere ich Anijs?

Die Installation von Anijs ist einfach. Sie können es direkt aus dem GitHub -Repository herunterladen oder einen Paketmanager wie NPM oder Bower verwenden. Nach dem Herunterladen müssen Sie lediglich das ANIJS -Skript in Ihre HTML -Datei aufnehmen. Anschließend können Sie ANIJs verwenden, indem Sie das Data-Anijs-Attribut zu Ihren HTML-Elementen hinzufügen.

Kann ich ANIJs mit anderen JavaScript-Bibliotheken verwenden? Bibliotheken. Es stört die Funktionalität anderer Bibliotheken nicht und Sie können sie neben Bibliotheken wie JQuery, React oder Angular verwenden. Dies macht ANIJs zu einem vielseitigen Tool zum Erstellen von Animationen in einer Vielzahl von Webentwicklungskontexten. HTML -Elemente und Definieren der Animationsparameter. Das Data-Anijs-Attribut verwendet eine einfache Syntax, die das Ereignis, das Element animiert, die zu angewendete Animation und die Rückruffunktion. Sie können auch die ANIJS -Helferfunktionen verwenden, um den Animationsfluss zu steuern.

Welche Arten von Animationen kann ich mit AniJs erstellen? Sie können einfache Animationen wie Verblassen und Folien sowie komplexere Animationen erstellen, die Transformationen und Übergänge beinhalten. ANIJS unterstützt auch Animationsketten und ermöglicht es Ihnen, Animationensequenzen zu erstellen, die in einer bestimmten Reihenfolge ausgeführt werden.

Kann ich ANIJs für reaktionsschnelles Design verwenden? Die mit ANIJs erstellten Animationen basieren auf CSS, was bedeutet, dass sie skaliert und an verschiedene Bildschirmgrößen und -auflösungen angepasst werden können. Dies macht ANIJs zu einem nützlichen Tool zum Erstellen von Animationen, die sowohl auf Desktop- als auch auf mobilen Geräten gut funktionieren. von Animationen. Sie können die Dauer der Animation im Data-Anijs-Attribut angeben und die Delay-Funktion verwenden, um die Animation für einen bestimmten Zeitraum zu pausieren. Sie können auch die ANIJS -Helferfunktionen verwenden, um den Animationsfluss und das Timing zu steuern. Sie können dieselben Animationsparameter und Steuermethoden auf SVG -Elemente wie Sie auf regelmäßige HTML -Elemente anwenden. Auf diese Weise können Sie komplexe Animationen erstellen, die SVG-Grafiken und -formen beinhalten. Animationseigenschaften. Wenn eine Animation nicht wie erwartet funktioniert, können Sie die Entwickler -Tools des Browsers verwenden, um das HTML -Element zu inspizieren und die angewendeten CSS -Eigenschaften zu überprüfen. Sie können auch die JavaScript -Konsole auf alle Fehlermeldungen im Zusammenhang mit ANIJs überprüfen.

Kann ich zur Entwicklung von Anijs beitragen? Sie können beitragen, indem Sie Fehler melden, neue Funktionen vorschlagen, die Dokumentation verbessern oder Pull -Anfragen mit Codeverbesserungen senden. Weitere Informationen finden Sie auf der ANIJS -Github -Seite.

Das obige ist der detaillierte Inhalt vonANIJS: Eine deklarative Handhabungsbibliothek für CSS -Animationen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!