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

Posted 2023-03-31

【中文标题】使用 React Native Animated 时，可以为偏移设置动画吗？

【英文标题】：When using React Native Animated, it possible to animate the offset?

【发布时间】：2017-02-06 12:19:07

【问题描述】：

我正在尝试创建一个动画拖放功能，如下所示：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
]),

我希望动画继续播放，即使用户正在移动手指。

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

【问题讨论】：

这是一个旧线程，但如果有人到达它：我想你可以使用 flattenOffset() 方法facebook.github.io/react-native/docs/…。然后将偏移量合并到值中，您可以对值进行动画处理，包括偏移量。

【参考方案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();
    
  );