【JavaScript入門】要素に動きをつけよう!アニメーションの作り方

こんにちは! ライターのナナミです。

みなさん、色々なサイトを見ていて、こんな感じのボタンとかを見たことはありませんか?

anime-ex1

こういう風にボタンにマウスオーバーした時、動きがあると素敵ですよね。

こういうボタンはどうやって作るんだろう…
JavaScriptでアニメーションを作ってみたいけど、作り方がわからない…

という方必見!
JavaScriptでアニメーションを作る方法を解説しちゃいます。

今回の記事は、下記の流れで進めていきます。

【基礎】アニメーションとは?
【基礎】アニメーションを作ってみよう
【発展】もっと複雑に!ライブラリを使ってみよう
【おまけ】簡単な動きならCSSでもできる

この記事で、アニメーションの基礎をバッチリ覚えていきましょう!

目次

アニメーションとは

そもそもアニメーションとは何か、ちょっとおさらいしてみましょう。

アニメーションは、WEBサイトの要素になめらかな動きをつけるものです。

例えば、

anime2

こんな風に回転させてみたり…

anime5

横にすすーっと動かしてみたりすることができるのです。

つけられるアニメーションはたくさんの種類があり、組み合わせることで楽しい動きをどんどんつけることができます
WEBサイトのクオリティがググッと上がる手法ですね!

アニメーションを作ってみよう

では早速、アニメーションを作っていきましょう!
今回は細かく解説していくので、ぜひ自分でも試しながら読み進めてみてください。

どんな動きを作りたいのか考えよう

動きを作る際、一番大事なのは「その動きをイメージできるか」です。
最終的な完成形が見えていないと、途中のロジックを組むのがとても難しくなります。

例えば、アニメーションでよく使われる動きは下記のようなものです。

【よく使われる動き】
・色を変える
・色を薄くする
・回転させる
・大きさを変える
・位置を変える
・表示させる

今回は、色と位置をアニメーションで変えるのを目標にしていきましょう。

アニメーションが起きるタイミングを決めよう

動きだけでなく、何をどうしたらそのアニメーションが始まるのかを決める必要があります。

よくあるのは下記のようなタイミングですね。

【よく使われるアニメーションが始まるタイミング】
・その要素にマウスオーバーしたら
・指定したボタンを押したら
・スクロールして、画面内にその要素が見えたら
・ページの読み込みが完了したら

今回は、ボタンを押したらアニメーションが始まるように作っていきましょう。

これで動きの全体像が決まりました。
「指定したボタンを押したら」「色と位置が変わる」アニメーションを作っていきましょう!

元になる要素を準備しよう

「指定したボタンを押したら」「色と位置が変わる」動きをする要素を準備していきます。
HTMLCSSでサクッと作ってしまいましょう。

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という属性を追加します。

onclick=  "function名();"

これで、クリック時にfunctionで定義した動きが実行されるようになります。

See the Pen anime4 by 河野七海 (@kouno73) on CodePen.

想定通りの動きになりましたね。
これで完成です!

もっと複雑な動きに!ライブラリを使ってみよう

簡単な動きだったら、上記のように自分でサクッと作れちゃいますね。

いやいや、もっと複雑な動きが作りたいんだよ…

という方は、下記のようなライブラリを使ってみましょう!

ライブラリは色々なfunctionをまとめたファイルです。
使いたい関数を呼び出すと、いい感じに処理して返してくれるので、手軽に複雑な動きをつけることができます。

anime.js

anime_library1
http://animejs.com/

アニメーションを作るライブラリといえばこれ!というほどポピュラーなライブラリです。
動きも軽く、実装も手軽、さらに動きも豊富です。

【どんな人におすすめ?】
・あまり難しい記述は自信がない人
・とりあえず手軽にライブラリを使ってみたい人

TweenJS

anime_library2
https://www.createjs.com/tweenjs

createJSというライブラリの仲間です。
基本的にcreateJSと組み合わせて使います。

記述はanimeJSの方が楽ですが、createJSとの合わせ技により様々な動きをつけられます

【どんな人におすすめ?】
・かなり複雑な動きを作りたい人
・すでにcreateJSを使っている人

TweenMax

anime_library3
https://greensock.com/tweenmax

GASPというライブラリの仲間です。
パフォーマンスもよく、記述も簡単で、割と手軽に使うことができます。

さらに、Googleが使用を推奨しているとのことなので、知っておいて損はないでしょう。

【どんな人におすすめ?】
・手軽にアニメーションを実装したい人
・すでにGASPを使っている人

おまけ 簡単なアニメーションならCSSでも

ここまで、JavaScriptで実装するアニメーションについて解説してきました。

しかし、実は本当に簡単な動きならば、CSSでサクッと作れちゃいます

特にボタンにマウスオーバーした状態は、CSSでも状態の取得が可能です。
これを使えば、ややこしいコードを書かなくても一瞬でアニメーションを作れちゃいます。

そんな簡単な方法ならぜひ知りたい!
という方は、下記の記事を要チェックです。

まとめ

いかがでしたか?

アニメーションは難しいから私にはできない…
と思っていた方も多かったのではないでしょうか?

この記事で紹介したように、アニメーションはそんなに難しいものではありません
自信を持って、ぜひチャレンジしてみてくださいね!

この記事を書いた人

【プロフィール】
DX認定取得事業者に選定されている株式会社SAMURAIのマーケティング・コミュニケーション部が運営。「質の高いIT教育を、すべての人に」をミッションに、IT・プログラミングを学び始めた初学者の方に向け記事を執筆。
累計指導者数4万5,000名以上のプログラミングスクール「侍エンジニア」、累計登録者数1万8,000人以上のオンライン学習サービス「侍テラコヤ」で扱う教材開発のノウハウ、2013年の創業から運営で得た知見に基づき、記事の執筆だけでなく編集・監修も担当しています。
【専門分野】
IT/Web開発/AI・ロボット開発/インフラ開発/ゲーム開発/AI/Webデザイン

目次