Reagieren Sie native SVG-Animation
In diesem Artikel lernen React Native-Entwickler, SVG-Bilder mit verschiedenen Bibliotheken zu animieren.
Es besteht eine große Chance, dass Ihre Benutzer zurückgehen, wenn Sie die UI und UX der App nicht attraktiv gestalten können. Um eine attraktive UX zu erstellen, ist das Hinzufügen von Animationen zu Bildern erforderlich.
Verwenden Sie das Animated-Modul von React Native, um SVG-Bilder zu animieren
Das Animated ist das Modul der React Native Library. Wir können es verwenden, um Text zu animieren, Komponenten und SVG-Bilder zu reagieren.
Im folgenden Beispiel verwenden wir die Bibliothek react-native-svg, um das SVG-Bild zu erstellen. Benutzer können den folgenden Befehl im Projektverzeichnis ausführen, um die Bibliothek react-native-svg zu installieren.
npm i react-native-svg
Zuerst erstellen wir das SVG-Bild mit der Bibliothek react-native-svg. Hier sehen die Nutzer, dass wir das Modul Circle aus der Bibliothek react-native-svg importiert und die Requisiten für die Kreisgrösse und -position gemäss unseren Anforderungen übergeben haben.
<Svg height="100" width="100">
<Circle cx="50" cy="50" r="50" stroke="red" strokeWidth="3.5" fill="yellow" />
</Svg>
Danach müssen wir die Bilder oder Texte in die Komponente Animated.View einfügen, die wir animieren müssen. Wir können die Stile auch als Requisiten in der Komponente Animated.View hinzufügen, die die Opazität enthält; Indem wir die Deckkraft ändern, können wir unseren Kreis animieren.
Benutzer können der folgenden Syntax folgen, um den Stil und den HTML-Code in die Komponente Animated.View einzufügen.
<Animated.View
style={[
{
opacity: opacity,
},
]}
>
{/* add text or images to animate here */}
</Animated.View>
Als letzten Schritt müssen Benutzer die Deckkraft des Bildes ändern, um es zu animieren.
Im folgenden Beispiel haben wir die Komponente Animated.View erstellt und darin das SVG-Bild des Kreises eingefügt. Außerdem wurde die Opazität innerhalb des Stils hinzugefügt.
Im folgenden Code gibt es zwei Schaltflächen zum Ändern der Deckkraft des Kreises. Wenn der Benutzer die Schaltfläche mit dem Text Fade In drückt, wird die Funktion animateFadeIn() aufgerufen, die die Animationsdauer und den neuen Wert für die Deckkraft für Animated auf 1 setzt.
Wenn der Benutzer die Schaltfläche mit dem Text Fade Out drückt, wird die Funktion animateFadeOut() aufgerufen, die die Animationsdauer und den neuen Wert für die Deckkraft auf 0 setzt.
Beispielcode:
import React, { useRef } from "react";
import {
Animated,
Text,
View,
StyleSheet,
Button,
SafeAreaView,
} from "react-native";
import { Svg, Circle } from "react-native-svg";
export default function App() {
// animate the circle using the opacity, and the initial value of the opacity is zero
const opacity = useRef(new Animated.Value(0)).current;
const animateFadeIn = () => {
// // make opacity 0 to ` in 3000 milliseconds
Animated.timing(opacity, {
toValue: 1,
duration: 3000,
}).start();
};
const animateFadeOut = () => {
// make opacity 1 to 0 in 3000 milliseconds
Animated.timing(opacity, {
toValue: 0,
duration: 3000,
}).start();
};
return (
<SafeAreaView style={styles.container}>
<Animated.View
style={[
{
// opacity value for the animation
opacity: opacity,
},
]}
>
{/* SVG image of circle */}
<Svg height="100" width="100">
<Circle
cx="50"
cy="50"
r="50"
stroke="red"
strokeWidth="3.5"
fill="yellow"
/>
</Svg>
</Animated.View>
<View style={{ display: "flex", flexDirection: "column" }}>
<Button
style={{ marginVertical: 16 }}
title="Fade In View"
onPress={animateFadeIn}
/>
<Button
style={{ marginVertical: 16 }}
title="Fade Out View"
onPress={animateFadeOut}
/>
</View>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: "center",
justifyContent: "center",
},
});
Ausgang:
In der obigen Ausgabe können Benutzer sehen, dass ein Kreis erscheint, wenn der Benutzer auf die Schaltfläche Fade In drückt, und wenn er auf die Schaltfläche Fade Out drückt, verschwindet der Kreis.
Abschluss
In diesem Artikel haben wir gelernt, die SVG-Bilder in React-native zu animieren. Darüber hinaus können Benutzer die externe Bibliothek verwenden, die React-native und SVG-Animation unterstützt, um die SVG-Bilder zu animieren.
