如何解决如何在React Native中使用PanResponder旋转视图
我想创建一个动画视图,使用PanResponder这样旋转。
我想从角落旋转视图。我可以相对于translateX值旋转视图。但是我不知道如何根据tanslateY值旋转视图。
constructor(props) {
super(props);
this.state = {
pan: new Animated.ValueXY()
};
}
componentWillMount() {
this._panResponder = PanResponder.create({
onMoveShouldSetResponderCapture: () => true,onMoveShouldSetPanResponderCapture: () => true,onPanResponderGrant: (e,gestureState) => {
this.state.pan.setOffset({
x: this.state.pan.x._value,y: this.state.pan.y._value
});
this.state.pan.setValue({ x: 0,y: 0 });
},onPanResponderMove: Animated.event([
null,{ dx: this.state.pan.x,dy: this.state.pan.y },]),});
}
render() {
let { pan } = this.state;
let [translateX,translateY] = [pan.x,pan.y];
const rotate = translateX.interpolate({
inputRange: [-80,80],outputRange: ['-360deg','0deg','360deg']
});
return (
<Animated.View style={[{
height: 80,width: 80
},{ transform: [{ rotate }] }]}>
<View style={{
position: "absolute",left: 0,top: 0,width: 20,height: 20,borderRadius: 10,}} {...this._panResponder.panHandlers}></View>
</Animated.View>
);
}
wix-editor-rotating-an-element
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。