目录
- 1）基本手势
- 2）手势动画
1）基本手势
| 方法 | 说明 |
|---|---|
| onStartShouldSetResponder: (evt) => true | ACTION_DOWN时是否成为响应者 |
| onMoveShouldSetResponder: (evt) => true | ACTION_MOVE时是否成为响应者 |
| onPanResponderGrant: (evt, gestureState) =>{} | ACTION_DOWN事件 |
| onPanResponderMove: (evt, gestureState) => | ACTION_MOVE事件 |
| onPanResponderRelease: (evt, gestureState) => | ACTION_UP事件 |
12月-07-2017 16-29-11.gif
| gestureState{} | 参数说明 |
|---|---|
| stateID | 触摸状态的ID。在屏幕上有至少一个触摸点的情况下，这个ID会一直有效 |
| x0 y0 | 当响应器产生时的屏幕坐标,即ACTION_DOWN时的坐标 |
| moveX moveY | 移动时的屏幕横坐标,右下方向分别为xy轴正向 |
| dx dy | 从触摸操作开始时的累计横纵向路程,开始触摸点的右下为xy轴正向，左上为xy轴反向 |
| vx vy | 横纵向移动速 |
| numberActiveTouches | 当前在屏幕上的有效触摸点的数量 |
export default class TouchAnim extends Component {
constructor(props) {
super(props);
this.state = {
gestureState:{},
};
this._panResponder = PanResponder.create({
// 要求成为响应者：
onStartShouldSetPanResponder: (evt, gestureState) => true,
onStartShouldSetPanResponderCapture: (evt, gestureState) => true,
onMoveShouldSetPanResponder: (evt, gestureState) => true,
onMoveShouldSetPanResponderCapture: (evt, gestureState) => true,
onPanResponderGrant: (evt, gestureState) => {
// 开始手势操作。给用户一些视觉反馈，让他们知道发生了什么事情！
},
onPanResponderMove: (evt, gestureState) => {
// 移动手势操作
this.setState({
gestureState:gestureState,
})
},
onPanResponderTerminationRequest: (evt, gestureState) => true,
onPanResponderRelease: (evt, gestureState) => {
// 用户放开了所有的触摸点，且此时视图已经成为了响应者。
// 一般来说这意味着一个手势操作已经成功完成。
},
onPanResponderTerminate: (evt, gestureState) => {
// 另一个组件已经成为了新的响应者，所以当前手势将被取消。
},
onShouldBlockNativeResponder: (evt, gestureState) => {
// 返回一个布尔值，决定当前组件是否应该阻止原生组件成为JS响应者
// 默认返回true。目前暂时只支持android。
return true;
},
});
}
render() {
return (
<View
{...this._panResponder.panHandlers}
style={styles.container}>
<Text>stateID 触摸状态的ID = {this.state.gestureState.stateID}</Text>
<Text>moveX 最近一次移动时的屏幕横坐标 = {this.state.gestureState.moveX}</Text>
<Text>moveY 最近一次移动时的屏幕纵坐标 = {this.state.gestureState.moveY}</Text>
<Text>x0 当响应器产生时的屏幕坐标 = {this.state.gestureState.x0}</Text>
<Text>y0 当响应器产生时的屏幕坐标 = {this.state.gestureState.y0}</Text>
<Text>dx 从触摸操作开始时的累计横向路程 = {this.state.gestureState.dx}</Text>
<Text>dy 从触摸操作开始时的累计纵向路程 = {this.state.gestureState.dy}</Text>
<Text>vx 当前的横向移动速度 = {this.state.gestureState.vx}</Text>
<Text>vy 当前的纵向移动速度 = {this.state.gestureState.vy}</Text>
<Text>numberActiveTouches 当前在屏幕上的有效触摸点的数量 = {this.state.gestureState.numberActiveTouches}</Text>
</View>
);
}
}
2）手势动画
12月-07-2017 17-03-03.gif
export default class TouchAnim extends Component {
constructor(props) {
super(props);
this.state = {
animVal : new Animated.ValueXY(), //ValueXY是一个方便的处理2D交互的办法，譬如旋转或拖拽
};
this._panResponder = PanResponder.create({
// 要求成为响应者：
onStartShouldSetPanResponder: (evt, gestureState) => true,
// 开始手势操作。
onPanResponderGrant: (evt, gestureState) => {
},
// 移动手势操作
onPanResponderMove: //绑定动画
Animated.event([
null, //忽略原生事件
{dx:this.state.animVal.x,dy:this.state.animVal.y}
]),
// 释放手势
onPanResponderRelease: (evt, gestureState) => {
//弹性动画，回到原点
Animated.spring(this.state.animVal,{
toValue:{x:0,y:0},
friction:1,
tension:100,
}).start();
},
});
}
render() {
return (
<View style={styles.container}>
<Animated.View
{...this._panResponder.panHandlers}
style={{
backgroundColor:'orange',
width:50,height:50,
borderRadius:25,
transform:[
{
translateX:this.state.animVal.x
},
{
translateY:this.state.animVal.y
}
]
}}/>
</View>
);
}
}
参考资料
官网
