スライドショースライドショー

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

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

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

anime-ex1

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

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

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

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

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

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

アニメーションとは

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

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

例えば、

anime2

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

anime5

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ついでに、動きが始まる条件になるボタンも用意しておきました。

HTMLとCSSってなんだっけ…
という方は、下記の記事をどうぞ!

HTMLとCSSの関係とは?基本的な書き方を4つのステップで理解しよう
更新日 : 2019年7月11日

動き終わりの状態を決めよう

次に、動き終わった時の状態を用意しておきます。

動きをつける要素にclassを追加して、そのclassに設定しておきましょう。

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

これでactiveというclassがついた時、色と位置が変わるようになりました。

functionを定義しよう

では、ここからJavaScriptを書いていきましょう!

今回はアニメーションの動き自体はCSSで全て設定済みです。
なので、あとはボタンをクリックされた時、必要なclassがつくようにしてあげればOKです。

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

変数targetに定義した動きをつけたい要素(anime_test)にclassが付いていなかったら、activeというclassがつくようにしました。
逆に何かclassが付いている場合、classを削除するようにしています。

この一連の動作を、functionとして定義しておきました。

functionとは、JavaScriptの動きの指定などを一つにまとめるものです。
もっと詳しく知りたい方は、下記の記事をどうぞ!

【JavaScript入門】function(関数)の使い方、呼び出し・戻り値など総まとめ!
更新日 : 2019年4月21日

クリックイベントを追加しよう

「指定したボタンをクリックしたら」という、アニメーションの開始条件を入れていきましょう。

HTMLのボタンのソースに、onclickという属性を追加します。

onclick=  "function名();"

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

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

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

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

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

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

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

ライブラリは色々な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でも状態の取得が可能です。
これを使えば、ややこしいコードを書かなくても一瞬でアニメーションを作れちゃいます。

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

JavaScript不要!CSSだけでアニメーションを作る方法
更新日 : 2019年7月30日

まとめ

いかがでしたか?

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

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

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説