kiok46/animations_and_panresponder.md

## animations_and_panresponder.md

      
    Raw
  

              animations_and_panresponder.md
            
          
    Animations

3 main questions that needed to be answered.

Where is the item right now? (Use Animated.ValueVY)
Where is it the element moving to? (Use Animated.Spring)
Which element are we moving? (Use Animated.View)

Animations run compeltely outside the state system.)
PanResponder

import {
   PanResponder
} from 'react-native';

		const panResponder = PanResponder.create({
   		onStartShouldSetPanResponder: () => {},
   		onPanResponderMove: () => {},
   		onPanResponderRelease: () => {},
   	});

For onStartShouldSetPanResponder: () => {},, anytime the user presses this component and drags around the screen,
we want this pan responder to be responsible for handeling that gesture. onStartShouldSetPanResponder: () => true,
For onPanResponderMove: () => {},, first argument is event, it has some abount of information that, which object
was pressed by the user. second argument is gesture, what the user is doing on the screen. (pixels).
now wireup the pan responder to Component.
<View {...this.state.panResponder.panHandlers}>
</View>

we are spreading all the callbackds in the panHandlers object to our existing component.
Rotating

we use transform.
transform: [{ rotate: '45deg' }]

to tie 1 property to another property we use something called interpolation.