こんにちは！ ライターのナナミです。
みなさん、色々なサイトを見ていて、こんな感じのボタンとかを見たことはありませんか？
こういう風にボタンにマウスオーバーした時、動きがあると素敵ですよね。
こういうボタンはどうやって作るんだろう…
JavaScriptでアニメーションを作ってみたいけど、作り方がわからない…
という方必見！
JavaScriptでアニメーションを作る方法を解説しちゃいます。
今回の記事は、下記の流れで進めていきます。
【基礎】アニメーションを作ってみよう
【発展】もっと複雑に！ライブラリを使ってみよう
【おまけ】簡単な動きならCSSでもできる
この記事で、アニメーションの基礎をバッチリ覚えていきましょう！
アニメーションとは
そもそもアニメーションとは何か、ちょっとおさらいしてみましょう。
アニメーションは、WEBサイトの要素になめらかな動きをつけるものです。
例えば、
こんな風に回転させてみたり…
横にすすーっと動かしてみたりすることができるのです。
つけられるアニメーションはたくさんの種類があり、組み合わせることで楽しい動きをどんどんつけることができます。
WEBサイトのクオリティがググッと上がる手法ですね！
アニメーションを作ってみよう
では早速、アニメーションを作っていきましょう！
今回は細かく解説していくので、ぜひ自分でも試しながら読み進めてみてください。
どんな動きを作りたいのか考えよう
動きを作る際、一番大事なのは「その動きをイメージできるか」です。
最終的な完成形が見えていないと、途中のロジックを組むのがとても難しくなります。
例えば、アニメーションでよく使われる動きは下記のようなものです。
・色を変える
・色を薄くする
・回転させる
・大きさを変える
・位置を変える
・表示させる
今回は、色と位置をアニメーションで変えるのを目標にしていきましょう。
アニメーションが起きるタイミングを決めよう
動きだけでなく、何をどうしたらそのアニメーションが始まるのかを決める必要があります。
よくあるのは下記のようなタイミングですね。
・その要素にマウスオーバーしたら
・指定したボタンを押したら
・スクロールして、画面内にその要素が見えたら
・ページの読み込みが完了したら
今回は、ボタンを押したらアニメーションが始まるように作っていきましょう。
これで動きの全体像が決まりました。
「指定したボタンを押したら」「色と位置が変わる」アニメーションを作っていきましょう！
元になる要素を準備しよう
「指定したボタンを押したら」「色と位置が変わる」動きをする要素を準備していきます。
HTMLとCSSでサクッと作ってしまいましょう。
See the Pen anime1 by 河野七海 (@kouno73) on CodePen.
ついでに、動きが始まる条件になるボタンも用意しておきました。
HTMLとCSSってなんだっけ…
という方は、下記の記事をどうぞ！
動き終わりの状態を決めよう
次に、動き終わった時の状態を用意しておきます。
動きをつける要素にclassを追加して、そのclassに設定しておきましょう。
See the Pen anime2 by 河野七海 (@kouno73) on CodePen.
これでactiveというclassがついた時、色と位置が変わるようになりました。
functionを定義しよう
では、ここからJavaScriptを書いていきましょう！
今回はアニメーションの動き自体はCSSで全て設定済みです。
なので、あとはボタンをクリックされた時、必要なclassがつくようにしてあげればOKです。
See the Pen anime3 by 河野七海 (@kouno73) on CodePen.
変数targetに定義した動きをつけたい要素（anime_test）にclassが付いていなかったら、activeというclassがつくようにしました。
逆に何かclassが付いている場合、classを削除するようにしています。
この一連の動作を、functionとして定義しておきました。
functionとは、JavaScriptの動きの指定などを一つにまとめるものです。
もっと詳しく知りたい方は、下記の記事をどうぞ！
クリックイベントを追加しよう
「指定したボタンをクリックしたら」という、アニメーションの開始条件を入れていきましょう。
HTMLのボタンのソースに、onclickという属性を追加します。
これで、クリック時にfunctionで定義した動きが実行されるようになります。
See the Pen anime4 by 河野七海 (@kouno73) on CodePen.
想定通りの動きになりましたね。
これで完成です！
もっと複雑な動きに！ライブラリを使ってみよう
簡単な動きだったら、上記のように自分でサクッと作れちゃいますね。
いやいや、もっと複雑な動きが作りたいんだよ…
という方は、下記のようなライブラリを使ってみましょう！
ライブラリは色々なfunctionをまとめたファイルです。
使いたい関数を呼び出すと、いい感じに処理して返してくれるので、手軽に複雑な動きをつけることができます。
anime.js
アニメーションを作るライブラリといえばこれ！というほどポピュラーなライブラリです。
動きも軽く、実装も手軽、さらに動きも豊富です。
・あまり難しい記述は自信がない人
・とりあえず手軽にライブラリを使ってみたい人
TweenJS
https://www.createjs.com/tweenjs
createJSというライブラリの仲間です。
基本的にcreateJSと組み合わせて使います。
記述はanimeJSの方が楽ですが、createJSとの合わせ技により様々な動きをつけられます。
・かなり複雑な動きを作りたい人
・すでにcreateJSを使っている人
TweenMax
https://greensock.com/tweenmax
GASPというライブラリの仲間です。
パフォーマンスもよく、記述も簡単で、割と手軽に使うことができます。
さらに、Googleが使用を推奨しているとのことなので、知っておいて損はないでしょう。
・手軽にアニメーションを実装したい人
・すでにGASPを使っている人
おまけ 簡単なアニメーションならCSSでも
ここまで、JavaScriptで実装するアニメーションについて解説してきました。
しかし、実は本当に簡単な動きならば、CSSでサクッと作れちゃいます。
特にボタンにマウスオーバーした状態は、CSSでも状態の取得が可能です。
これを使えば、ややこしいコードを書かなくても一瞬でアニメーションを作れちゃいます。
そんな簡単な方法ならぜひ知りたい！
という方は、下記の記事を要チェックです。
まとめ
いかがでしたか？
アニメーションは難しいから私にはできない…
と思っていた方も多かったのではないでしょうか？
この記事で紹介したように、アニメーションはそんなに難しいものではありません。
自信を持って、ぜひチャレンジしてみてくださいね！
