将两个动画插值对象在本机中进行比较

Question

我需要比较react-native中两个AnimatedInterpolation对象的值。我想知道哪个AnimatedInterpolation具有最小的十进制值。

Interpolation documentation

不幸的是，Math.min(value1, value2)不起作用。

如何获取AnimatedInterpolation对象的浮​​点值？

我尝试了以下内容：

interpolateOpacity = () => {
    let xOpacity = this.state.pan.x.interpolate({
      inputRange: this.props.inputOpacityRangeX,
      outputRange: this.props.outputOpacityRangeX
    });

    let yOpacity = this.state.pan.y.interpolate({
      inputRange: this.props.inputOpacityRangeY,
      outputRange: this.props.outputOpacityRangeY
    });

    return Math.min(xOpacity, yOpacity) // NOT WORKING
};

调试器：

Answer 1

我这样做的方法是比较输入值。

如果输出范围的映射不是很复杂，您应该可以通过访问this.state.pan.x._value和this.state.pan.y._value来比较输入范围，或者更好的做法是按照here所述设置一个监听器。

我认为没有办法实时比较插值。

Answer 2

你可能会使用像this.state.pan.y .__ getValue（）这样的东西。如果这不是有效的，我建议为动画值添加一个监听器，并使用该值，如下所示：

this.state.pan = new Animated.Value({ x: 0, y: 0 });
this.panValue = { x: 0, y: 0 };
this.state.pan.addListener((value) => 
    this.panValue = value); // value is an object with x and y props

另外，请不要忘记设置和重置值，如下所示：

onPanResponderGrant: () => { 
    this.state.pan.setOffset({
        x: this.panValue.x,
        y: this.panValue.y
    });
    this.state.pan.setValue(0);
},
onPanResponderMove: (evt, { dx, dy }) => {
    this.state.pan.setValue({ x: dx, y: dy});
}