У меня есть простой Animated.View
, который я перемещаю на основе пальца пользователя, мой компонент выглядит следующим образом:
return (
<View
style={styles.container}
>
<PanGestureHandler
ref={this.panRef}
onGestureEvent={this.handlePan}
onHandlerStateChange={this.handlePan}
>
<Animated.View
style={[
styles.parent,
{
transform: [
{ translateX: this.X },
],
},
]}
>
<MyAwesomeComponent />
</Animated.View>
</PanGestureHandler>
</View>
Проблема в том, что я хочу создать декларативный метод с именем scrollToPosition(position, animated)
Теперь это выглядит так:
scrollToPosition = (position, animated = false) => {
if (animated) {
// TODO: What to do now?
} else {
this.X.setValue(position);
}
}
, это работает без анимации, но моя цель сейчас - добавить способ анимировать значение с помощью Ease.
Если бы мы были в живом мире анимации, мы бы сделали что-то вроде этого:
Animated.spring(this.X, {
toValue: position,
}).start();
но как мне сделать то же самое с react-native-reanimated
. Пожалуйста, не тратьте время на объяснение UI vs JS realm, я знаю об этом, и я хочу воспользоваться анимацией в потоке UI, я просто не знаю, как декларативно запускать эту анимацию после пользователь т.е. нажимает кнопку.
Спасибо