lerp関数(線形補間)について
自分が使ってきていた式と違う式を見たのでメモ。
始点と終点の二つの数値の間で、指定した補間値による数値を取得することができる。
関数にしてループで使用する。
返ってきた値をまた始点に設定して使用すると、終点に達するまでの数値を取得し続けることができる。
用途としては、主にオブジェクトを滑らかに移動させたり、色や透明度などのプロパティを変化させる場合などに使用する。
/**
* t 補間値 0〜1 の数にする
* limit 始点と終点の差がこの数値以下になったら、終点の値にする
*/
function lerp(start, end, n, limit = 0.001) {
let current = (1 - n) * start + n * end;
if (Math.abs(end - current) < limit) current = end;
return current;
}
// 今までこんな感じのを使っていた
function lerp2(start, end, n, limit = 0.001) {
let current = start + (end - start) * n; // この行の式が違う
if (Math.abs(end - current) < limit) current = end;
return current;
}
新しく知ったのは 点に1から補間値を引いている数値を乗算している。
今勉強しているglslでは、0〜1を結構頻繁に使っている感じがする。
使用例
// 使用例
let reqId;
let start = 0;
const end = 100;
const n = 0.5;
function animation() {
reqId = window.requestAnimationFrame(animation);
start = lerp(start, end, n);
if (start === end) {
window.cancelAnimationFrame(reqId);
}
}
animation();
1回目のループ 50 が返ってくる。
返ってきた値は次のループの start に代入されるので、
2回目のループ 75 が返ってくる。
3回目のループ 87.5
4回目のループ 93.75
…
start と end の差が limit(0.001) 以下になると、end の値を start に代入してループ終了。