React-native Animation 2편 (KOR 한글)

marong61
marong61
Feb 6, 2017 · 4 min read

1편에 Animated 에 이어서 PanResponder 를 설명하고, 실습을 함으로써 react-native Animation 을 마무리 짓겠다.

PanResponder

이 객체는 리엑트 네이티브에서 사용자의 제스쳐를 catch 할 수 있도록 제공해주는 객체이다. (PanResponder)

코드의 31, 34번줄에 있는 *ShouldSetCapture 메소드들이 true 를 반환함으로 panhandlers 가 사용자의 제스쳐들을 캡쳐할 수 있다.

Grant, Move, Release 3가지의 상태변화를 탐지한다.

Grant 는 제스쳐가 발생할때, Move 는 움직일때, Release 는 제스쳐가 떨어질때 발생한다.

Dragging Square

앞서 본 움직이는 사각형을 이번엔 사용자의 드래그로 움직이게 만들것이다.

대략적인 시나리오는 이렇다. (PanResponder 이용)

  1. Grant 움직인 위치를 시작위치로 지정한다.
  2. Moving 움직인 거리만큼 transitionX, transitionY 를 이용 물체를 움직인다.
  3. Release 움직인 위치를 시작위치로 지정한다.

onPanResponderGrant

this._animatedValue.addListener((value) => this._value = value);

위의 코드는 1번 grant 시 시작위치를 지정하기 위하여 필요한 코드이다. 사용자의 제스쳐에 의해 Panhandler 가 움직일때마다 value 값이 변화하게 되는데 그 value 을 추적하다가 최후의 value 값으로 grant 할때 offset을 지정하게 된다.

onPanResponderGrant: (e, gestureState) => {
this._animatedValue.setOffset({x: this._value.x,y:this._value.y});
this._animatedValue.setValue({x: 0, y: 0});
}

위의 코드가 바로 그 코드이다. setOffset 으로 마지막 위치를 offset 으로 지정하고, setValue 로 이동한 value 값들을 0으로 초기화한다.

onPanResponderMove

onPanResponderMove: Animated.event([
null, {dx: this._animatedValue.x, dy: this._animatedValue.y}
]),

위의 코드는 panResponder 가 움직일때 실행되는 코드다. 이 코드를 이해하기 위해서는 Animated.event 에 대한 이해가 필요하다.

Animated.event 는 nativeEvent, gestureState 를 array 형식으로 취하여 알맞게 mapping할 수 있도록 해준다. 대부분의 경우에 onScroll, onPanResponderMove 에서 사용된다.

onPanResponderMove 에서는 nativeEvent 가 필요없기때문에 null 로 매핑하고, gestureState 중 dx, dy 를 this._animatedValue.x, this._animatedValue.y 로 매핑한다.

dx, dy 는 제스쳐가 움직인 거리를 나타낸다.

따라서 움직인 거리만큼 this._animatedValux.x, this._animatedValue.y 가 변화한다.

이제 this._animatedValue를 transform 과 연결하여 사각형을 움직일 수 있도록 하자.

getTranslate () {
return {
transform: [
{translateX: this._animatedValue.x},
{translateY: this._animatedValue.y}
]
}
}
// ....
render () {
return <Animated.View style={[s.squre, this.getTranslate()]} {...this._panResponder.panHandlers}/>
}

이제 사용자의 터치제스처에 따라서 사각형을 움직일 수 있게되었다.

추가! 사용자의 터치가 떨어졌을때 제자리로 돌아오도록 하려면??

onPanResponderRelease 에 어떤 로직을 추가하면 왠지 될것같지 않은가?

onPanResponderRelease: () => {
Animated.spring(this._animatedValue, {
toValue: {x: 0, y: 0},
friction: 4,
}).start();
}

간단하게 구현가능하다.

제스쳐가 사라졌을때, value 를 {x: 0, y: 0} 으로 애니매이션 시켜주면, 스프링처럼 제자리로 돌아오게된다.

    marong61

    Written by

    marong61

    FrontEnd Developer

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade