So erstellen Sie Animationen und Übergänge mit Motion UI

Animationen und Übergänge ermöglichen es Designern, Veränderungen zu visualisieren und Inhalte zu differenzieren. Animationen und Übergänge sind bewegende Effekte, die Benutzern helfen, zu erkennen, wenn sich auf der Website etwas ändert, zum Beispiel wenn sie auf eine Schaltfläche klicken und eine neue Information auf dem Bildschirm erscheint. Durch das Hinzufügen von Bewegungen zu Apps und Websites wird die Benutzererfahrung verbessert, da Benutzer Inhalte intuitiver darstellen können .

Wir können Animationen und Übergänge entweder von Grund auf oder mithilfe von Bibliotheken oder Frameworks erstellen. Eine gute Nachricht für uns, Front-End-Leute, ist das Zitat von Zurb, dem Gründer von Foundation, Open-Source Motion UI von Oktober, dessen Animations- und Übergangsbibliothek auf Sass basiert.

Es wurde ursprünglich mit Foundation für Apps gebündelt und erhielt nun für die eigenständige Version eine Überarbeitung, einschließlich eines Animation-Warteschlangensystems und flexibler CSS-Muster . Motion UI unterstützt auch einige Komponenten des Foundation-Frameworks wie den Orbit-Schieberegler, den Toggler-Schalter und das Reveal-Modal, sodass es ein ziemlich robustes Werkzeug ist.

Anfangen

Obwohl Motion UI eine Sass-Bibliothek ist, müssen Sie sie nicht unbedingt mit Sass verwenden, da Sie von Zurb ein praktisches Starterkit erhalten, das nur das kompilierte CSS enthält. Sie können es von der Homepage von Motion UI herunterladen und schnell mit dem Prototyp beginnen, indem Sie die vordefinierten CSS-Animations- und Übergangsklassen verwenden.

Das Starter-Kit enthält nicht nur die Motion UI, sondern auch das Foundation-Framework. Das heißt, Sie können das Foundation-Grid und alle anderen Funktionen von Foundation for Sites verwenden, wenn Sie möchten.

Das Starter-Kit wird außerdem mit einer index.html Datei ausgeliefert, mit der Sie das Framework schnell testen können.

Wenn Sie anspruchsvollere Anpassungen benötigen und die leistungsstarken Sass-Mixins von Motion UI nutzen möchten, können Sie die Vollversion mit den .scss mit npm oder Bower installieren.

Die Dokumentation von Motion UI ist derzeit noch nicht fertig. Sie können es hier auf Github finden oder dazu beitragen, wenn Sie möchten.

Schnelles Prototyping

Um mit dem Prototyping zu beginnen, können Sie die Datei index.html des Starter-Kits bearbeiten oder eine eigene HTML-Datei erstellen. Sie können das Layout mithilfe des Foundation-Rasters erstellen, aber Motion UI kann auch als eigenständige Bibliothek ohne das Foundation-Framework verwendet werden.

Es gibt 3 Haupttypen vordefinierter CSS-Klassen in Motion UI:

1. Übergangsklassen - ermöglichen es, einem HTML-Element Übergänge hinzuzufügen, z. B. Schiebe-, Fading- und Scharniereffekte.
2. Animationsklassen - ermöglichen Ihnen das Verwenden verschiedener Schüttel-, Wackel- und Schleudereffekte
3. Modifikationsklassen - arbeiten mit Übergangs- und Animationsklassen zusammen und ermöglichen die Anpassung der Geschwindigkeit, des Timings und der Verzögerung einer Bewegung.

HTML erstellen

Das Tolle an vordefinierten CSS-Klassen ist, dass sie nicht nur als Klassen, sondern auch als andere HTML-Attribute verwendet werden können. Zum Beispiel können Sie sie zum Wertattribut der hinzufügen oder Sie können sie auch in Ihrem eigenen benutzerdefinierten data-* Attribut data-* .

Im folgenden Codefragment habe ich diese letztere Option gewählt, um Verhaltens- und Modifikationsklassen zu trennen . Ich habe die Modifiziererattribute " slow und "easy" als Klassen verwendet und ein benutzerdefiniertes Datenanimationsattribut für den Übergang " scale-in-up . Der Click me Button soll den Effekt auslösen.

 Klick mich 




        

          
          

		  
10 Pocket-Sized noch leistungsfähige Mini-Computer
            
Unsere täglichen Aktivitäten werden so von unseren Computern und mobilen Geräten angetrieben, dass es nur eine Frage der Zeit war, bevor Mini-PCs entstehen. Wie ihre viel größeren, alten Schule Pendants, tragen diese Mini-Computer Prozessoren, Betriebssysteme, RAM und sogar Speichermedien, sondern benötigen nur einen Bruchteil des Netzteils zu funktionieren, und auch einen Bruchteil des Preises zu besitzen.Sie s
			
(Tech- und Design-Tipps)
          
        
      

        

          
          

		  
Beeindruckende Blattkunst von Lorenzo Manuel Durán
            
Lorenzo Manuel Durán ist ein autodidaktischer Künstler aus Spanien, der mit Ölgemälden auf Leinwand begann. Eines Tages ließ er sich von einer blattfressenden Raupe inspirieren, um stattdessen zu den Blattgemälden zu wechseln ! Anfängliche Versuche führten zu einer Menge "verwundeter" Blätter, die in den Müll gelangen, aber nach einer Weile konnte Lorenzo mit nur zahnärztlichen Hilfsmitteln, einem Skalpell und seinen Händen Blütenblätter auf chirurgischer Ebene herstellen (erfahren Sie mehr über den Prozess, den er hatte) benutzt hier).Lorenzo hat in
			
(Tech- und Design-Tipps)
          
        
      

  
  
  



Interessante Artikel






			
	
				

					Responsive E-Mails schnell mit MJML Framework erstellen
					

			
	
				

					12 Android Apps zum Spielen klassischer Retro-Spiele
					
						







			
	
				

					So übertragen Sie Kontakte von Android auf den PC
					

			
	
				

					Erstellen Sie Responsive und Schöne ganzseitige Lightbox mit BaguetteBox.js