如何在循环中在两个值X,Y之间来回跳转？

Question

使用的setInterval或RequestAnimationFrame,我想从X和Y之间lerping假设X是0,Y是1取得进展的价值,我想有0它开始,在半0.5和​​1时结束时.我希望在给定的时间范围内发生这种情况,比方说5秒钟.这意味着当setInterval/RequestAnimationFrame达到2.5秒时,将发生半值0.5.最后,我想pingPong,所以当它达到5秒时,值正在减少而不是增加,例如0.9,0.8,0.7等,然后从0,0.1,0.2再次开始......

任何提示或建议？

谢谢!

Answer 1

线性插值的基本公式就是这样的

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

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

t' = t - t / 10

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

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

然后设定

t''' = t' / 5

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

注意,这里收集线性插值和各种其他方法.