JavaScript - setInterval() を使ったアニメーションの基本
この記事では JavaScript でアニメーションを作る方法を解説します。ポイントとなるのは setInterval() メソッドと clearInterval() メソッドです。ボタンをクリックしてアニメーションを動かしたり止めたりする方法を学びましょう。
JavaScript でアニメーションを作ろう
今回は、HTML の <div> 要素を動かすアニメーションを作ります。「<div> 要素の位置を少し動かす」という処理を何度も繰り返すことで横へ移動する様子を表現しますよ。そのために使うのが、setInterval() メソッドです。
また、記事の後半では、アニメーションのスタートとストップをボタンで操作する方法を紹介します。そこでは、clearInterval() メソッドの使い方について解説します。初心者の方でも簡単にできるシンプルなアニメーションなので、一緒に作ってみましょう。
ラインが横に動くアニメーション
これから作っていくのは、緑のラインが右へ動くアニメーションです。動いているのは HTML の <div> 要素です。
See the Pen JavaScript - Left to Right Animation by Pyxofy (@pyxofy) on CodePen.
HTML
まずはHTML です。アニメーションを作成するエリアを用意しましょう。
<div class="container">
</div>
エリア内で動かす <div> 要素を作ります。ここでは line というクラスをつけました。
<div class="container">
<!--動かす要素-->
<div class="line"></div>
</div>
CSS
次にCSS です。アニメーションエリアは position: relative、動かす要素は position: absolute にしてください。
/*アニメーションエリア*/
.container {
position: relative;
width: 500px;
height: 500px;
background: black;
border: 5px solid lightgray;
}
/*動かす要素*/
.line{
position: absolute;
width: 10px;
height: 500px;
background-color: #4FF8DE;
}
ウェブページには下のように表示されます。
JavaScript
続いて JavaScript です。動かすラインである <div> 要素を取得して操作できるようにします。
const line = document.querySelector('.line');
アニメーションエリアとラインの幅を指定しましょう。この数値は先ほど CSS で設定した値と同じにします。（変数に格納せずに、500 や 10 の数値をそのまま使うこともできますが、分かりやすい名前をつけた変数で参照できるようにしておくのがプログラムとしてはお勧めです。）
const containerWidth = 500; //アニメーションエリアの幅
const lineWidth = 10; //ラインの幅
変数 x を宣言しましょう。x はラインの位置を表します。最初の位置は 0 です。ラインの位置は動かすことで変化するので、const ではなく let で宣言します。
let x = 0;
ラインを少しずつ動かす関数
ラインを少しずつ動かす関数を moveLine という名前で定義していきましょう。
function moveLine() {
}
動かす範囲を決める if 文を書きます。x < containerWidth - lineWidth とすることで、ラインがアニメーションエリアからはみ出さないようにしますよ。
function moveLine() {
//もしラインの位置がアニメーションエリア内なら
if(x < containerWidth - lineWidth) {
}
}
条件が成り立っている間は、ラインの位置を右へ少しずらしましょう。x の値を１ずつ増やすために x++ とします。line.style.left が表すのは、ラインの左側の位置です。x は１ずつ増えるので、x + 'px' とすると、ラインは１ピクセルずつ右へ動くことになります。
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++; //xの値を1増やす
line.style.left = x + 'px'; //ラインの左側の位置をxピクセルにする
}
}
続いて、else を追加します。アニメーションエリアの右端まで動いたら、ラインの位置を 0 に戻して、再び左端から動き続けるようにしましょう。
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else { //条件が成立しないなら
x = 0; //最初の位置に戻す
}
}
ラインを少しずつ動かす関数 moveLine を定義できました。この関数を setInterval() メソッドで呼び出してアニメーションにしていきますよ。
setInterval() とは？
JavaScript でアニメーションを作りたいときに使われるメソッドのひとつが setInterval() です。Interval (インターバル) は「時間の間隔」という意味です。setInterval() は、特定の処理を一定時間ごとに呼び出します。指定する時間の単位は「ミリ秒」です。たとえば、１秒ごとに関数を実行したい場合は「1000」を指定します。
構文：
setInterval(実行する関数, 遅延ミリ秒)
関数 moveLine を setInterval() で0.01秒ごとに呼び出しましょう。
setInterval(moveLine, 10);
完成コード
ラインが横に動くアニメーションのコードが完成です。
/********************/
/* アニメーションコード */
/********************/
//要素の取得
const line = document.querySelector('.line');
//サイズを指定
const containerWidth = 500;
const lineWidth = 10;
//ラインの位置
let x = 0;
//ラインを少しずつ動かす関数
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}
//関数を0.01秒ごとに呼び出す
setInterval(moveLine, 10);
setInterval() の括弧 () の中には、関数を直接書くこともできますよ。たとえば、括弧 () の中にアロー関数を書くと下のようになります。
/**********************************/
/* アニメーションコード アロー関数を使用 */
/**********************************/
//要素の取得
const line = document.querySelector('.line');
//サイズを指定
const containerWidth = 500;
const lineWidth = 10;
//ラインの位置
let x = 0;
//（）内にアロー関数を書く
setInterval(() => {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}, 10);
スタート / ストップボタンで操作する
ここからは、スタートボタンとストップボタンを作って、ラインの動きをボタンでコントロールできるようにプログラミングしていきます。
HTML でスタートボタンとストップボタンを作ってください。
<div class="container">
<div class="line"></div>
<!--ボタンを２つ作る-->
<div class="button">
<button id="start">Start</button>
<button id="stop">Stop</button>
</div>
</div>
そして、JavaScript でボタンを操作できるように <button> 要素を取得します。
const startBtn = document.querySelector('#start'); //スタートボタン
const stopBtn = document.querySelector('#stop'); //ストップボタン
ボタンの準備ができました。この２つのボタンをクリックすることで、ラインを動かしたり止めたりできるようにします。そのためには、setInterval() に加えて clearInterval() メソッドが必要です。
clearInterval() とは？
アニメーションを止めるために使うのは、clearInterval() メソッドです。clearInterval() は、setInterval() で関数を呼び出し続けるのを取り消します。
構文：
clearInterval(識別子)
setInterval() は固有の識別子 (ID) を返します。識別子を変数に格納し、clearInterval() の括弧 () 内にその変数名を指定することで、setInterval() での関数呼び出しをキャンセルます。
キャンセル構文：
let 変数名 = setInterval(…);
clearInterval(変数名);
ではこれから、スタートボタンでラインを動かしたりストップボタンで動きを止められるように、先ほど作ったコードを作り替えていきましょう。
スタートボタンで動かす
最初に、setInterval() で返される ID を格納する変数を用意しておいてください。ここでは intervalId という名前で変数を作ります。
let intervalId;
スタートボタンが押されたときに実行する関数を animate という名前で定義していきましょう。
function animate() {
}
setInterval() で返される ID を変数に格納します。
function animate() {
//IDを変数に格納する
intervalId = setInterval(moveLine, 10);
}
ラインを動かす関数 moveLine を、関数 animate の中に含めましょう。
function animate() {
intervalId = setInterval(moveLine, 10);
//setInterval()で呼び出す関数
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}
}
アニメーション中はスタートボタンを押せないようにしておきましょう。なぜかと言うと、スタートボタンを連打できてしまうとラインの動きが速くなってしまうからです。
function animate() {
//アニメーション中はスタートボタンを押せなくする
startBtn.disabled = true;
intervalId = setInterval(moveLine, 10);
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}
}
スタートボタンがクリックされたら関数 animate を実行するように、イベントリスナーを設定します。
startBtn.addEventListener('click', animate);
スタートボタンを押すとラインが動くようになりました。
//スタートボタンが押されたときに実行する関数
function animate() {
startBtn.disabled = true;
intervalId = setInterval(moveLine, 10);
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}
}
//イベントリスナー
startBtn.addEventListener('click', animate);
ストップボタンで動きを止める
続いて、ストップボタンが押されたときに実行する関数を stop という名前で定義していきましょう。
function stop() {
}
clearInterval() の引数に setInterval() の ID を指定し、関数呼び出しをキャンセルします。
function stop() {
//呼び出しをキャンセル
clearInterval(intervalId);
}
動きを止めたあとにスタートボタンを有効にします。そうすることで、再びスタートボタンを押して動かせるようになりますよ。
function stop() {
clearInterval(intervalId);
//スタートボタンを押せるようにする
startBtn.disabled = false;
}
ストップボタンがクリックされたら関数 stop を実行するように、イベントリスナーを設定します。
stopBtn.addEventListener('click', stop);
ストップボタンを押すとラインの動きが止まるようになりました。
//ストップボタンが押されたときに実行する関数
function stop() {
clearInterval(intervalId);
startBtn.disabled = false;
}
//イベントリスナー
stopBtn.addEventListener('click', stop);
完成コード - ボタンあり
スタートボタンとストップボタンでアニメーションの動きを操作できるコードが完成です。
/******************************/
/* アニメーションコード ボタンあり */
/******************************/
const line = document.querySelector('.line');
const startBtn = document.querySelector('#start');
const stopBtn = document.querySelector('#stop');
const containerWidth = 500;
const lineWidth = 10;
let x = 0;
let intervalId;
function animate() {
startBtn.disabled = true;
intervalId = setInterval(moveLine, 10);
function moveLine() {
if(x < containerWidth - lineWidth) {
x ++;
line.style.left = x + 'px';
} else {
x = 0;
}
}
}
function stop() {
clearInterval(intervalId);
startBtn.disabled = false;
}
startBtn.addEventListener('click', animate);
stopBtn.addEventListener('click', stop);
まとめ
ここまで、JavaScript で簡単なアニメーションを作る方法を紹介してきました。
今回は、setInterval() メソッドの引数に 10 を指定し、0.01秒間隔で関数を実行しました。呼び出す間隔を長くして、たとえば引数を 100 とすると、ゆっくり動くアニメーションになりますよ。また、今回はラインを 1px ずつ動かしましたが、もし 5px ずつ動かしたらどのようなアニメーションになるでしょうか？いろいろと値を変えて動きを試してみてくださいね。
最後まで読んでいただき、ありがとうございます。この記事をシェアしてくれると嬉しいです！
こちらもチェック！ X (Twitter) @pyxofy・LinkedIn・Mastodon・Facebook
関連記事
Pyxofy
Pyxofy
Pyxofy