10_2 Web Animations APIアニメーションの基本　その１

WAAPIアニメーションで記述するJavaScriptは定型的で、CSS Animationsと似たプロパティ名を使用するので、早く慣れることができます。

以下は、ボールが左右に繰り返し移動する単純なCSS AnimationsのCSSコードと、それと同じアニメーションを作成するWAAPIのJavaScriptコードの例です。

HTML：アニメーションの対象となる<div>要素です。

<div class="ball"></div>

CSS

.ball {
  position: absolute;
  width: 20px;
  height: 20px;
  top:200px;
  left:200px;
  border: solid 3px #000;
  border-radius: 50%;
  background-color:chocolate;
  animation: ball-animation 1s infinite alternate;
}
@keyframes ball-animation{
  0%{
    transform:translateX(0);
  }
  100%{
    transform:translateX(100px);
  }
}

このCSS Animationsは、次のようにしてWAAPIに置き換えることができます。

const target = document.querySelector('.ball');
const anim = target.animate(
  {transform:['translateX(0)','translate(100px)']}, // キーフレームパラメータ
  { duration:1000,                                  // タイミングパラメータ
    iterations:Infinity,
    direction:'alternate',
    easing:'ease'
 });

１行めでは、変数targetとしてアニメーションさせるボールの<div>要素を参照しています。以降がWAAPIのJavaScriptコードです。

２行めでは、targetのanimate()メソッドに、キーフレームパラメータとタイミングパラメータと呼ばれる引数を、オブジェクトの形式で渡しています。

前述したCSSコードと比較すると、キーフレームパラメータは、@keyframes ball-animationに相当し、タイミングパラメータは、animation: ball-animation 1s infinite alternate;に相当する内容だということが分かります。

ただ、タイミングパラメータでは、タイミング(イージング)関数をeasing:’ease’で指定しています。これは、CSS Animationsの初期値がeaseであるのに対し、WAAPIではlinearであるからです。また、1sと1000、infiniteとInfinityなど、細かな相違もあります。

animate()はWAAPIのメソッドで、WAAPIのAnimationオブジェクトを返します。

上記WAAPIのコードを実行すると、アニメーションは自動的にスタートします。