Question

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

我想更改它，以便当用户开始触摸时，对象向上移动，使其不再隐藏在他们的手指下。我希望这个动作是动画的，但我也希望在动画期间跟踪平移手势。

现在，只要用户没有移动他们的手指，我就可以使用动画。我正在使用此代码在触摸开始时为对象设置动画：

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
}]),

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

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

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();
    }
  });
}

使用React Native Animated时，可以为偏移设置动画吗？

1 个答案: