実をいうと、target.animate()はAnimationオブジェクトを作成して、そのAnimationオブジェクトの再生を開始するショートカットで、実際にはその裏で、いくつかの重要な事柄が実行されています。
target.animate()は次のように書き換えることができます。
const target = document.querySelector('.ball');
const keyframes = {transform:['translateX(0)','translate(100px)']};
const timings = { duration:1000, iterations:Infinity, direction:'alternate',easing:'ease'};
const effect = new KeyframeEffect(target, keyframes, timings);
const anim = new Animation(effect, document.timeline);
anim.play();
ここではまず、
- キーフレームパラメータを作成し、
- 次いでタイミングパラメータを作成しています。
- そして、new KeyframeEffect()に、ターゲットとキーフレームパラメータ、タイミングパラメータを渡してKeyframeEffectオブジェクトを作成し、
- その後new Animation()に、作成したKeyframeEffectオブジェクトと、ドキュメントのタイムライン(document.timeline)を渡して、Animationオブジェクトを作成しています。
- そして最後、Animationオブジェクトのplay()メソッドでアニメーションの再生を開始しています。
こうやって手順をたどると、animate()メソッドを使った方がはるかに簡単に早くアニメーションの開始まで実行できることが分かります。しかし、裏側でKeyframeEffectオブジェクトなどが作成され、ドキュメントのタイムラインが使用されていることは分かりません。
したがって、以降では、早くWAAPIの本質が理解できるように、いささか長い書き方ではありますが、animate()ではなく、1つずつ手順をたどる書き方で進めることにします。