Schreiben von Animationen, die Ihre Website zum Leben erwecken

Webanimation ist einer der Faktoren, die das Aussehen und Gefühl Ihrer Website stark verbessern können. Leider, im Gegensatz zu mobilen Apps, gibt es nicht so viele Websites, die Animationen zu ihrem Vorteil nutzen, wie man denken würde. Wir möchten nicht, dass Ihre Website dazugehört, daher ist dieser Artikel für Sie und alle anderen, die nach Möglichkeiten suchen, Animationen für eine bessere Benutzererfahrung einzusetzen! Insbesondere werden wir lernen, wie wir Webinteraktionen mit CSS-Animationen erfreulich gestalten.

Das werden wir gemeinsam bauen

---

Bevor wir weitermachen, ist es erwähnenswert, dass ich davon ausgehe, dass Sie zumindest einige Kenntnisse über moderne Front-End-Frameworks und ein grundlegendes Verständnis von CSS-Animationen haben. Wenn nicht, keine Sorge! CSS-Tricks bietet großartige Anleitungen zu React und Vue sowie einen ausführlichen Almanach-Beitrag zur CSS animation-Eigenschaft.

Gut? OK, reden wir darüber, warum wir überhaupt Animationen verwenden würden und behandeln einige grundlegende Informationen zu CSS-Animationen.

Warum sollten wir etwas animieren?

Wir könnten wahrscheinlich einen ganzen Beitrag zu diesem Thema allein machen. Oh, warte! Sarah Drasner hat das bereits getan und ihre Punkte sind sowohl treffend als auch überzeugend.

Aber um die Dinge basierend auf meinen eigenen Erfahrungen zusammenzufassen

• Animationen verbessern die Art und Weise, wie Benutzer mit einer Benutzeroberfläche interagieren. Zum Beispiel können intelligente Animationen die kognitive Belastung reduzieren, indem sie Benutzern einen besseren Kontext zwischen Seitenübergängen bieten.
• Sie können den Benutzern klare Hinweise geben, z. B. worauf wir ihre Aufmerksamkeit lenken wollen.
• Animationen dienen selbst als ein weiteres Designmuster und helfen Benutzern, sich emotional an die Benutzeroberfläche zu binden und mit ihr zu interagieren.
• Ein weiterer Vorteil der Verwendung von Animationen ist, dass sie den Eindruck erwecken können, dass eine Website oder App schneller lädt, als sie tatsächlich tut.

Ein paar Hausregeln bei Animationen

Haben Sie jemals eine Website getroffen, die alles animiert? Wow, das kann anstrengend sein. Hier sind also ein paar Dinge, die Sie bei der Arbeit mit Animationen vermeiden sollten, damit Ihre App nicht in dasselbe Boot fällt

• Vermeiden Sie das Animieren von CSS-Eigenschaften außer transform und opacity. Wenn andere Eigenschaften animiert werden müssen, wie z. B. Breite oder Höhe, stellen Sie sicher, dass nicht viele Layoutänderungen gleichzeitig stattfinden. Animationen haben tatsächlich einen Preis, und Sie können genau sehen, wie viel, indem Sie sich auf CSS Triggers beziehen.
• Auch wenn Animationen wahrgenommene Leistungsgewinne erzielen können, gibt es tatsächlich einen Punkt der abnehmenden Rendite, wenn es um ihre Verwendung geht. Das gleichzeitige Animieren zu vieler Elemente kann zu einer verringerten Leistung führen.

Jetzt können wir mit etwas Code praktisch werden!

Lass uns eine Musik-App bauen

Wir werden die Musik-App bauen, die wir uns zuvor angesehen haben, die von Aurélien Salomons Dribbble-Shot inspiriert ist. Ich habe dieses Beispiel gewählt, damit wir uns auf Animationen konzentrieren können, nicht nur innerhalb einer Komponente, sondern auch zwischen verschiedenen Routen. Wir werden diese App mit Vue erstellen und Animationen mit Vanilla-CSS (d. h. ohne Framework) erstellen.

Animationen sollten Hand in Hand mit der UI-Entwicklung gehen. Das Erstellen einer Benutzeroberfläche vor der Definition ihrer Bewegung wird wahrscheinlich viel mehr Zeit kosten. In diesem Fall bietet der Dribbble-Shot den entsprechenden Umfang für uns.

Beginnen wir mit der Entwicklung.

Schritt 1: Die App lokal starten

