rnr: interpolate
ある範囲の値を別の範囲にmappingするために使う
スクロールやジェスチャー入力などのアニメーションの変化をスムーズに行うため使う
要は、
inputRange でx軸の値、 ouputRange でy軸の値を、同要素数の配列で指定し、そのxy座標上のグラフに沿って、
value を更新する
指定していない部分の補完も計算してくれる
例えば、以下のように指定する
inputRange == [0, 100] outputRange == [1, 0] この場合、入力値が
50 のとき、出力値は 0.5 になる (input,output) = (50,0.5) というのは明示的に指定してないが補完してくれるtsinterpolate(
value: number,
inputRange: number[],
outputRange: number[],
extrapolate?: 'identity' | 'clamp' | 'extend'
): number value アニメーション中に変化する値
e.g. クロールの位置やジェスチャーの入力値
inputRange 入力値の範囲を示す配列
value がこの範囲内のどこに位置するかによって、対応する outputRange の値が計算される outputRange 出力値の範囲を示す配列
inputRange の各値に対応する出力値を指定する extrapolate (optional) inputRange の外部にある値をどのように処理するかを指定するdocs内にグラフやdemoがあるので見るとわかりやすい
以下の3つ
extend (default)範囲外に対しても、範囲内と同様の補完をする
clamp 境界値のまま留める
outputRange の範囲外にはならないということ identity inputをそのまま返す
input == output になるということ