javascript - 如何在循环中的两个值 X,Y 之间来回 lerp？

Question

使用 setInterval 或 RequestAnimationFrame，我想从 X 和 Y 之间的 lerping 中获取进度值。假设 X 为 0，Y 为 1，我希望开始时为 0，一半时为 0.5，最后为 1完成后。

我希望这在给定的时间范围内发生，比如说 5 秒。这意味着当 setInterval/RequestAnimationFrame 达到 2.5 秒时，将发生半值 0.5。

最后，我希望它能乒乓球，所以当它达到5秒时，值会减少而不是增加，例如0.9、0.8、0.7等，然后从0、0.1、0.2重新开始...

这是迄今为止我的代码:

/*
function lerp(start, end, time) {
    return start * (1.0 - time) + end * time;
}
*/
function lerp (start, end, amt){
  return (1-amt)*start+amt*end;
}

function repeat(t, len) {
  console.log('t: ' + t + ', len: ' + len);
    return t - Math.floor(t / len) * len;
}

function pingPong(t, len) {
    t = repeat(t, len * 2);
    return len - Math.abs(t-len);
}

var transitionDuration = 1;
var startTime = Date.now()/1000;
var startPos = 0;
var endPos = 1;

setInterval(function () {
    var currentTime = Date.now()/1000;
  console.log('currentTime:', currentTime);
    var adjustedTime = pingPong(currentTime-startTime, transitionDuration);
    var x = lerp(startPos, endPos, adjustedTime);

    console.log(Math.abs(x.toFixed(2)));

}, 100);

我该怎么做？

Answer 1

线性插值的基本公式类似于

InterpolatedValue = X*t + Y*(1-t)

其中 X 和 Y 是要在之间插值的值，t 是 0 和之间的参数1确定插值的程度； 0 产生 X，1 产生 Y。此外，您希望进行一些周期长度为 5 的周期性运动，交替插值方向；这可以通过以下方式实现。如果t是一个随时间增长的非负数，则计算

t' = t - t / 10

删除所有以前发生过的时期

t'' = t'     : t' in [0,5)
      5 - t' : t' in [5,10)

然后设置

t''' = t' / 5

将参数标准化为[0,1]并从头开始使用基本插值公式。

注意收集线性插值等各种方法here .