[React Native] react-native-svg 사용법 (점과 점 사이를 선으로 긋는 애니메이션 구현하기)

https://github.com/react-native-community/react-native-svg

react-native-community/react-native-svg

오늘 사용할 라이브러리!

 

- 내가 원하는 것: 화면 내에서 원하는 점과 점 사이를 선으로 긋고 싶다.

 

 

import React, {useEffect, useState, useRef} from 'react';
import {Svg, Line} from 'react-native-svg';

const AnimatedSvg = Animated.createAnimatedComponent(Svg);
const AnimatedLine = Animated.createAnimatedComponent(Line);

export default () => {
  const initWidth = useRef(new Animated.Value(0)).current;
  const initHeight = useRef(new Animated.Value(0)).current;

  let animateWidth = initWidth.interpolate({
    inputRange: [0, 100],
    outputRange: ['0', '100'],
  });
  let animateHeight = initHeight.interpolate({
    inputRange: [0, 100],
    outputRange: ['0', '100'],
  });
  
    useEffect(() => {
    Animated.timing(
      // Animate over time
      initWidth,
      {
        toValue: 100,
        duration: 500,
        useNativeDriver: true,
      },
    ).start();
    Animated.timing(
      // Animate over time
      initHeight,
      {
        toValue: 100,
        duration: 500,
        useNativeDriver: true,
      },
    ).start();
  }, []);
  
	return (
      <AnimatedSvg height="100" width="100">
        <AnimatedLine
          x1={0}
          y1={0}
          x2={animateWidth}
          y2={animateHeight}
          stroke="red"
          strokeWidth="2"
        />
      </AnimatedSvg>
    )
}

 

- 결과물

 

 

- 이번에는 원하는 점과 점 사이를 그어보자

- 그러려면 내가 원하는 위치의 xy 포지션을 알아야겠지!

 

 

 

 

 

 

[출처]

https://stackoverflow.com/questions/53550173/how-do-i-draw-a-line-between-2-points-in-react-native

How do I draw a line between 2 points in React Native?

https://github.com/react-native-community/react-native-svg/issues/803

[Rect] width not being animated via createAnimatedComponent and interpolate · Issue #803 · react-native-community/react-native-s

https://stackoverflow.com/questions/30096038/react-native-getting-the-position-of-an-element

React Native: Getting the position of an element

 

 

이런 곳도 있다

https://github.com/kdeloach/react-lineto

kdeloach/react-lineto

 

 

 

 

Buy Me A Coffee!

https://www.buymeacoffee.com/daheeahn

daheeahn is app developer