SVGアニメーション – Web Animations API を使う – 基本的な記述
Animation()によるAnimationオブジェクトの生成を試します。
animationオブジェクトを生成する際の第二引数に用い、AnimationTimelineというインタフェースを取得している。
var animation = new Animation([effect][, timeline]);
これまで紹介してきた
Element.animate()
とは異なり、play()メソッドでアニメーションを開始する。
まずはこれまでの Element.animate() の書き方でサンプルを用意し、それをもとに、その後 animation = new Animation を試します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.animate_timeline_dom {
background-color: #ebebeb;
}
</style>
</head>
<body>
<input type="button" id="button_1" value="animate test">
<div class="animate_dom">test</div>
<div id="log_disp"></div>
<script>
// アニメーション用の空オブジェクトを定義
let animation;
// 「animate test」ボタンのDOM取得と押下イベントの用意
let dom_button_1 = document.getElementById('button_1');
button_1.addEventListener('click', () => {
// DOM要素を取得
let animate_dom = document.querySelector(".animate_dom");
// アニメーションの effect と timeline を定義
animation = animate_dom.animate(
[
{backgroundColor: '#fff', width:'100px'},
{backgroundColor: '#999', width:'50px' },
],
{
duration: 8000
}
);
// アニメーションの再生
animation.play();
}, false);
</script>
</body>
</html>
いままでは Element.animate() という形でアニメーションを定義、再生していましたが、
Web Animation API のインターフェースとしてのAnimationを使用し、
animation.play();
というメソッドでアニメーション再生しています。
画面にアクセスして、animate testボタンを押下した時の動きは以下のようになります。
duration: 8000 の定義をしているので、8秒かけて
{backgroundColor: ‘#fff’, width:’100px’}
から
{backgroundColor: ‘#999′, width:’50px’ }
へアニメーションしていることがわかります。