【Flutter】lerpとは?線形補間の方法について簡単に調べてみた

Flutterで以下の「Battery Optimizer」というアプリを開発していた時のこと

www.flutter-study.dev

 

インジケーターと呼ばれるバッテリーの残量を円を使って表示する部分を作っていた時、以下の記述で「lerp」というのが何をするのかわからなかったので調べてみた。

//割合(0~1.0)からグラデーション色に変換
final color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;

 

【leapとは】

単語的には「Linear interpolation」とのことで線形補間という意味を指す。

 

【使い方や意味】

lerpは通常3つの引数を取るようになっているそうです。

lerp(start, end, t);

これはstartからendを使用して線形補間をしており、tで取得する値を決めています。

t=0でstart、t=1でendを選択し、t=0.5だとstartとendの中間を取得します。

 

ここで上記のソースコードを見てみると

inal color = ColorTween(
begin: kColorIndicatorBegin,
end: kColorIndicatorEnd,
).lerp(per)!;

lerpの引数は1つしか取っていません。ColorTweenの中にbeginとendを書いているためです。

したがってperという変数の値によってbeginとendで設定した色をグラデーションのように変化していくという記述となっています。