Zuerst die Dinge. Wir müssen ein neues Vue-Projekt einrichten. Auch hier gehen wir von einem grundlegenden Verständnis von Vue aus, also schauen Sie sich bitte die Anleitung zum Erlernen von Vue an, um weitere Informationen zur Einrichtung zu erhalten.

Wir benötigen einige Abhängigkeiten für unsere Arbeit, insbesondere vue-router für den Übergang zwischen Ansichten und sass-loader, damit wir in Sass schreiben und zu CSS kompilieren können. Hier ist ein detailliertes Tutorial zur Verwendung von Routen und Sass kann installiert werden, indem Sie die Befehlszeile auf das Projektverzeichnis richten und npm install -D sass-loader node-sass verwenden.

Wir haben, was wir brauchen!

Schritt 2: Routen einrichten

Für die Erstellung von Routen erstellen wir zuerst zwei minimale Komponenten – Artists.vue und Tracks.vue. Wir erstellen eine neue Datei im src-Ordner namens router.js und fügen Routen für diese Komponenten hinzu wie

import Vue from 'vue'
import Router from 'vue-router'
import Artists from './components/Artists.vue'
import Tracks from './components/Tracks.vue'

Vue.use(Router)
export default new Router({
	mode: 'history',
	routes: [
		{
			path: '/',
			name: 'artists',
			component: Artists
		},
		{
			path: '/:id',
			name: 'tracks',
			component: Tracks
		}
	]
})

Importieren Sie router.js in die main.js und fügen Sie es zur Vue-Instanz hinzu. Ersetzen Sie schließlich den Inhalt Ihrer App.vue durch <router-view/>.

Schritt 3: Die Komponenten und Inhalte für die Musik-App erstellen

Wir benötigen zwei Komponenten, zwischen denen wir mit Animation animieren werden. Das werden sein

1. Artists.vue: Ein Raster von Künstlern
2. Tracks.vue: Ein Künstlerbild mit einer Zurück-Schaltfläche

Wenn Sie ein wenig vorausspringen möchten, hier sind einige Assets zum Arbeiten

1. Bilder und Beispieldaten im JSON-Format.
2. Inhalte für die Komponenten

Wenn alles gesagt und getan ist, werden die beiden Ansichten etwa so aussehen

Schritt 4: Animieren!

Hier sind wir, der Teil, zu dem wir uns die ganze Zeit wirklich durchringen wollten. Die wichtigste Animation in der App ist der Übergang von Artists zu Tracks beim Klicken auf einen Künstler. Es sollte sich nahtlos anfühlen, wobei das Klicken auf ein Künstlerbild dieses Bild in den Fokus rückt, während es von einer Ansicht in die nächste übergeht. Dies ist genau die Art von Animation, die wir selten in Apps sehen, die aber die kognitive Belastung für Benutzer drastisch reduzieren kann.

Um sicherzustellen, dass wir uns alle auf dem gleichen Stand befinden, bezeichnen wir das erste Bild in der Sequenz als „vorheriges“ Bild und das zweite als „aktuelles“ Bild. Den Effekt zu erzielen ist relativ einfach, solange wir die Abmessungen und die Position des vorherigen Bildes im Übergang kennen. Wir können das aktuelle Bild animieren, indem wir es entsprechend dem vorherigen Bild transformieren.

Die Formel, die ich verwende, ist transform: translate(x, y) scale(n), wobei n gleich der Größe des vorherigen Bildes geteilt durch die Größe des aktuellen Bildes ist. Beachten Sie, dass wir einen statischen Wert für n verwenden können, da die Abmessungen für alle Bilder fest sind. Beispielsweise beträgt die Bildgröße in der Ansicht Artists 190x190 und in der Ansicht Tracks 240x240. Daher können wir n durch 190/240 = 0,791 ersetzen. Das bedeutet, dass der Transformationswert in unserer Gleichung translate(x, y) scale(0,791) wird.

Als nächstes müssen wir x und y finden. Wir können diese Werte über ein Klickereignis in der Ansicht Artists erhalten wie

const {x, y} = event.target.getBoundingClientRect()

…und diese Werte dann an die Tracks-Ansicht senden, während wir die Route wechseln. Da wir keine State-Management-Bibliothek verwenden, kommunizieren die beiden Komponenten über ihre übergeordnete Komponente, die Top-Level-Komponente App.vue. In App.vue erstellen wir eine Methode, die die Route wechselt und die Bildinformationen als Parameter sendet.

