react native circle drag transform translate animation - react-native

Question

Hi how can I drag an image arc(circle) line. I have follow an topic they use PanResponder but only drag free. I just when drag just accept the image follow arc(circle) line like this:
this is the code can make drag free direction. I know we can calculate the translateX: this.state.pan.x and translateY: this.state.pan.y but don't know how to do it:
import React, {
Component
} from 'react';
import {
StyleSheet,
View,
Text,
PanResponder,
Animated,
Easing,
Dimensions
} from 'react-native';
export default class Viewport extends Component {
constructor(props) {
super(props);
this.state = {
showDraggable: true,
dropZoneValues: null,
pan: new Animated.ValueXY(0)
};
this.panResponder = PanResponder.create({
onStartShouldSetPanResponder: () => true,
onPanResponderMove: Animated.event([
null, {
dx: this.state.pan.x,
dy: this.state.pan.y
},
], {
listener: (event, gestureState) => console.log(event.nativeEvent)
}),
onPanResponderRelease: (e, gesture) => {
Animated.spring(this.state.pan, {
toValue: {
x: 0,
y: 0
}
}).start();
}
});
}
getStyle() {
return [
styles.circle,
{
transform: [{
translateX: this.state.pan.x
},
{
translateY: this.state.pan.y
}
]
}
];
}
render() {
return ( <
View style = {
styles.mainContainer
} > {
this.renderDraggable()
} <
/View>
);
}
renderDraggable() {
if (this.state.showDraggable) {
return ( <
View style = {
styles.draggableContainer
} >
<
Animated.View { ...this.panResponder.panHandlers
}
style = {
this.getStyle()
} >
<
/Animated.View> <
/View>
);
}
}
}
let CIRCLE_RADIUS = 36;
let Window = Dimensions.get('window');
let styles = StyleSheet.create({
mainContainer: {
flex: 1
},
text: {
marginTop: 25,
marginLeft: 5,
marginRight: 5,
textAlign: 'center',
color: '#fff'
},
draggableContainer: {
position: 'absolute',
top: Window.height / 2 - CIRCLE_RADIUS,
left: Window.width / 2 - CIRCLE_RADIUS
},
circle: {
backgroundColor: '#1abc9c',
width: CIRCLE_RADIUS * 2,
height: CIRCLE_RADIUS * 2,
borderRadius: CIRCLE_RADIUS
}
});