CODEWITHSUNDEEP
animationreact-native
christianost
christianost

Reputation: 212

React Native: Continue animation with last velocity of touch gesture

In my React Native application I have some tiles (wrapped in a View for the example) which are half of the full width wide. They act as buttons and slide to the opposite side to open a menu. When I perform a swipe gesture and release the finger before the slide reaches its final position, I want the slide to animate to its final 'opened' position. The animation should start with the last velocity of the touch gesture for a smooth impression.

I implemented different variations but did not find a good solution (You can find my test-component in my GitHub repository). My View has a PanResponder to manage the gesture and to get the velocity. I started to use the Animated library, but the provided methods do not solve my problem. The only method where I can pass a initial velocity for the animation is the decay, but I can't pass a parameter where the animation should stop. With a timing animation I can set a final value, but can not pass a initial velocity (so the animation starts with a velocity of 0 which looks very jumpy). I tried to combine these two methods, but that does not work properly.

On iOS I could use a horizontal ScrollView with pagingEnabled, which shows the desired effect - but then I do not have the feature on Android.

Any ideas how I can solve this problem and show a smooth animation, starting with an initial velocity and ending on a given position, after the touch gestures end?

Thanks for your help!

EDIT I added the link to my last test component...

Upvotes: 14

Views: 3490

Answers (2)

thinklinux
thinklinux

Reputation: 1377

You can use Animated.decay or Animated.spring to achieve this effect.

Upvotes: 0

Stewart
Stewart

Reputation: 496

You can get a close approximation of the velocity by setting the duration of the timing animation 

const duration = Math.abs((this.props.MAXDISTANCE - Math.abs(distanceMoved)) / velocity);
  • MAXDISTANCE is your final position
  • distanceMoved is the current position (gestureState.dx)
  • velocity is the current velocity (gestureState.vx)

Upvotes: 5

Related Questions