我经常在WPF动画中听到“线性插值”这个术语。什么是“线性插值”?你能给我举个例子来说明何时使用“线性插值”吗?
我经常在WPF动画中听到“线性插值”这个术语。什么是“线性插值”?你能给我举个例子来说明何时使用“线性插值”吗?
线性意味着直线(直的)。
插值是在两个点之间找到一个点的行为。与此相反,外推是在一条线的两端寻找一个点。
因此,线性插值是使用一条直线在两个点之间找到一个点。
例如:
*(5,10)
/
/
/
/
*(0,0)
您可以使用线性插值的两个端点来获取沿着该直线的点:
(1,2)
(2,4)
(3,6)
(4,8)
并使用线性 外推 来获得(例如):
(1000,2000)
(-1e27,-2e27)
在动画中,假设你有一个弹跳的球,它从(60,22)
位置移动到(198,12)
位置,需要10
秒钟的时间。
如果动画速率为每秒10
帧,则可以使用以下公式计算其在任何时间的位置:
x0 = 60, y0 = 22
x1 = 198, y1 = 12
frames = 100
for t = 0 to frames:
x = (x1 - x0) * (t / frames) + x0
y = (y1 - y0) * (t / frames) + y0
底部的这两个公式是线性插值的例子。当百分比为50%(即 t == 50
)时:
x = (198 - 60) * (50 / 100) + 60
= 138 * 0.5 + 60
= 69 + 60
= 129
y = (12 - 22) * (50 / 100) + 22
= -10 * 0.5 + 22
= -5 + 22
= 17
(129,17)
是起始位置和结束位置之间的中点。