React Native:使用最后一个触摸手势速度继续动画

Question

在我的React Native应用程序中,我有一些瓷砖(View例如包裹在一个),它是全宽宽度的一半.它们充当按钮并滑动到另一侧以打开菜单.当我在滑动到达其最终位置之前执行滑动手势并释放手指时,我希望幻灯片动画到其最终"打开"位置.动画应以触摸手势的最后速度开始,以获得平滑的印象.

我实现了不同的变体,但没有找到一个好的解决方案(你可以在我的GitHub存储库中找到我的测试组件).我View有一个PanResponder管理手势和获得速度.我开始使用该Animated库,但提供的方法无法解决我的问题.我可以为动画传递初始速度的唯一方法是decay,但是我无法传递动画停止的参数.使用timing动画我可以设置最终值,但不能传递初始速度(因此动画以0的速度开始,看起来非常有弹性).我试图将这两种方法结合起来,但这种方法无法正常工作.

在iOS上,我可以使用水平ScrollView跟pagingEnabled,这显示了预期的效果-但是我没有在Android的功能.

任何想法如何解决这个问题,并在触摸手势结束后显示一个平滑的动画,从初始速度开始到结束给定位置？

谢谢你的帮助!

编辑我添加了我上一个测试组件的链接...

Answer 1

您可以通过设置duration计时动画的来获得速度的近似值

const duration = Math.abs((this.props.MAXDISTANCE - Math.abs(distanceMoved)) / velocity);

• MAXDISTANCE 是你的最终位置
• distanceMoved是当前位置 ( gestureState.dx)
• velocity是当前速度 ( gestureState.vx)