React-Native SVG 애니메이션
이 기사에서 React Native 개발자는 다양한 라이브러리를 사용하여 SVG 이미지를 애니메이션하는 방법을 배웁니다.
앱의 UI와 UX를 매력적으로 만들지 못하면 사용자가 줄어들 가능성이 많습니다. 매력적인 UX를 만들기 위해서는 이미지에 애니메이션을 추가하는 것이 필요합니다.
React Native에서 SVG 이미지 애니메이션에 Animated 모듈 사용
Animated는 React Native 라이브러리의 모듈입니다. 이를 사용하여 텍스트 애니메이션, 구성 요소 및 SVG 이미지 반응에 사용할 수 있습니다.
아래 예에서는 react-native-svg 라이브러리를 사용하여 SVG 이미지를 생성합니다. 사용자는 프로젝트 디렉토리에서 아래 명령을 실행하여 react-native-svg 라이브러리를 설치할 수 있습니다.
npm i react-native-svg
먼저 react-native-svg 라이브러리를 사용하여 SVG 이미지를 만듭니다. 여기에서 사용자는 react-native-svg 라이브러리에서 Circle 모듈을 가져오고 요구 사항에 따라 원 크기 및 위치에 대한 소품을 전달했음을 알 수 있습니다.
<Svg height="100" width="100">
<Circle cx="50" cy="50" r="50" stroke="red" strokeWidth="3.5" fill="yellow" />
</Svg>
그런 다음 애니메이션에 필요한 Animated.View 구성 요소 내부에 이미지나 텍스트를 추가해야 합니다. 불투명도를 포함하는 Animated.View 구성 요소의 소품으로 스타일을 추가할 수도 있습니다. 불투명도를 변경하여 원에 애니메이션을 적용할 수 있습니다.
사용자는 아래 구문에 따라 Animated.View 구성 요소 내부에 스타일과 HTML을 추가할 수 있습니다.
<Animated.View
style={[
{
opacity: opacity,
},
]}
>
{/* add text or images to animate here */}
</Animated.View>
마지막 단계로 사용자는 이미지의 불투명도를 변경하여 애니메이션을 적용해야 합니다.
아래 예에서는 Animated.View 구성 요소를 만들고 그 안에 Circle의 SVG 이미지를 추가했습니다. 또한 스타일 내부에 불투명도를 추가했습니다.
아래 코드에는 원의 불투명도를 변경하는 두 개의 버튼이 있습니다. 사용자가 Fade In 텍스트가 있는 버튼을 누르면 animateFadeIn() 함수가 호출되어 Animated에 대한 불투명도의 새 값과 애니메이션 지속 시간을 1로 설정합니다.
마찬가지로 사용자가 Fade Out 텍스트가 있는 버튼을 누르면 animateFadeOut() 함수가 호출되어 애니메이션 지속 시간과 불투명도의 새 값을 0으로 설정합니다.
예제 코드:
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",
},
});
출력:
위 출력에서 사용자는 Fade In 버튼을 누르면 원이 나타나고 Fade Out 버튼을 누르면 원이 사라지는 것을 볼 수 있습니다.
결론
이 기사에서는 React-native에서 SVG 이미지를 애니메이션하는 방법을 배웠습니다. 또한 사용자는 React-native 및 SVG 애니메이션을 지원하는 외부 라이브러리를 사용하여 SVG 이미지에 애니메이션을 적용할 수 있습니다.
