rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated

个人笔记：（很多地方比较累赘，求指正）

需求：项目需要在RN窗口实现对其拖动和滑动动画，点击滑动；

思路：通过PanResponder监听手势操作。配合Animated实现不需要第三方包，比较简单。

效果：可手动拖动打开/折叠/关闭。或者点击按钮实现

实现：

相关变量：（props.initialHeight为使用窗口是传入的初始高度）

this.animatedViewHeight = new Animated.Value(props.initialHeight)//view高度动画值
this.viewHeight = props.initialHeight//用于判读当前位置做动画
this.showAnimate = false//当前位置折叠/打开

//可以不这么使用
this._onPanResponderGrant = this._onPanResponderGrant.bind(this);//绑定动画开始函数
this._onPanResponderRelease = this._onPanResponderRelease.bind(this);//绑定动画结束函数

布局：

render() {return (<Animated.Viewstyle={{width: deviceInfo.phone_width,height: this.animatedViewHeight,//动态高度实现平滑动画backgroundColor: Colors.white,borderTopLeftRadius: Dimens.dp12,borderTopRightRadius: Dimens.dp12,}}><View{...this.panResponder.panHandlers}>//自己的布局代码</View>//自己的布局代码</Animated.View>);
}

监听和实现：

/*** 手势监听写在componentWillMount中* @type {$TEMPORARY$object<{getInteractionHandle, panHandlers: $TEMPORARY$object<{onMoveShouldSetResponder, onMoveShouldSetResponderCapture, onResponderEnd,   *onResponderGrant, onResponderMove, onResponderReject, onResponderRelease, onResponderStart, onResponderTerminate, onResponderTerminationRequest,  *onStartShouldSetResponder, onStartShouldSetResponderCapture}>}>}*/
this.panResponder = PanResponder.create({/*** 是否监听* @returns {boolean}*/onStartShouldSetPanResponder: () => {return true;},/*** 开始手势*/onPanResponderGrant: this._onPanResponderGrant,/*** 手势移动 通过Animated.event的listener监听事件手势变动数据* gestureState.moveY 手势相对坐标定点的绝对距离 为正数* gestureState.dy 手势相对触摸起始点的相对位置 向下为正，向上为负*/onPanResponderMove: Animated.event([null,{}//dy:this.animatedViewHeight],{listener: (event, gestureState) => {// console.log("onPanResponderMove",this.showAnimate+" "+ gestureState.dy+ " "+gestureState.moveY)let values= (deviceInfo.phone_screen_height +55)- gestureState.moveY this.viewHeight=valuesthis.animatedViewHeight.setValue(values)}}),onPanResponderRelease: this._onPanResponderRelease,
})

手势开始和结束函数

/*** 手势开始，用于实现按压动画等效果* @param e* @param gestureState* @private*/
_onPanResponderGrant(e, gestureState) {
};/*** 手势结束 gestureState中的参数和onPanResponderMove中最后一帧参数一样* @param e* @param gestureState* @private*/
_onPanResponderRelease(e, gestureState) {// console.log("_onPanResponderRelease",gestureState.dy+" "+this.gestureStateDy+" " +this.viewHeight)if(gestureState.dy>=0){//向下滑动if (this.viewHeight < this.props.initialHeight) {//结束位置在折叠线一下 则关闭this.props.close()}else {结束位置在折叠线一上 则折叠this.showAnimate = falsethis.viewAnimateHidden()}}else {//向上滑动if (this.viewHeight < this.props.initialHeight) {//结束位置在折叠线一下 则折叠this.showAnimate = falsethis.viewAnimateHidden()}else {结束位置在折叠线一上 则打开this.showAnimate = truethis.viewAnimateShow()}}
}

使用到的动画函数：

/*** 展开动画*/
viewAnimateShow() {this.viewHeight=deviceInfo.phone_height//更新位置避免拖动错误Animated.timing(this.animatedViewHeight, {toValue: deviceInfo.phone_height,duration: 300,useNativeDriver: false}).start()
}/*** 折叠动画*/
viewAnimateHidden() {this.viewHeight=this.props.initialHeight//更新位置避免拖动错误Animated.timing(this.animatedViewHeight, {toValue: this.props.initialHeight,duration: 300,useNativeDriver: false}).start()
}

rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated相关推荐

[RN] React Native 键盘管理在Android TextInput遮盖，上移等问题解决办法
[RN] React Native 键盘管理在Android TextInput遮盖,上移等问题解决办法参考文章: (1)[RN] React Native 键盘管理在Android TextI ...
[RN] React Native 实现图片预览
[RN] React Native 实现图片预览效果预览: 代码如下: 'use strict'; import React, {Component} from 'react'; import {I ...
RN(React Native)
RN是React的原生组件库网址:React Native 中文网 · 使用React来编写原生应用的框架一.ReactNative开发环境的搭建在本机搭建RN项目开发运行环境 -- 3GB+ ...
（笔记） RN React Native 热更新（react-native-code-push） AppCenter
苹果App允许使用热更新Apple's developer agreement, 为了不影响用户体验,规定必须使用静默更新. Google Play不能使用静默更新,必须弹框告知用户App有更新.中国 ...
[RN] React Native 实现类似京东的沉浸式状态栏和搜索栏
React Native 实现类似京东的沉浸式状态栏和搜索栏其原理其实就是在要隐藏部分的那个View 前面加入 StatusBar 代码! 代码如下: <StatusBaranima ...
[RN] React Native 自定义底部弹出选择框实现
React Native 自定义底部选择框实现效果如图所示: 实现方法: 一.组件封装 CustomAlertDialog.js import React, {Component} from ' ...
[RN] React Native 错误 Module does not exist in the module map
React Native 错误 Module does not exist in the module map 代码如下: import Login from 'login' import Index ...
[RN] React Native 调试技巧
React Native 调试技巧一. 安卓模拟器调出Dev Setting 命令 adb shell input keyevent 82 二.图片不出来时,先运行此命令,再重新 run react ...
[RN] React Native 自定义导航栏随滚动渐变
React Native 自定义导航栏随滚动渐变实现效果预览: 代码实现: 1.定义导航栏 NavPage.js import React, {Component} from 'react'; im ...

rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated

rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated相关推荐

最新文章

热门文章

rn react native PanResponder手势动画 实现窗口拖动 滑动动画 Animated

rn react native PanResponder手势动画 实现窗口拖动 滑动动画 Animated相关推荐

最新文章

热门文章

rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated

rn react native PanResponder手势动画实现窗口拖动滑动动画 Animated相关推荐