1

我有一个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 为值设置动画。

如果我们在 react-native Animated 世界，我们会做这样的事情：

Animated.spring(this.X, {
    toValue: position,
}).start();

但是我该如何做同样的事情react-native-reanimated。请不要浪费时间解释 UI vs JS 领域，我知道，我确实想利用在 UI 线程中运行动画，我只是不知道如何在用户之后以声明方式运行此动画 ie点击一个按钮。

谢谢

4

1 回答 1

1

在 reanimated 中使用 Animated.spring 时，您应该将配置定义为没有它，它将不起作用

const config = {
   damping: 15,
    mass: 1,
    stiffness: 150,
    overshootClamping: false,
    restSpeedThreshold: 0.001,
    restDisplacementThreshold: 0.001,
}

Animated.spring(this.X, {
    toValue: position,
    ...config
}).start();
于 2020-05-08T01:43:38.967 回答