javascript - 使用 React Native Animated 时，可以对偏移进行动画处理吗？

Question

我正在尝试创建动画拖放功能，如下所示:http://moduscreate.com/animated_drag_and_drop_with_react_native/

我想改变它，以便当用户开始触摸时，对象向上移动，这样它就不再隐藏在他们的手指下。我希望这个 Action 是动画的，但我也想在动画过程中跟踪平移手势。

现在只要用户不移动手指，我的动画就可以正常工作。我正在使用此代码在触摸开始时为对象设置动画:

onPanResponderStart: (e, gesture) => {
  Animated.spring(
    this.state.pan,
    {
      ...animationConstants,
      toValue: { x: 0, y: -70 },
    }
  ).start((status) => {
    // This part ensures that the offset and value are
    // set correctly after the animation.
    this.state.pan.y.setOffset(-70);
    this.state.pan.y.setValue(0);
  });
},

但是一旦他们移动手指，它就会取消动画并跳到顶部。我将此代码用于 onPanResponderMove:

onPanResponderMove: Animated.event([null, {
  dx: this.state.pan.x,
  dy: this.state.pan.y
}]),

我希望动画继续，即使在用户移动手指时也是如此。

我如何更改代码，以便为“偏移量”而不是“值”设置动画？我想我可以解决这个问题，如果 Animated.spring 可以选择使用 toOffset: {x: ..., y: ...}，以及到值。但我不认为它有那个，我不确定我应该如何效仿它。

Answer 1

我想通了。我不确定性能，但它似乎工作正常。

我设置了一个单独的 Animated.Value 来为偏移设置动画。我刚刚使用 addListener 添加了一个回调，它调用 setOffset 来设置值的动画。

constructor(props){
  super(props);

  this.state = {
    pan: new Animated.ValueXY(),
    offset: new Animated.Value(0)
  };

  this.state.offset.addListener((value) => {
    this.state.pan.y.setOffset(value.value);
  });

  this.panResponder = PanResponder.create({
    onStartShouldSetPanResponder: () => true,
    onPanResponderStart: (e, gesture) => {
      Animated.spring(
        this.state.offset, 
        { toValue: -70 }
      ).start();
    },
    onPanResponderMove: Animated.event([null, {
      dx: this.state.pan.x,
      dy: this.state.pan.y
    }]),
    onPanResponderRelease: (e, gesture) => {
      Animated.spring(
        this.state.pan,
        {
          toValue: { x: 0, y: 0 }
        }
      ).start();

      Animated.spring(
        this.state.offset,
        { toValue: 0 }
      ).start();
    }
  });
}