Animación SVG nativa de React
En este artículo, los desarrolladores de React Native aprenderán a animar imágenes SVG utilizando diferentes bibliotecas.
Hay muchas posibilidades de que sus usuarios disminuyan si no puede hacer que la UI y la UX de la aplicación sean atractivas. Para hacer una UX atractiva, es necesario agregar animaciones a las imágenes.
Use el módulo Animado de React Native para animar imágenes SVG
El Animado es el módulo de la biblioteca React Native. Podemos usarlo para animar texto, reaccionar componentes e imágenes SVG.
En el siguiente ejemplo, usamos la biblioteca react-native-svg para crear la imagen SVG. Los usuarios pueden ejecutar el siguiente comando en el directorio del proyecto para instalar la biblioteca react-native-svg.
npm i react-native-svg
Primero, crearemos la imagen SVG usando la biblioteca react-native-svg. Aquí, los usuarios pueden ver que importamos el módulo Círculo de la biblioteca react-native-svg y pasamos los accesorios para el tamaño y la posición del círculo de acuerdo con nuestros requisitos.
<Svg height="100" width="100">
<Circle cx="50" cy="50" r="50" stroke="red" strokeWidth="3.5" fill="yellow" />
</Svg>
Después de eso, necesitamos agregar las imágenes o textos dentro del componente Animated.View, que necesitamos animar. También podemos agregar los estilos como accesorios en el componente Animated.View, que contiene la opacidad; cambiando la opacidad, podemos animar nuestro círculo.
Los usuarios pueden seguir la siguiente sintaxis para agregar el estilo y HTML dentro del componente Animated.View.
<Animated.View
style={[
{
opacity: opacity,
},
]}
>
{/* add text or images to animate here */}
</Animated.View>
Como paso final, los usuarios deben cambiar la opacidad de la imagen para animarla.
En el siguiente ejemplo, hemos creado el componente Animated.View y hemos agregado la imagen SVG del círculo dentro de eso. Además, agregó la opacidad dentro del estilo.
En el siguiente código, hay dos botones para cambiar la opacidad del círculo. Cuando el usuario presiona el botón con el texto Fade In, llamará a la función animateFadeIn(), que establece la duración de la animación y el nuevo valor de opacidad en 1 para Animated.
De manera similar, cuando el usuario presiona el botón con el texto Fade Out, llamará a la función animateFadeOut(), que establece la duración de la animación y el nuevo valor de la opacidad en 0.
Código de ejemplo:
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",
},
});
Producción:
En el resultado anterior, los usuarios pueden ver que cuando el usuario presiona el botón Fade In, aparece un círculo, y cuando presiona el botón Fade Out, el círculo desaparece.
Conclusión
En este artículo, aprendimos a animar las imágenes SVG en React-native. Además, los usuarios pueden usar la biblioteca externa, que admite animación React-native y SVG, para animar las imágenes SVG.
