sugulogの日記

JavaScript、三角関数!画像の回転アニメーションを実装しよう!!

スポンサードリンク

f:id:sugulog:20210117212456p:plain
こんにちは、すぐるです!

sugulogをお読みいただきありがとうございます!!

このブログは、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準に書いています。

少しでもお役に立てれば幸いです。

 

今回は、JavaScript三角関数ということで

  •  回転アニメーションの実装

について簡単に解説します!!

その為このブログを読むことで、画像を円に沿って回転さるための予備知識について理解が深まるのはもちろん、画像の回転アニメーションの実装技術を手に入れることができます。

是非最後までご愛読ください。

 

今回は、

  • 画像の回転アニメーションの実装

の順で解説していきます。

では早速、みていきましょう!!

・画像の回転アニメーションの実装

円上(孤)を計算する際は三角関数の概念を用いて計算していきます。

円を座標に当てはめた際、コサインはX軸、サインはY軸にあたります。

このX軸、Y軸を元に角度を一定に変化させることで円を描きます。

ではまず始めにHTMLを記述します。

今回は以下のように画像だけ記述しています。

f:id:sugulog:20210117190855p:plain

次にCSSを記述します。

今回はJavaScriptでmargin-left、margin-topの値を変更し続けることで回転させていきます。

f:id:sugulog:20210117191457p:plain

そして最後にJavaScriptの記述です。

f:id:sugulog:20210117192025p:plain

関数ではまず始めに角度をラジアンに変換しています。

そしてラジアンを使い定数xでX軸の値を求め、定数yでY軸の値を求めています。

その際にウインドウの縦横幅を取得し割る2した値を足しているのは、ウインドウの真ん中らへんで回転を表示させたいためです。

そしてMath.cos、Math.sinにかけている値(今回は200)を変更することで円の大きさを変えることができます。

また200のように同じ値にすることで綺麗な円を描きます。

あとは取得したX軸、Y軸をCSSに適用し、処理が行われるごとに角度に1を足すことで変化させていきます。

最後にrequestAnimationFrameを使い、処理を繰り返しています。

では実際に動きをみていきましょう!

f:id:sugulog:20210117195311g:plain

画像が回転し続けていますね!!

因みにコサイン(x軸)のみ適用してみるとX軸のみで動きます。

f:id:sugulog:20210117194239g:plain
次にサイン(Y軸)のみ適用してみるとY軸のみで動きます。

f:id:sugulog:20210117194738g:plain

この動き(値)を合わせて円を描いているのがわかりますね!!

 

以上、今回のブログでした。

画像を円に沿って回転さるための予備知識について理解が深まり、画像の回転アニメーションの実装技術を手に入れることができましたか??

僕自身もサイン、コサインなどの三角関数に関する知識をより深められるように、これからも励んでいきますね(^_^)/

 

最後に!!

今後も、「 過去の無知な自分に向けてわかりやすく説明するなら?? 」を基準にブログを書いていきます。

少しでも気になった方はお試しでもいいので1度、読者登録お願いします!

またTwitterでもプログラミングに関することを中心に情報を発信してます。

宜しければそちらのフォローもお願いします。

最後までご愛読いただきありがとうございました!!