Erstellen von Animationen mit React Spring

Die Integration von Animationen in Ihre React -Anwendungen war traditionell eine Herausforderung. React-Pring, eine leistungsstarke Bibliothek, die von Paul Henschel geschaffen wurde, vereinfacht den Prozess erheblich. Aufbauend auf animierten und reagierten Motion bietet es eine optimierte Leistung und eine optimierte API.

In diesem Tutorial werden zwei der fünf Hooks von React-Spring untersucht: useSpring und useTrail . Wir werden ihre Verwendung anhand praktischer Beispiele veranschaulichen.

Um zu beginnen, installieren Sie die React-Stunde:

 # Garn
Garn addieren Reaktionen

# NPM
NPM Installation React-Still

Animieren mit useSpring

Der useSpring erleichtert reibungslose Übergänge zwischen den Zuständen. Wir definieren from und to Eigenschaften, um die Start- und Endpunkte der Animation anzugeben. from den Ausgangszustand, während der endgültige Zustand to .

Unser erstes Beispiel verwendet useSpring um eine Box zu animieren, die auf den Bildschirm gleitet. Anfänglich versteckt, wird es angezeigt, wenn eine Schaltfläche klickt.

 reag import, {usestate} aus 'react';
Import {useSpring, animiert} aus 'react-pring';

const app = () => {
  const [showcontent, setShowContent] = usustate (false);
  const contentProps = useSpring ({{
    Opazität: Showcontent? 1: 0,
    Margintop: Showcontent? 0: -1000,
    Konfiguration: {Dauer: 500} // Optional: Animationsdauer hinzufügen
  });

  zurückkehren (
    <div classname="container">
      <button classname="button" onclick="{()"> setShowContent (! Showcontent)}>
        Inhalt umschalten
      </button>
      <animated.div classname="box" style="{contentProps}">
        <h1 id="Dieser-Inhalt-hat-sich-dank-React-Spring-niedergeschlagen">Dieser Inhalt hat sich dank React Spring niedergeschlagen!</h1>
      </animated.div>
    </div>
  );
};

Der useSpring Hook verwaltet die Animation. Wenn showContent wahr ist, rutscht die Box nach unten und wird sichtbar; Andernfalls bleibt es außerhalb des Bildschirms versteckt.

Animationslisten mit useTrail

Der useTrail -Hook animiert nacheinander eine Liste von Elementen. Jeder Element animiert nach dem vorhergehenden. Lassen Sie uns eine Liste von Benutzern holen und deren Rendering animieren.

 reag importieren, {usestate, useEffect} aus 'react';
importieren {usetrail, animiert} aus 'react-pring';

const app = () => {
  const [Benutzer, SetUsers] = Usestate ([]);
  useEffect (() => {
    Fetch ('https://jsonplaceholder.typicode.com/users'))
      .then (res => res.json ())
      .then (Data => setUsers (data));
  }, []);

  const Trail = Usetrail (Benutzer.length, {
    Von: {marginleft: -20, Deckkraft: 0, Transform: 'Translate3d (0, -40px, 0)'},
    an: {marginleft: 20, Deckkraft: 1, Transform: 'Translate3d (0,0px, 0)'},
    Konfiguration: {Mass: 5, Spannung: 2000, Reibung: 200} // Optional: Fein-Tune-Animation
  });

  zurückkehren (
    <div>
      <h1 id="Zufällige-Benutzer">Zufällige Benutzer</h1>
      {Trail.map (({style}, index) => (
        <animated.div key="{users[index]?.id}" classname="box" style="{style}">
          {Benutzer [Index] ?. Benutzername}
        </animated.div>
      ))}
    </div>
  );
};

useTrail erstellt eine gestaffelte Animation für die Benutzerliste. Jeder Benutzername rutscht mit einer leichten Verzögerung ein. Fehlerbehandlung und optionale Konfiguration für glattere Animationen sind enthalten.

Abschluss

React Spring bietet einen benutzerfreundlichen Ansatz für Animation in React-Anwendungen. Erforschen Sie die umfangreichen Dokumentation und Beispiele, um kreative Animationsmöglichkeiten freizuschalten. Denken Sie daran, die Barrierefreiheit bei der Implementierung von Animationen zu berücksichtigen.

Das obige ist der detaillierte Inhalt vonErstellen von Animationen mit React Spring. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!