Подтвердить что ты не робот

React Native: продолжить анимацию с последней скоростью жестов касания

В моем приложении React Native у меня есть некоторые фрагменты (завернутые в View для примера), которые составляют половину ширины ширины. Они действуют как кнопки и сдвигаются на противоположную сторону, чтобы открыть меню. Когда я выполняю жестом салфетки и отпустите палец до того, как слайд достигнет своего окончательного положения, я хочу, чтобы слайд приближался к его окончательному "открытому" положению. Анимация должна начинаться с последней скорости жестов касания для плавного впечатления.

Я реализовал разные варианты, но не нашел хорошего решения (вы можете найти тестовый компонент в моем репозитории GitHub). У моего View есть PanResponder, чтобы управлять жестом и получать скорость. Я начал использовать библиотеку Animated, но предоставленные методы не решают мою проблему. Единственный способ, которым я могу передать начальную скорость для анимации, - это decay, но я не могу передать параметр, где анимация должна останавливаться. С анимацией timing я могу установить конечное значение, но не могу передать начальную скорость (так что анимация начинается со скорости 0, которая выглядит очень нервной). Я попытался объединить эти два метода, но это не работает должным образом.

В iOS я мог бы использовать горизонтальный ScrollView с pagingEnabled, который показывает желаемый эффект, но тогда у меня нет функции на Android.

Любые идеи, как я могу решить эту проблему и показать гладкую анимацию, начиная с начальной скорости и заканчивая на заданной позиции, после того, как жесты касания заканчиваются?

Спасибо за вашу помощь!

EDIT Я добавил ссылку на свой последний тестовый компонент...

4b9b3361

Ответ 1

Вы можете получить близкое приближение к скорости, установив duration анимации времени

const duration = Math.abs((this.props.MAXDISTANCE - Math.abs(distanceMoved)) / velocity);
  • MAXDISTANCE - ваше окончательное положение.
  • distanceMoved - текущая позиция (gestureState.dx)
  • velocity - текущая скорость (gestureState.vx)

Ответ 2

Вы можете использовать Animated.decay или Animated.spring для достижения этого эффекта.