Linear Interpolation


In animation, it is a common practice to create movement by determining the beginning and ending positions and filling in the gaps between them. This method is called interpolation.


Screen Shot 2022-10-13 at 10.29.27 PM.png

Suppose that point $P$ moves from one point $A$ to another point $B$, and the variable $t$ is the ratio how much $P$ has moved between them. If $t = 0$, $P$ is in the same position as $A$. If $t = 1$, $P$ is in the same position as $B$, and if $t = 0.5$, $P$ is exactly at the midpoint between $A$ and $B$. This can be expressed as follows. $A$, $B$, and $P$ can be either numbers or vectors.

ある点$A$から別の点$B$まで点$P$が移動するとします。$P$の移動した割合を$t$という変数で表します。$t = 0$ なら$P$は$A$と同じ位置、$t = 1$ なら$P$は$B$と同じ位置、$t=0.5$ なら$P$はちょうど$A$と$B$の中点にいるという具合です。これは下記のように表せます。$A$, $B$, $P$ は数値でもベクトルでも構いません。

$P = (1 - t)\cdot A + t \cdot B$

when $t$ changes at a constant rate as in this demonstration, it is called linear Interpolation


Easing functions


We can make the animation more expressive by manipulating the way $t$ changes. For example, let's look at what happens if we square the value of $t$. This produces a movement that starts out slow and gradually accelerates.