通过拖动以及随机间隔对动画切换按钮进行动画处理

Question

我是一个绝望的RN新秀，需要一个在开和关之间切换的切换按钮。它不应该是可单击的，而是可以拖动的。

我还希望按钮从现在开始不时地进行一定距离的动画设置（介于0到5-10％之间并向后移动），以一种奇妙的方式显示它是可拖动的（并吸引CTA）。

我已经成功完成了拖放部分（react-native-gesture-handler）。但是我似乎无法弄清楚如何连接“零星跳跃”部分。

我很想听听您对此的意见。

有义务！

构造函数

constructor(props) {
    super(props);

    this.translateX = new Value(0);
    const dragX = new Value(0);
    const state = new Value(-1);
    const dragXEnd = new Value(END_POSITION);

    this.onGestureEvent = event([
      {
        nativeEvent: {
          translationX: dragX,
          state
        }
      }
    ]);

    const clock = new Clock();
    const transX = new Value(0);
    const isRun = new Value(0);
    this.translateX = cond(eq(state, State.ACTIVE), [
      // If state active
      stopClock(clock),
      // Keep handle between 0 and END_POSITION (clamp)
      set(transX, cond(
        lessThan(dragX, 0), 0, cond(
          greaterThan(dragX, END_POSITION), END_POSITION, dragX
        )
      )),
      transX
    ], [
      // If state not active
      cond(
        and(defined(transX), eq(state, State.END)),
        [
          set(transX, cond(
            // If dragged Less then 50% => bounce back to 0, else animate to end position
            lessThan(transX, divide(END_POSITION, 2)),
            runBounce(clock, transX, 0),
            timing({clock, duration: 200, from: transX, to: END_POSITION, easing: Easing.sin })
          )),
          cond(
            // Make sure callback is only trigged once when handle is at end position
            and(eq(isRun, 0), eq(transX, END_POSITION)), [
              set(isRun, 1),
              call([], props.callback)
            ]
          )
        ]
      ),
      transX
    ]);
}

渲染

  render() {
    return(
      <View style={ styles.container }>
        <View style={ styles.sliderContainer }>
          <PanGestureHandler
            activeOffsetX={1}
            onGestureEvent={ this.onGestureEvent }
            onHandlerStateChange={ this.onGestureEvent }
          >
            <Animated.View style={[ styles.handle, {
              transform: [{ translateX: this.translateX }]
            }]}>
            </Animated.View>
          </PanGestureHandler>
        </View>
      </View>
    );
  }