SVGアニメーション – Web Animations API を使う – KeyFrameEffectのタイミングプロパティを変更する
KeyFrameEffectのタイミングプロパティをスクリプトから変更することができます。
画面上のボタン押下によってアニメーション再生中にタイミングプロパティを変更するサンプルを用意しました。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>テストHTML</title>
<style>
.animate_timeline_dom {
background-color: #cccccc;
width: 150px;
}
</style>
</head>
<body>
<input type="button" id="animate_timline_test" value="animate start">
<div>
<input type="button" id="set_timing_1" value="タイミングプロパティ1に更新">
<input type="button" id="set_timing_2" value="タイミングプロパティ2に更新">
</div>
<div class="KeyframeEffectDom">
<div>タイミングプロパティ -> <span id="timing"></span></div>
</div>
<div class="animate_timeline_dom">TestDom</div>
<script>
let keyf = [
{transform: "translateX(0px)" },
{transform: "translateX(400px)"},
];
// タイミングプロパティ1
let time1 = {
direction : 'normal',
duration : 5000
};
// タイミングプロパティ2
let time2 = {
direction : 'reverse',
duration : 10000
};
let animate_timeline_dom = document.querySelector(".animate_timeline_dom");
let keyframes_test = new KeyframeEffect(
animate_timeline_dom,
keyf,
time1
);
let anim_test = new Animation(
keyframes_test,
document.timeline,
);
let timingdom = document.querySelector("#timing");
timingdom.innerHTML = 'タイミングプロパティ 1';
animate_timline_test.addEventListener('click', () => {
anim_test.play();
}, false);
set_timing_1.addEventListener('click', () => {
timingdom.innerHTML = 'タイミングプロパティ 1';
anim_test.effect.updateTiming(time1); // タイミングプロパティ1 のセット
}, false);
set_timing_2.addEventListener('click', () => {
timingdom.innerHTML = 'タイミングプロパティ 2';
anim_test.effect.updateTiming(time2); // タイミングプロパティ2 のセット
}, false);
</script>
</body>
</html>
画面にアクセスして「Animate Startボタン」を押下します。
初期値ではタイミングプロパティ1がセットされています。
アニメーション中に「タイミングプロパティ2に更新」ボタンを押下すると、
途中でタイミングプロパティ2の値に切り替わり、アニメーションが
「direction : ‘reverse’」の為に逆再生になります。
今回はわかりやすいようにkeyframeは固定しています。
なので、transformでdomの移動方向は変更していません。
また、タイミングプロパティ2の再生中に、ふたたび「タイミングプロパティ1に更新」ボタンを押下すると、アニメーションは順再生に戻ります。
再生時間が終了していなければ、何度でも切り替えて動作することが確認できます。