gotoTracks(position, artistId) {
	this.$router.push({
		name: 'tracks',
		params: {
			id: artistId,
			position: position
		}
	})
}

Hier ist der relevante Code aus dem Repo als Referenz, falls Sie interessiert sind.

Da wir die Position und ID des Bildes in Tracks erhalten haben, verfügen wir über alle erforderlichen Daten, um es anzuzeigen und zu animieren. Wir rufen zuerst Künstlerinformationen (insbesondere den Namen und die Bild-URL) anhand der Künstler-ID ab.

Um das Bild zu animieren, müssen wir den transform-Wert von der Startposition des Bildes berechnen. Zum Festlegen des transform-Werts verwende ich benutzerdefinierte CSS-Eigenschaften, was auch mit CSS-in-JS-Techniken möglich ist. Beachten Sie, dass die Bildposition, die wir über Props erhalten, relativ zum Fenster ist. Daher müssen wir einen festen Offset subtrahieren, der durch den Abstand des Container-<div> verursacht wird, um unsere Mathematik auszugleichen.

const { x, y } = this.$route.params.position
// padding-left
const offsetLeft = 100
// padding-top
const offsetTop = 30

// Set CSS custom property value
document.documentElement.style.setProperty(
	'--translate', 
	`translate(${x - offsetLeft}px, ${y - offsetTop}px) scale(0.792)`
)

Wir werden diesen Wert verwenden, um eine Keyframe-Animation zu erstellen, um das Bild zu bewegen

@keyframes move-image {
	from {
		transform: var(--translate);
	}
}

Dies wird der CSS-Animation zugewiesen

.image {
	animation: move-image 0.6s;
}

…und es animiert das Bild von diesem Transformationswert zu seiner ursprünglichen Position beim Laden der Komponente.

Wir können die gleiche Technik verwenden, wenn wir die umgekehrte Richtung einschlagen, Tracks zu Artists. Da wir bereits die Position des angeklickten Bildes in der übergeordneten Komponente gespeichert haben, können wir sie auch als Props an Artists übergeben.

Schritt 5: Zeigen Sie die Tracks an!

Es ist großartig, dass wir jetzt nahtlos zwischen unseren beiden Ansichten wechseln können, aber die Tracks-Ansicht ist im Moment ziemlich spärlich. Lassen Sie uns also die Trackliste für den ausgewählten Künstler hinzufügen.

Wir erstellen eine leere weiße Box und einen neuen Keyframe, um sie beim Laden der Seite nach oben zu schieben. Dann fügen wir drei Unterabschnitte hinzu: Aktuelle Tracks, Beliebte Tracks und Playlist. Auch hier gilt: Wenn Sie vorausspringen möchten, können Sie entweder die endgültige Code-Referenz oder Kopie aus dem Repository einsehen.

Recent Tracks ist die Reihe von Thumbnails direkt unter dem Künstlerbild, wobei jedes Thumbnail den Tracknamen und die Tracklänge darunter enthält. Da wir uns hier mit Animationen beschäftigen, erstellen wir eine Aufskalierungsanimation, bei der das Bild unsichtbar beginnt (opacity: 0) und etwas kleiner als seine natürliche Größe (scale(0,7)), dann enthüllt wird (opacity: 1) und auf seine natürliche Größe skaliert (transform: none).

.track {
	opacity: 0;
	transform: scale(0.7);
	animation: scale-up 1s ease forwards;
}

@keyframes scale-up {
	to {
		opacity: 1;
		transform: none;
	}
}

Die Popular Tracks-Liste und die Playlist befinden sich nebeneinander unter Recent Tracks, wobei Popular Tracks den größten Teil des Platzes einnimmt. Wir können sie beim ersten Aufruf mit einem weiteren Satz Keyframes ein wenig nach oben schieben

.track {
	...
	animation: slide-up 1.5s;
}

@keyframes slide-up {
	from {
		transform: translateY(140px);
	}
}

Damit die Animation natürlicher wirkt, erstellen wir einen Stagger-Effekt, indem wir jedem Element eine inkrementelle Animationsverzögerung hinzufügen.

@for $i from 1 to 5 {
	&:nth-child(#{$i + 1}) {
		animation-delay: #{$i * 0.05}s;
	}
}

