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</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</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</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>

Erstellen des Anmeldebildschirms

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</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</span> class<span>="container"</span>></span>
</span>
    <span><span><span><div</span> id<span>="divLogin"</span> class<span>="login_screen"</span>></span>
</span>      <span><span><span><h2</span> id<span>="spnLogin"</span>></span>Sign In<span><span></h2</span>></span>
</span>      <span><span><span><input</span> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input</span> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="btn"</span>></span>
</span>        SignIn
      <span><span><span></a</span>></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="signup-link"</span>></span>Register?<span><span></a</span>></span>
</span>    <span><span><span></div</span>></span><!-- .login-screen -->
</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</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</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</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</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</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</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</span> class<span>="container"</span>></span>
</span>
    <span><span><span><div</span> id<span>="divLogin"</span> class<span>="login_screen"</span>></span>
</span>      <span><span><span><h2</span> id<span>="spnLogin"</span>></span>Sign In<span><span></h2</span>></span>
</span>      <span><span><span><input</span> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input</span> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="btn"</span>></span>
</span>        SignIn
      <span><span><span></a</span>></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="signup-link"</span>></span>Register?<span><span></a</span>></span>
</span>    <span><span><span></div</span>></span><!-- .login-screen -->
</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</span> id<span>="txtName"</span> type<span>="text"</span> data-anijs<span>="if: focus, do: wobble, to: a"</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</span> src<span>="http://cdn.jsdelivr.net/anijs/0.4.0/anijs-min.js"</span>></span><span><span></script</span>></span></span>

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

<span><span><span><link</span> rel<span>="stylesheet"</span>
</span></span><span>      <span>href<span>="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"</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</span> class<span>="container"</span>></span>
</span>
    <span><span><span><div</span> id<span>="divLogin"</span> class<span>="login_screen"</span>></span>
</span>      <span><span><span><h2</span> id<span>="spnLogin"</span>></span>Sign In<span><span></h2</span>></span>
</span>      <span><span><span><input</span> id<span>="txtLoginId"</span> type<span>="text"</span> placeholder<span>="Email Id"</span> /></span>
</span>      <span><span><span><input</span> id<span>="txtLoginPass"</span> type<span>="password"</span> placeholder<span>="Password"</span> /></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="btn"</span>></span>
</span>        SignIn
      <span><span><span></a</span>></span>
</span>      <span><span><span><a</span> href<span>="#"</span> class<span>="signup-link"</span>></span>Register?<span><span></a</span>></span>
</span>    <span><span><span></div</span>></span><!-- .login-screen -->
</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</span> href<span>="#"</span> 
</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></a</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</span> href<span>="#"</span>
</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></a</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!