export const Play = ({ for: forId }) => { const onClick = () => { document.querySelector(`#${forId}`).play(); }; return ; }; ## Einführung Wenn du zu einer neuen Seite auf GitHub navigierst (auch auf dieser Webseite), siehst du oben auf der Seite eine Ladeleiste. Die Animation der Leiste ist flüssig und wirkt natürlich. Ich werde das zugrunde liegende Benutzererlebnis besprechen und eine ähnliche in React erstellen. In diesem Tutorial werde ich Remix als React-Framework verwenden. Du kannst jedoch jedes andere React-Framework oder jede andere Bibliothek verwenden, solange sie die Verfolgung des Seitenübergangszustands unterstützt. ## Benutzererlebnis Du hast vielleicht bemerkt, dass der Ladefortschritt nicht linear ist. Er beginnt schnell und verlangsamt sich schnell, dann schreitet er in kleinen Schritten voran. Sobald die Seite geladen ist, erreicht die Fortschrittsleiste schnell 100 % und verschwindet. Wenn du die Registerkarte Netzwerk in den Entwicklertools deines Browsers überprüfst, wirst du sehen, dass die Fortschrittsleiste nicht direkt mit der Netzwerkanfrage zusammenhängt, sondern vielmehr wie ein visueller Effekt ist. Dieses Design ist beabsichtigt und ein psychologischer Trick, um dem Benutzer das Gefühl zu geben, dass die Seite schneller lädt. Lass uns das mit einer linearen Fortschrittsleiste und einem traditionellen Spinner vergleichen:

Wie du sehen kannst, sieht die lineare Fortschrittsleiste etwas langsam aus, während der Spinner kein Feedback zum Fortschritt gibt. Die Fortschrittsleiste von GitHub vermittelt dem Benutzer ein Gefühl von Fortschritt und macht das Ladeerlebnis angenehmer. ### Aber warum? In der Mensch-Computer-Interaktion gibt es ein Konzept namens [wahrgenommene Leistung](https://developer.mozilla.org/en-US/docs/Learn/Performance/Perceived_performance). Es geht darum, wie schnell das System dem Benutzer erscheint, nicht darum, wie schnell es tatsächlich ist. Lineare Bewegungen können oft abrupt und mechanisch wirken, was mental anstrengender zu verfolgen sein kann (höhere kognitive Belastung). Natürlichere Bewegungen, wie das Abbremsen und Federn, können vorhersehbarer und leichter zu verarbeiten sein. Studien haben gezeigt, dass flüssigere Übergänge die kognitive Belastung der Benutzer verringern können, sodass Schnittstellen benutzerfreundlicher werden. Dies hilft, das System reaktionsschneller erscheinen zu lassen. Darüber hinaus fanden [Harrison et al. (2007)](https://chrisharrison.net/projects/progressbars/ProgBarHarrison.pdf) heraus, dass Benutzer die Fortschrittsleiste als schneller wahrnehmen, wenn sie der "Fast Power"-Abschlusskurve folgt, die der Fortschrittsleiste von GitHub sehr ähnlich ist. Progress chart

Wir können daraus schließen, dass der Schlüssel dazu, die Fortschrittsleiste schneller erscheinen zu lassen, darin besteht, "schnell zu beginnen, langsam zu werden und dann exponentiell zu beschleunigen". ## Erstellung der Fortschrittsleiste Lass uns nun eine ähnliche Fortschrittsleiste in React erstellen. Wir werden Remix und den `useNavigation`-Hook verwenden, um den Seitenübergangszustand zu verfolgen. Wenn du andere React-Frameworks verwendest, kannst du ähnliche APIs verwenden, um den gleichen Effekt zu erzielen. ### Animation arrangieren Um es noch natürlicher zu machen, werden wir Federanimationen aus [react-spring](https://www.react-spring.dev/) verwenden, um die Fortschrittsleiste zu animieren (diese Bibliothek ist bereits ein gutes Beispiel dafür, wie physikbasierte Animationen das Benutzererlebnis verbessern können). Wir können die Animation in drei Phasen unterteilen: 1. Schnell anfangen und schnell langsamer werden 2. Langsam und stetig voranschreiten 3. 100 % erreichen und verschwinden Mit den imperativen APIs von react-spring können wir diesen Effekt leicht erzielen. Hier ist der Code: ```tsx import { useSpring, useSpringRef, animated } from 'react-spring'; export const ProgressBar = () => { const api = useSpringRef(); const props = useSpring({ ref: api, }); const start = useCallback(() => { void api.start({ from: { width: '0%' }, to: [ { width: '10%', config: { tension: 160, friction: 22, clamp: true } }, { width: '15%', config: { duration: 5000, easing: (value) => value } }, { width: '100%', config: { tension: 200, friction: 1000 } }, ], }); }, [api]); const end = useCallback(() => { void api.start({ to: [ { width: '100%', config: { duration: 300 } }, { opacity: 0, config: { duration: 300 } }, ], }); }, [api]); return ; }; ``` ```css .bar { pointer-events: none; position: fixed; top: 0; left: 0; height: 2px; background-color: #947dff; border-radius: 0 4px 4px 0; width: 0; z-index: 9999; } ``` Lass uns den Code aufschlüsseln: Wir haben eine Feder-Referenz `api`, um die Animation zu steuern. Wenn wir die Fortschrittsleiste starten müssen, rufen wir `start` mit der folgenden Konfiguration auf: 1. Start bei einer Breite von 0 %. 2. Verwende eine große Spannung und passe die Reibung fein an, damit die Fortschrittsleiste schnell beginnt und schnell auf 10 % langsamer wird. Beachte, dass wir `clamp: true` verwenden, um zu verhindern, dass die Fortschrittsleiste überschießt oder oszilliert. 3. Fortschreiten auf 15 % mit einer Dauer von 5 Sekunden. Es ist eine Pufferstufe, um die Animation natürlicher erscheinen zu lassen. 4. Fortschreiten auf 100 % mit höherer Spannung und Reibung, um die Fortschrittsleiste mit einer langsamen Federbewegung voranzutreiben (GitHub verwendet hier zufällige Längen von Schritten, aber persönlich bevorzuge ich eine flüssige Bewegung). Wenn die Seite geladen ist, rufen wir `end` auf, um die Animation zu "unterbrechen" und die Fortschrittsleiste schnell 100 % erreichen und verschwinden zu lassen. ### Aktualisieren beim Seitenübergang Remix bietet einen `useNavigation`-Hook, um den Zustand des Seitenübergangs zu verfolgen. Wir können ihn verwenden, um die Fortschrittsleiste zu starten und zu beenden. Hier ist der Code: ```tsx import { useNavigation } from '@remix-run/react'; export const ProgressBar = () => { // ... const { state } = useNavigation(); // ... useEffect(() => { switch (state) { case 'navigating': case 'submitting': { start(); break; } default: { end(); break; } } }, [state, start, end]); }; ``` Fühle dich frei, den Stil der Fortschrittsleiste an das Design deiner Webseite anzupassen und die Animationsparameter nach deinen Vorlieben zu gestalten. Solange du den "Fast Power"-Abschwungstil befolgst, kannst du das gleiche Ziel erreichen. ## Fazit Die Mensch-Computer-Interaktion ist wirklich ein interessantes Feld. Selbst kleine Details wie die Ladeleiste können das Benutzererlebnis erheblich beeinflussen. Bei Logto kümmern wir uns nicht nur um die technische Infrastruktur und Implementierungen, sondern auch um das Benutzererlebnis und Design. Wir glauben, dass auch diese wichtige Teile einer entwicklerfreundlichen Plattform sind.