JavaScriptでアニメーションする方法

この記事では、クラスの追加・削除をすることでアニメーションする方法について書きます。イベントと組み合わせて、インタラクティブなものを作ります。簡単にではありますが、JavaScriptを利用したアニメーションの導入としてご覧ください。

JavaScriptでクラスを追加・削除してアニメーションする

• transition+transform+JavaScript

<div id="rect1"></div>
<input type="button" id="btn1" value="回転">

#rect1{
  width:100px;
  height:100px;
  background:#000000;
  transition: all 300ms 0s ease;
}

.active{
  transform: rotate(90deg);
}

let rect1 = document.getElementById('rect1');
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', function(){
  if(!rect1.classList.contains('active')){
    rect1.classList.add('active');
  }else{
    rect1.classList.remove('active');
  }
});

/* 上記の書き換え
btn1.addEventListener('click', function(){
  rect1.classList.toggle('active');
});
*/

animationを切り分けてJavaScriptで操作する

• animation+JavaScript

下準備

まず、animationと@keyframesを利用したアニメーションのコードを用意します。

<div id="rect2"></div>

#rect2{
  width:100px;
  height:100px;
  background:#000000;
  animation: rotation 2s ease 0s 1 alternate none running;
}

@keyframes rotation{
  0%{
    transform:scale(.3);
  }
  50%{
    transform:scale(.6) rotate(-45deg);
    background: red;
  }
  100%{
    transform:scale(1) rotate(180deg);
    background: blue;
  }
}

animationを別クラスに切り分けてJavaScriptから操作する

下準備で用意したコードを以下のように変更します。

• 回転ボタンを追加する
• animationプロパティを別クラスに切り分ける
• JavaScriptからクラスの追加・削除でアニメーションする

<div id="rect2"></div>
<!-- 回転ボタンを追加する -->
<input type="button" id="btn2" value="回転">

#rect2{
  width:100px;
  height:100px;
  background:#000000;
}

/* animationプロパティを別クラスに切り分ける */
.animation1{
  animation: rotation 2s ease 0s 1 alternate none running;
}

@keyframes rotation{
  0%{
    transform:scale(.3);
  }
  50%{
    transform:scale(.6) rotate(-45deg);
    background: red;
  }
  100%{
    transform:scale(1) rotate(180deg);
    background: blue;
  }
}

let rect2 = document.getElementById('rect2');
let btn2 = document.getElementById('btn2');

//クラスの追加・削除
btn2.addEventListener('click', function(){
  rect2.classList.toggle('animation1');
});

まとめ

JavaScriptでアニメーションする方法として、クラスの追加・削除とクリックイベントを組み合わせた例をご紹介しました。イベントを利用するとユーザの任意のタイミングで、アニメーションすることができます。