满足特定条件时，如何停止在"onPanResponderMove"内部反应原生动画? [英] How to stop react native animation inside 'onPanResponderMove' when a certain condition is met?

问题描述

我有一个悬停在视图上方的抽屉.用户可以垂直向上拖动以将其打开，而向下拖动以将其关闭.我的开合部分工作正常.我有一个问题是确保拖动动画一旦从手机屏幕顶部到达大约200像素就停止，并且也不要从屏幕底部拖动​​超过100像素.这是绝对元素，我用过Animated.ValueXY().我知道我需要在onPanResponderMove: (e, gestureState) =>{}函数中停止动画.我尝试了stopAnimation，但似乎没有任何影响.

I have a drawer that hovers over a view. The user can vertically drag up to open and drag down to close it. I have the opening and closing part working smoothly. What I have a problem with is making sure that the drag animation stops once it reaches about 200 pixels from the top of the phone screen and also not drag beyond 100 pixels from the bottom of the screen. It's an absolute element and I have used Animated.ValueXY(). I know that I need to stop animation in the onPanResponderMove: (e, gestureState) =>{} function. I tried stopAnimation but it doesn't seem to affect anything.

这是导致拖动发生的原因-

This is what causes the drag to happen -

    onPanResponderMove: (e, gestureState) => {
      return Animated.event([null, {
        dy: this.state.drag.y,
      }])(e, gestureState)
    },

在用户可以拖动的视图上使用{...this.panResponder.panHandlers}来拖动整个抽屉.像把手一样.

Using {...this.panResponder.panHandlers} on the view that users can drag to drag the whole drawer. Like a handle.

在要拖动以响应手柄"的视图上使用样式this.state.drag.getLayout().

Using this.state.drag.getLayout() in styles, on the view that I want to drag in response to dragging the 'handle'.

感谢您的答复！

推荐答案

1st)，您需要知道屏幕尺寸. 从"react-native"导入{Dimensions}将为您提供

1st) you need to know the screen size.. Importing { Dimensions } from 'react-native' would give that for you

import { Dimensions } from 'react-native'

Dimensions.get('window').height;
Dimensions.get('window').width;
Dimensions.get('screen').height;
Dimensions.get('screen').width;

2nd)如果您在"onPanResponderMove"中执行console.log(手势)，您会看到类似的内容

2nd) If you do a console.log( gestures ) inside 'onPanResponderMove', you would see something like this

{ 
   stateID: 0.04776943042437365,
   moveX: 140.58839416503906, //the pixel where the "finger" is at X
   moveY: 351.9721374511719, //the pixel where the "finger" is at Y
   x0: 89.08513641357422, //the pixel where finger touched first in X
   y0: 390.5161437988281, //the pixel where finger touched first in Y
   dx: 51.503257751464844, //distance finger dragged X
   dy: -38.54400634765625, //distance finger dragged Y
   veJS:   dy: -38.54400634765625,
   vx: 0.0880593692555147,
   vy: 0.06345143037683823,
   numberActiveTouches: 1,
  _accountsForMovesUpTo: 7017915 
}

有了这些信息，您就可以像下面这样随意地进行限制:

With this information you can manipulate, limiting as you like, like this:

//to start to drag only after a 10% drag threshold
const DRAG_THRESHOLD = Dimensions.get('screen').height* 0.1;

//to limit the drag on 80% of the screen height
const DRAG_LIMIT = Dimensions.get('screen').height* 0.8

onPanResponderMove: (e, gesture) => {
   console.log(gesture);

   //for THRESHOLDs
   if ( (Math.abs( gesture.dy ) > DRAG_THRESHOLD) && 
        (Math.abs( gesture.dy ) < DRAG_LIMIT ) )
   {
       return Animated.event([
           null, {dx: 0, dy: pan.y}
       ]) (e, gesture)
   }
 },

未测试此代码，但希望对您有所帮助. 保持冷静和快乐的编码！

Did not test this code, but I hope it helps. Keep Calm and Happy Coding!

这篇关于满足特定条件时，如何停止在"onPanResponderMove"内部反应原生动画?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！