Мне нужно создать анимацию в React Native, которую лучше всего описать следующим образом:
- Пользователь берет некоторый элемент пользовательского интерфейса и перетаскивает его из своего исходного положения.
- Пока пользователь перемещает его, также происходит некоторое вращение, элемент пользовательского интерфейса вращается вокруг оси Z в соответствии с его движением на плоскости XY.
- Когда пользователь отпускает элемент, его положение и вращение возвращаются к исходным значениям (анимация «забей и забудь»).
Это похоже на виджет пользовательского интерфейса "pull down to refresh". Пока пользователь тянет вниз, у нас есть как перемещение Y, так и вращение загрузочного колеса, связанного с движением касания, и когда пользователь отпускает, возникает анимация «забей и забудь» без контроля со стороны пользователя.
Как бы я реализовал это эффективным способом?
Я думаю о чем-то вроде этого:
- Мы сохраняем движение пользователя в состоянии компонента. С каждым движением касания пользовательский интерфейс перерисовывается (не уверен, что он работает).
- Когда пользователь отпускает касание, мы используем
Animated.timing для генерации анимации «забей и забудь».
Из-за 2. значение в состоянии должно быть экземпляром Animated.Value. Я не уверен, что 1. может быть реализован быстрым способом, используя Animated.Value в качестве состояния.