What does “linear interpolation” mean?

Question

I often hear the term \"linear interpolation\" in context with animations in WPF. What exactly does \"linear interpolation\" mean? Could you give me an example where to use

Answer 1

E.g. when you want a storyboard to move an element from one position to another using a fixed speed, then you'd use linear interpolation between the start and end positions.

Answer 2

Linear means lines (straight ones).

Interpolation is the act of finding a point within two other points. Contrast this with extrapolation, which is finding a point beyond the ends of a line.

So linear interpolation is the use of a straight line to find a point between two others.

For example:

     *(5,10)
    /
   /
  /
 /
*(0,0)

You can use the two endpoints with linear interpolation to get the points along the line:

(1,2)
(2,4)
(3,6)
(4,8)

and linear extrapolation to get (for example):

(1000,2000)
(-1e27,-2e27)

---

In animation, let's say you have a bouncing ball that travels from the (x,y) position of (60,22) to (198,12) in 10 seconds.

With an animation rate of 10 frames per second, you can calculate it's position at any time with:

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

Those two formulae at the bottom are examples of linear interpolation. At 50% (where 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

and (129,17) is the midpoint between the starting and ending positions.