JSアニメーションの発生タイミングを指定できる!addEventListenerの使い方

JavaScriptを使ってサイトにアニメーションを導入してみたは良いものの、「アニメーションが思い通りに動いてくれない……」なんてことがあると思います。

とくに訪れたユーザーの動きに合わせてアニメーションを連動させたいときや、サービス内のウインドウの表示・非表示をユーザー行動に一任したい時など。アニメーションの発生タイミングをフレキシブルに設定したいときもあるでしょう。

そこで今回は、導入したアニメーションの発生タイミングを操作できる「addEventListener」の使い方についてご紹介します。アニメーションを自由に操作したい方は、ぜひ本記事を読みながら設定をお試しください。

アニメーションの発生タイミングを設定できる「addEventListener」

アニメーションの動作タイミングを設定できる「addEventListener」

プログラミング言語というのは、基本的に書いたコードの順番通りにアニメーションが開始されます。そのため、ただアニメーションの動きを指示するコードを書いただけでは、意図しない動作を発生させてしまう場合があります。

それこそ、最悪アニメーションとして動かしたい部分が裏でぶつかり合い、アニメーション自体が動作しなくなってしまうことも。

そこで、アニメーションが動く順番やアニメーションを動かすタイミングを設定するのに活躍するのが「addEventListener」というメソッドです。

「addEventListener」を設定することで、

  • A:クリックやページ読み込みの終わりに

という動作をしたら、

  • B:数字がリセット/カウントされる、アニメーションが動く

という状態に変化させるという、トリガーアクションのコマンドを付与できます。アニメーションの動きに規則性をもたせることが可能なのです。

文字数の自動カウントやWebページ内のスクロールによるアニメーションなど、特定のアクションに紐づけて動作を管理・操作したいときに利用します。

「addEventListener」の設定方法と書き方

「addEventListener」の設定方法と書き方

設定方法は多岐に渡りますが、一般的な書き方としては無名関数を使った方法があります。(※無名関数は、名前のない関数のことです)

ちなみにaddEventListenerの設定で使うのは、おもにHTMLとJavaScriptのファイル2種類。

HTMLでイベントを設定したいもの(ボタン)を用意し、JavaScriptでアニメーションの発動条件と実行結果を設定します。

ログを表示

✅index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>これはテストだよ</title>
</head>
<body>
 <button id="C">ログを表示</button>
 <script src="script.js"><script>
</body>
</html>
まずはイベントを紐付けるものをHTMLで用意します。

今回は簡単なボタンを使ってみましょう。HTMLはこれで完成です。

✅script.js

(function() {
'use strict';
var text = document.getElementById('C');
text.addEventListener('A(実行結果の発動条件・動作)', function() {
	B(実行結果)
})
})();

次にJavaScriptでは、アニメーションの発動条件と実行結果を設定します。

  • A:アニメーションが発動するタイミング(Aについては後述します)
  • B:Aの動作が実行される変化
  • C:動作発動に必要となるフックのid(名称は自由)

を、それぞれ記述しましょう。

本記事では、クリックするとデベロッパーツール上で「これはテストです」という一文を表示してみたいと思います。

  • A:click
  • B:console.log(‘これはテストです’);
  • C:textlog

をそれぞれ代入し保存。これで設定は完了です。

まとめると以下の通り。

✅index.html

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="UTF-8">
 <title>これはテストだよ</title>
</head>
<body>
 <button id="textlog">ログを表示</button>
 <script src="script.js"><script>
</body>
</html>

✅script.js

(function() {
'use strict';
var text = document.getElementById('textlog');
text.addEventListener('click', function() {
	console.log('これはテストです');
})
})();

JavaScriptアニメーション

実際に動かしてみるとこの通り。ボタンを押すことで、文字がきちんとデベロッパーツール画面上に出力されました。

トリガーコマンドに設定できる「addEventListener」のイベントの種類

「addEventListener」のイベントの種類

クリックを動作のトリガーとしたもの以外にも、イベント(タイミング)の種類は多岐にわたります。

「Aという動作をしたら、B(数字がリセット/カウントされる・アニメーションが動く)される」の、Aに該当する部分が以下のイベントになります。

イベントの種類(A)  効果・内容
mousedown マウスポインタを押しているときにBされる
mousemove マウスポインタを動かすときにBされる
mouseup マウスポインタを離したときにBされる
keyup キーボードのキーから離したときにBされる
keydown キーボードのキーが押されたときにBされる
load Webページの読み込みが完了したときにBされる

※以下の構文のAに該当する箇所に上記のイベントを記述することで、それぞれ動作の違いを楽しむことができます。気になった方は、ぜひご自身のエディタで検証してみてください。

✅script.js

(function() {
'use strict';
var text = document.getElementById('textlog');
text.addEventListener('A', function() {
	console.log('これはテストです');
})
})();

ちなみにエディタに関しては、過去にBracketsというエディタについて記事で取り上げていますので、エディタをまだ使ったことがない方は合わせて以下の記事も参考にしてみてください。

おわりに

今回は、JavaScriptアニメーションの発生タイミングを指定するaddEventListenerの使い方について解説しました。

addEventListenerを使用することで、アニメーション駆動に統率感が生まれ、キレイな動きを実現できます。また使い方次第では、ツールやサービス開発の際にも役立ちます。

JavaScriptを学んでいる方は、ぜひaddEventListenerを使ったイベント処理もマスターしていきましょう。

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