PanResponder can reconcile multiple touches into a single gesture by making single-touch gestures resilient to extra touches and recognizing simple multi-touch gestures. It contains listener events to determine responder status and handle responder events. Animated stores state values that can drive animations for properties like opacity, transform, and position of components through timing functions, springs, or decay that optionally uses native device capabilities. It supports animating individual values or combining multiple animations to run sequentially or in parallel.

1. PanResponder & Animated
리액트네이티브서울밋업
백선기

2. PanResponder
PanResponder reconciles several touches into a single gesture. It
makes single‑touch gestures resilient to extra touches, and can be
used to recognize simple multi‑touch gestures.

3. PanResponder
constructor() {
this._panResponder = PanResponder.create({
...
});
}
render() {
return (
<View {...this._panResponder.panHandlers} />
);
}

4. PanResponder
onStartShouldSetPanResponder
onStartShouldSetPanResponderCapture
onMoveShouldSetPanResponder
onMoveShouldSetPanResponderCapture
onPanResponderGrant
onPanResponderMove
onPanResponderTerminationRequest
onPanResponderRelease
onPanResponderTerminate
onShouldBlockNativeResponder

5. responder 여부를결정하는이벤트리스너
onStartShouldSetPanResponder
Does this view want to become responder on the first touch‑
down?
onMoveShouldSetPanResponder
Does this view want to "claim" touch responsiveness?
onStartShouldSetPanResponderCapture ?
onMoveShouldSetPanResponderCapture ?
onStartShouldSetPanResponder: (evt, gestureState) => true

6. responder가 된다음에호출되는리스너
onPanResponderGrant

7. responder가 된다음의이벤트에대응하는리스너
onPanResponderMove
The user is moving their finger
onPanResponderTerminationRequest
Something else wants to become responder. Should this view
release the responder? Returning true allows release
onPanResponderRelease
Fired at the end of the touch, ie "touchUp"
onPanResponderTerminate
The responder has been taken from the View. Might be taken
by other views after a call to
onResponderTerminationRequest, or might be taken by the
OS without asking (happens with control center/ notification
center on iOS)

8. responder 리스너파라메터
event
gestureState

9. responder 리스너파라메터: event
changedTouches ‑ Array of all touch events that have changed
since the last event
identifier ‑ The ID of the touch
locationX ‑ The X position of the touch, relative to the element
locationY ‑ The Y position of the touch, relative to the element
pageX ‑ The X position of the touch, relative to the root element
pageY ‑ The Y position of the touch, relative to the root element
target ‑ The node id of the element receiving the touch event
timestamp ‑ A time identifier for the touch, useful for velocity
calculation
touches ‑ Array of all current touches on the screen

10. responder 리스너파라메터: gestureState
stateID ‑ ID of the gestureState‑ persisted as long as there at
least one touch on screen
moveX ‑ the latest screen coordinates of the recently‑moved touch
moveY ‑ the latest screen coordinates of the recently‑moved touch
x0 ‑ the screen coordinates of the responder grant
y0 ‑ the screen coordinates of the responder grant
dx ‑ accumulated distance of the gesture since the touch started
dy ‑ accumulated distance of the gesture since the touch started
vx ‑ current velocity of the gesture
vy ‑ current velocity of the gesture
numberActiveTouches ‑ Number of touches currently on screen

11. Animated: 상태저장
new Animated.Value()
new Animated.ValueXY()

12. Animated: 설정
Animated.decay() ‑ gradually slows to a stop
Animated.spring() ‑ simple spring physics model
Animated.timing() ‑ easing functions
By default, it uses a symmetric easeInOut
http://easings.net/
useNativeDriver: true
transform
opacity
http://facebook.github.io/react‑
native/blog/2017/02/14/using‑native‑driver‑for‑
animated.html

13. Animated: 시작과 끝
start
stop

14. Animated: 대상
Animated.Image
Animated.ScrollView
Animated.Text
Animated.View

15. Animated: 여러애니메이션을한번에
Animated.delay() ‑ after a given delay.
Animated.parallel() ‑ at the same time
Animated.sequence() ‑ in order, waiting for each to complete
before starting the next.
Animated.stagger() ‑ starts animations in order and in parallel,
but with successive delays.

16. LIVE CODING