線形補完
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.
アニメーションでは始まりの位置と終わりの位置を決めてその間を補うことでことで動きを表現する手法がよく用いられます。これは補完と呼ばれます。
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
このデモのように$t$が等速度で変化する場合を線形補完と呼びます。
https://codepen.io/kynd/pen/rNvQRjW?editors=0010
イージング関数
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.
$t$の変化を操作するとアニメーションに表情を持たせることできます。例えばtの値を2乗してみましょう。これだけでゆっくりとしたスタートから徐々に加速する動きができました。