sugulogの日記

JavaScript、animate!アニメーションをJavaScriptで実装しよう!!

スポンサードリンク

f:id:sugulog:20210727212154p:plain

こんにちは、すぐるです!

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

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

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

 

今回は、JavaScriptとanimateいうことで

  •  アニメーションをJavaScriptで実装しよう

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

その為このブログを読むことで、animateについて理解が深まるのはもちろん、JavaScriptでアニメーションを実装できるようになります。

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

 

今回は、

・ アニメーションをJavaScriptで実装しよう

・プラス実装情報

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

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

・ アニメーションをJavaScriptで実装しよう

今回は正方形が回転しながら横に移動するアニメーションをJavaScriptのanimateを使い実装していきます。

まずはHTMLからです。

f:id:sugulog:20210727184518p:plain

次にCSSで正方形を形作ります。

f:id:sugulog:20210727184716p:plain

最後にJavaScriptです。

f:id:sugulog:20210727184733p:plain

第一引数ではアニメーションの動きを指定します。

今回はtransformを使い動きを指定しています。

translateXで横軸の動き、rotateで回転を指定しています。
第二引数ではアニメーションの詳細を指定します。

durationでアニメーションの実行時間、iterationsで繰り返し、directionで繰り返し時の挙動を指定しています。

では実際に動きを見てみましょう。 

f:id:sugulog:20210727213308g:plain
正方形が回転しながら横に移動しているのが確認できますね。

・プラス実装情報

基本的にtransformを使えば上記のような移動、回転するアニメーションや大きさの変化するアニメーション(scale)を実装することができます。

その他にopacityを指定すれば透明度を変化させるアニメーション、filterを指定すれば明度や彩度を変化させるアニメーションも実装することもできます。

自分なりに色々組み合わせて実装してみましょう。

 

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

animateについて理解が深まり、JavaScriptでアニメーションを実装できるようになりましたか??

animateを使うことでJavaScriptのみでアニメーションが実装できます。

知識としてしっかり保持しておきましょう(^_^)/

 

最後に!!

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

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

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

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

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