このエントリーは、アニメーション・モーションを JavaScript で記述するための覚え書きです。いままで実務で使ってきたわざをちょっと整理してみます。 まずは、モーション設計をする上でよく使う三角関数について、おさらいとして触れます。もっともぼくは数学の素養は乏しいので、あやしいところもあるかもしれません。 三角関数おさらい 三角関数を使うと、直角三角形のある角の大きさが定まった時の、各線の長さを求めることができます。 図のように、角度θの時の底辺の長さはsin(θ)、高さはcos(θ)になります。 例えばθが45°の時は cos(30°) ≓ 0.707 sin(30°) ≓ 0.707(1 : 1 : √2) 60°(上の図)の時は cos(60°) = 0.5 sin(60°) ≓ 0.8660(1 : 2 : √3 ですね) 90°(垂直線)の時は cos(90°) = 0 s
![Motion 1, 三角関数 - Notes](https://cdn-ak-scissors.b.st-hatena.com/image/square/b83812d82f80c3f397e29ec52ba81789cf919832/height=288;version=1;width=512/http%3A%2F%2Fpenqe.com%2Fpenqe%2Fnotes%2Fimages%2Fentryimages%2Fwidev101121%2Fchart1.png)