Haben Sie jemals Animationen in Ihrer React-Anwendung benötigt? Traditionell war die Implementierung von Animationen keine leichte Aufgabe. Aber jetzt, dank Paul Henschel, gibt es ein neues React-Tool genau dafür. react-spring erbt von animated und react-motion für Interpolationen, optimierte Leistung und eine saubere API.
In diesem Tutorial werden wir uns zwei der fünf Hooks ansehen, die in react-spring enthalten sind, insbesondere useSpring und useTrail. Die Beispiele, die wir implementieren werden, nutzen beide APIs.
Wenn Sie mitmachen möchten, installieren Sie react-spring, um loszulegen
## yarn
yarn add react-spring
## npm
npm install react-spring --saveSpring
Die Spring-Prop kann zum Verschieben von Daten von einem Zustand in einen anderen verwendet werden. Wir haben eine from- und eine to-Prop, die uns helfen, den Start- und Endzustand der Animation zu definieren. Die from-Prop bestimmt den anfänglichen Zustand der Daten während des Renderings, während wir to verwenden, um anzugeben, wo sie nach Abschluss der Animation sein sollen.
Im ersten Beispiel werden wir die Render-Prop-Version der Erstellung von Spring-Animationen verwenden.
Sehen Sie den Pen
react spring 1 von Kingsley Silas Chijioke (@kinsomicrote)
auf CodePen.
Beim anfänglichen Rendering möchten wir eine Box ausblenden und sie beim Klicken auf eine Schaltfläche zur Mitte der Seite schieben. Es ist natürlich möglich, dies ohne react-spring zu tun, aber wir möchten den Eintritt der Box in die Ansicht animieren und nur, wenn die Schaltfläche geklickt wird.
class App extends React.Component {
state = {
content: false
}
displayContent = (e) => {
e.preventDefault()
this.setState({ content: !this.state.content })
}
render() {
return (
<div className="container">
// The button that toggles the animation
<div className="button-container">
<button
onClick={this.displayContent}
className="button">
Toggle Content
</button>
</div>
{
!this.state.content ?
(
// Content in the main container
<div>
No Content
</div>
)
: (
// We call Spring and define the from and to props
<Spring
from={{
// Start invisible and offscreen
opacity: 0, marginTop: -1000,
}}
to={{
// End fully visible and in the middle of the screen
opacity: 1, marginTop: 0,
}}
>
{ props => (
// The actual box that slides down
<div className="box" style={ props }>
<h1>
This content slid down. Thanks to React Spring
</h1>
</div>
)}
</Spring>
)
}
</div>
)
}
}Der Großteil des Codes ist einfaches React, das Sie vielleicht schon kennen. Wir verwenden react-spring in dem Abschnitt, in dem wir den Inhalt bedingt rendern möchten, nachdem der Wert von content auf true geändert wurde. In diesem Beispiel möchten wir, dass der Inhalt von oben zur Mitte der Seite gleitet. Daher verwenden wir marginTop und setzen ihn auf einen Wert von -1000, um ihn außerhalb des Bildschirms zu positionieren, und definieren dann eine Opazität von 0 als unsere Werte für die from-Prop. Das bedeutet, dass die Box anfänglich von oben auf der Seite erscheint und unsichtbar ist.
Durch Klicken auf die Schaltfläche nach dem Rendern der Komponente wird der Zustand der Komponente aktualisiert und der Inhalt gleitet von oben auf der Seite nach unten.
Wir können das obige Beispiel auch mit der Hooks-API implementieren. Dazu werden wir die Hooks useSpring und animated zusammen mit den integrierten Hooks von React verwenden.
const App = () => {
const [contentStatus, displayContent] = React.useState(false);
// Here's our useSpring Hook to define start and end states
const contentProps = useSpring({
opacity: contentStatus ? 1 : 0,
marginTop: contentStatus ? 0 : -1000
})
return (
<div className="container">
<div className="button-container">
<button
onClick={() => displayContent(a => !a)}
className="button">Toggle Content</button>
</div>
{
!contentStatus ?
(
<div>
No Content
</div>
)
: (
// Here's where the animated hook comes into play
<animated.div className="box" style={ contentProps }>
<h1>
This content slid down. Thanks to React Spring
</h1>
</animated.div>
)
}
</div>
)
}Zuerst richten wir den Zustand für die Komponente ein. Dann verwenden wir useSpring, um die benötigten Animationen einzurichten. Wenn contentStatus true ist, möchten wir, dass die Werte von marginTop und opacity 0 bzw. 1 sind. Andernfalls sollten sie -1000 und 0 sein. Diese Werte werden contentProps zugewiesen, die wir dann als Props an animated.div übergeben.
Wenn sich der Wert von contentStatus durch Klicken auf die Schaltfläche ändert, ändern sich die Werte von opacity und marginTop entsprechend. Dies bewirkt, dass der Inhalt nach unten gleitet.
Sehen Sie den Pen
react spring 2 von Kingsley Silas Chijioke (@kinsomicrote)
auf CodePen.
Trail
Die Trail-Prop animiert eine Liste von Elementen. Die Animation wird auf das erste Element angewendet, dann folgen die Geschwister. Um zu sehen, wie das funktioniert, werden wir eine Komponente erstellen, die eine GET-Anfrage sendet, um eine Liste von Benutzern abzurufen, und dann animieren, wie sie gerendert werden. Wie wir es bei Spring getan haben, werden wir separat sehen, wie dies mithilfe von Render Props und der Hooks-API erfolgt.
Zuerst die Render Props.
class App extends React.Component {
state = {
isLoading: true,
users: [],
error: null
};
// We're using the Fetch <abbr>API</abbr> to grab user data
// https://css-tricks.de/using-data-in-react-with-the-fetch-api-and-axios/
fetchUsers() {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then(response => response.json())
.then(data =>
// More on setState: https://css-tricks.de/understanding-react-setstate/
this.setState({
users: data,
isLoading: false,
})
)
.catch(error => this.setState({ error, isLoading: false }));
}
componentDidMount() {
this.fetchUsers();
}
render() {
const { isLoading, users, error } = this.state;
return (
<div>
<h1>Random User</h1>
{error ? <p>{error.message}</p> : null}
{!isLoading ? (
// Let's define the items, keys and states using Trail
<Trail
items={users}
keys={user => user.id}
from={{ marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' }}
to={{ marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }}
>
{user => props => (
<div style={props} className="box">
{user.username}
</div>
)}
</Trail>
) : (
<h3>Loading...</h3>
)}
</div>
);
}
}Wenn die Komponente gemountet wird, senden wir eine Anfrage zum Abrufen einiger zufälliger Benutzer von einem Drittanbieter-API-Dienst. Dann aktualisieren wir this.state.users mit den Daten, die die API zurückgibt. Wir könnten die Benutzer ohne Animation auflisten, und das würde so aussehen
users.map(user => {
const { username, name, email } = user;
return (
<div key={username}>
<p>{username}</p>
</div>
);
})Aber da wir die Liste animieren wollen, müssen wir die Elemente als Props an die Trail-Komponente übergeben
<Trail
items={users}
keys={user => user.id}
from={{ marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' }}
to={{ marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }}
>
{user => props => (
<div style={props} className="box">
{user.username}
</div>
)}
</Trail>Wir setzen die Schlüssel auf die ID jedes Benutzers. Sie sehen, dass wir auch die Props from und to verwenden, um zu bestimmen, wo die Animation beginnen und enden soll.
Jetzt gleitet unsere Liste von Benutzern mit einer subtilen Animation herein
Sehen Sie den Pen
React Spring – Trail 1 von Kingsley Silas Chijioke (@kinsomicrote)
auf CodePen.
Die Hooks-API gibt uns Zugriff auf den Hook useTrail. Da wir keine Klassenkomponente verwenden, können wir den Hook useEffect verwenden (der den Lifecycle-Methoden componentDidMount und componentDidUpdate ähnelt), um die Benutzer beim Mounten der Komponente abzurufen.
const App = () => {
const [users, setUsers] = useState([]);
useEffect(() => {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then(response => response.json())
.then(data =>
setUsers(data)
)
}, [])
const trail = useTrail(users.length, {
from: { marginLeft: -20, opacity: 0, transform: 'translate3d(0,-40px,0)' },
to: { marginLeft: 20, opacity: 1, transform: 'translate3d(0,0px,0)' }
})
return (
<React.Fragment>
<h1>Random User</h1>
{trail.map((props, index) => {
return (
<animated.div
key={users[index]}
style={props}
className="box"
>
{users[index].username}
</animated.div>
)
})}
</React.Fragment>
);
}Wir haben den anfänglichen Zustand von users auf ein leeres Array gesetzt. Mit useEffect rufen wir die Benutzer von der API ab und setzen einen neuen Zustand mit der setUsers-Methode, die wir mit Hilfe des useState-Hooks erstellt haben.
Mithilfe des Hooks useTrail erstellen wir den animierten Stil und übergeben ihm Werte für from und to. Wir übergeben auch die Länge der Elemente, die wir animieren wollen. In dem Teil, in dem wir die Liste der Benutzer rendern wollen, geben wir das Array mit den animierten Props zurück.
Sehen Sie den Pen
React Spring - Trail 2 von Kingsley Silas Chijioke (@kinsomicrote)
auf CodePen.
Los, springen Sie in Aktion!
Jetzt haben Sie eine neue und relativ einfache Möglichkeit, mit Animationen in React zu arbeiten. Versuchen Sie, verschiedene Aspekte Ihrer Anwendung zu animieren, wo Sie Bedarf sehen. Achten Sie natürlich auf die Benutzerpräferenzen in Bezug auf Animationen, da diese sich nachteilig auf die Barrierefreiheit auswirken können.
Stellen Sie währenddessen sicher, dass Sie die offizielle Website von react-spring besuchen, da es dort unzählige Demos gibt, um Ihre Kreativität mit Animationsideen anzuregen.
Tolles Tutorial!
großartig