JavaScript（jQuery）でアニメーションさせる時は、「最初」と「最後」の2つの状態を作ればいい
はじめに
JavaScriptでアニメーションを作ることに対し、苦手意識を持っている方に向けて書きました。
僕はJavaScriptでアニメーションを作る方法を覚えたての頃、苦手意識を持っていました。実現したいアニメーションについてググり、ヒットしたページからコードをコピペし、少しだけ調整し、雰囲気で動かしていました。
しかし、ある考え方を身につけてからは、少しだけ苦手意識を減らすことができました。
それは、「最初」と「最後」の2つの状態を作ればいいということです。
アニメーションには「最初」と「最後」の2つの状態が必要
アニメーションには「最初」と「最後」の2つの状態が必要です。
この考え方を持っているか持っていないかでアニメーションを作る時の思考に大きな違いが出ると思います。
例えば、ある要素をクリックしたら、クリックした要素を45度回転させるアニメーションを作りたいとします。そのためには、回転する前の状態と45度回転した後の状態の2つの状態をあらかじめ用意しておく必要があります。
JavaScriptでアニメーションを作るためには、CSSで「最初」と「最後」の状態をあらかじめ作成しておき、JavaScriptでクラスの追加と削除を行う
JavaScriptでアニメーションを作るには、CSSで「最初」と「最後」の状態をあらかじめ作成しておき、JavaScriptでクラスの追加と削除を行います。
アニメーションの作成手順をまとめると以下のようになります。
-
CSSの手順
- アニメーションさせたい要素の最初の状態を作る
- アニメーションさせたい要素にtransitionを指定する
- アニメーションさせたい要素にクラスを追加する
- 追加したクラスで元々のCSSを上書きし、アニメーションさせたい要素の最後の状態を作る
-
JavaScriptの手順
- アニメーションさせたい要素を取得する
- 何が起きたらアニメーションを開始したいのかを選ぶ
- アニメーションさせたい要素に対して、クラスを追加する
CSSの手順
アニメーションさせたい要素の最初の状態を作る
まずは、アニメーションさせたい要素の最初の状態を作ります。
ですが、アニメーションを加えようとするタイミングで、この手順は大抵完了しています。アニメーションを加えるタイミングはおそらくデザインデータを実装完了した後である場合が多いと思うからです。まず、デザインデータを実装し、その後に「ここはこういうアニメーションにしたい」という話に発展することが多いと思います。
この記事では、デザインデータを実装完了した状態が「アニメーションさせたい要素の最初の状態」であり、すでに完了している前提で進めます。
今回は、以下のようなHTMLとCSSを「アニメーションさせたい要素の最初の状態」とします。
<div class="kurukuru"></div>
.kurukuru {
width: 100px;
height: 100px;
backgroud-color: red;
}
アニメーションさせたい要素にtransitionを指定しておく
transitionは最初と最後の状態を良い感じにアニメーションしてくれるCSSです。これを指定した要素は、アニメーション可能なスタイルに変化が起きた時、変化をアニメーションさせます。
.kurukuru {
width: 100px;
height: 100px;
backgroud-color: red;
+ transition: transform 0.4s;
}
アニメーションさせたい要素にクラスを追加する
次に、アニメーションさせたい要素にクラスを追加します。アニメーション用にis-activeというクラスを追加します。is-activeというクラスには、次の手順でアニメーションした後のCSSを指定します。
- <div class="kurukuru"></div>
+ <div class="kurukuru is-active"></div>
追加したクラスで元々のCSSを上書きし、アニメーションさせたい要素の最後の状態を作る
追加したis-activeクラスに対して、元々のCSSに上書きする形でアニメーションし終わった後の状態を作ります。
CSSを書きつつ、ブラウザで確認しながら進めると良いと思います。
最終的には、このis-activeクラスはJavaScriptで追加することになります。
.kurukuru {
width: 100px;
height: 100px;
backgroud-color: red;
transition: transform 0.4s;
}
+
+ .kurukuru.is-active {
+ transform: rotate(45deg);
+ }
これで、「最初」と「最後」の2つの状態を作ることができました。
- is-activeがない時は回転する前の状態（最初）
- is-activeがある時は回転した後の状態（最後）
以上で、CSSですべきことは完了です。
ここまできたら、いったんChromeの検証モードで手動でクラスの追加と削除をしてみると良いと思います。
JavaScriptの手順
アニメーションさせたい要素を取得する
JavaScriptでHTMLの要素を操作したい時は、まず操作したい要素を取得します。大抵は、要素のクラス名を目印に取得することが多いと思います。
// jQueryならこんな感じ
+ $(".kurukuru");
// JavaScriptならこんな感じ
+ document.querySelector(".kurukuru");
本当は、JavaScriptで取得するためだけのクラスを用意するとより良いと思いますが、できるだけシンプルにしたいので今回は割愛します。
何が起きたらアニメーションを開始したいのかを選ぶ
JavaScriptにはイベントというものがあります。これは何をトリガー（きっかけ、合図）にするのか、というものです。イベントはすでにJavaScript側が用意しています。
- クリックしたら〜
- スクロールしたら〜
- 画面を読み込んだら〜
などがあります。自分が使いたいイベントを調べてそれを使います。
ここでは「クリックしたら〜」というイベントであるclickイベントというものを使うことにします。
// jQueryならこんな感じ
- $(".kurukuru");
+ $(".kurukuru").click(function(){
+ // あとで処理を書くところ
+ });
// JavaScriptならこんな感じ
- document.querySelector(".kurukuru");
+ document.querySelector(".kurukuru").addEventListener("click", function(){
+ // あとで処理を書くところ
+ });
イベントが発生したら、アニメーションさせたい要素に対して、クラスを追加する
最後に、アニメーションさせたい要素に対して、クラスを追加します。
ここで追加するクラスは、CSSの手順でアニメーションし終わった後の状態を指定したクラスです。なので、is-activeというクラスを追加する処理を記述します。
// jQueryならこんな感じ
$(".kurukuru").click(function(){
+ $(".kurukuru").addClass("is-active");
});
// JavaScriptならこんな感じ
document.querySelector(".kurukuru").addEventListener("click", function(){
+ document.querySelector(".kurukuru").classList.add("is-active");
});
※できるだけ多く人に理解してほしいため、冗長なコードだと思われる部分があるかもしれませんが見逃してください。
アニメーションができるか確認してみる
ここまでの手順を完了すれば、45度回転させるアニメーションが完成しているはずです。
以下にCodePenを用意しました。CodePen上の赤い四角形をクリックしてみてください。
まとめ
この記事で挙げた例は、比較的シンプルなものだと思います。なので実際は、もう少し複雑な処理をしなければならない場面はあります。
ですが、最初と最後を作ることがアニメーションを作る際に大切であるということを意識するだけでもアニメーションへの苦手意識が減らせると思います。
Webだけでなく、動画制作やパワポのアニメーションにも応用できる考え方だと思うので、ぜひ意識してみてください。
Discussion