2つのAnimated Interpolationsオブジェクトを反応ネイティブで比較する

Question

react-nativeの2つのAnimatedInterpolationオブジェクトの値を比較する必要があります。どのAnimatedInterpolationが10進値の最小値を持っているか知りたい。

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