【JavaScript】ベジェ曲線を使ったアニメーション【Canvas】 - Qiita

#はじめに canvasでアニメーションすることって多いと思います。 今回はある点を直線的に移動するときのアニメーションを、 ベジェ曲線を使って定義できるようにしたいと思います。 本記事は少しはベジェ曲線について知っている人向けの記事です。 #ベジェ曲線についての簡単な説明 簡単にベジェ曲線について説明します。 今回扱うのは3次ベジェ曲線です。 横軸をx,縦軸をyとします。 3次ベジェ曲線には、制御点が4つあります。 制御点の座標が(0, 0), (0, 0.5), (0.5, 1), (1, 1)のベジェ曲線は以下のようになります (青色の曲線がベジェ曲線、青色の点と緑色の点が制御点です) 3次ベジェ曲線は、パラメータtを使って表されます。 tは0以上、1以下の値をとります。 t=0.3のときのベジェ曲線上の点を求めてみます。 点を4つから3つに減らします。 (0, 0)と(0, 0.5