Der obige Code sucht im Grunde nach jedem Kindelement und fügt jedem gefundenen Element eine Verzögerung von 0,05 Sekunden hinzu. Das erste Kind erhält also beispielsweise eine Verzögerung von 0,05 Sekunden, das zweite Kind eine Verzögerung von 0,10 Sekunden usw.

Schauen Sie, wie schön und natürlich das alles aussieht

Bonus: Mikrointeraktionen!

Eines der lustigen Dinge bei der Arbeit mit Animationen ist, über die kleinen Details nachzudenken, denn sie sind es, die die Dinge zusammenhalten und dem Benutzererlebnis Freude verleihen. Wir nennen diese Mikrointeraktionen und sie erfüllen einen guten Zweck, indem sie visuelles Feedback geben, wenn eine Aktion ausgeführt wird.

Je nach Komplexität der Animationen benötigen wir möglicherweise eine Bibliothek wie anime.js oder GSAP. Dieses Beispiel ist ziemlich einfach, daher können wir alles, was wir brauchen, durch Schreiben von CSS erledigen.

Erste Mikrointeraktion: Das Lautsprechersymbol

Holen wir uns zuerst ein Lautsprechersymbol im SVG-Format (Noun Project und Material Design sind gute Quellen). Beim Klicken animieren wir sein path-Element hinein und heraus, um den Lautstärkepegel anzuzeigen. Dafür erstellen wir eine Methode, die seine CSS-Klasse entsprechend dem Lautstärkepegel umschaltet.

<svg @click="changeVolume">
	<g :class="`level-${volumeLevel}`">
		<path d="..."/> <!-- volume level 1 -->
		<path d="..."/> <!-- volume level 2 -->
		<path d="..."/> <!-- volume level 3 -->
		<polygon points="..."/>
	</g>
</svg>

Basierend auf dieser Klasse können wir bestimmte path-Elemente wie folgt ein- und ausblenden

path {
	opacity: 0;
	transform-origin: left;
	transform: translateX(-5px) scale(0.6);
	transition: transform 0.25s, opacity 0.2s;
}

.level-1 path:first-child,
.level-2 path:first-child,
.level-2 path:nth-child(2),
.level-3 path {
	opacity: 1;
	transform: none;
}

Zweite Mikrointeraktion: Das Favoritensymbol

Gefällt es Ihnen, wenn Sie auf Twitters Herz-Button klicken? Das liegt daran, dass er sich durch die Art und Weise, wie er beim Klicken animiert wird, einzigartig und besonders anfühlt. Wir machen etwas Ähnliches, aber ganz schnell. Dazu holen wir zuerst ein SVG-Herz-Symbol und fügen es in das Markup ein. Dann fügen wir ihm eine federnde Animation hinzu, die beim Klicken ausgelöst wird.

@keyframes bounce {
	0%, 100% {
		transform: none;
	}
	30% {
		transform: scale(1.3);
	}
	60% {
		transform: scale(0.9);
	}
}

Eine weitere lustige Sache, die wir tun können, ist, andere kleine Herzsymbole um ihn herum mit zufälligen Größen und Positionen hinzuzufügen. Idealerweise würden wir ein paar absolute-positionierte HTML-Elemente mit einem Herzen als Hintergrund hinzufügen. Ordnen wir jedes davon wie unten an, indem wir seine left- und bottom-Werte einstellen.

Wir werden auch einen Fade-Away-Effekt einfügen, damit die Symbole beim Aufwärtsbewegen zu verschwinden scheinen, indem wir beim selben Klickereignis eine Keyframe-Animation hinzufügen.

@keyframes float-upwards {
	0%, 100% {
		opacity: 0;
	}
	50% {
		opacity: 0.7;
	}
	50%, 100% {
		transform: translate(-1px, -5px);
	}
}

Zusammenfassung

Das ist alles! Ich hoffe, Sie finden all das motivierend, um Animationen auf Ihren eigenen Websites und Projekten auszuprobieren.

Während ich dies schrieb, wollte ich auch die grundlegenden Animationsprinzipien erweitern, die wir zuvor gestreift haben, da ich glaube, dass sie bei der Auswahl von Animationsdauern und der Vermeidung bedeutungsloser Animationen helfen. Das ist wichtig zu diskutieren, denn Animationen richtig zu machen ist besser, als sie überhaupt zu machen. Aber das klingt nach einem ganz anderen Thema, das in einem zukünftigen Artikel behandelt werden sollte.