SVGアニメーション – Web Animations API を使う – CSSアニメーション再生時のgetAnimations()の取得について
前回の投稿(https://propansystem.net/blog/10005)のサンプルをもとに、
CSSアニメーション再生時のgetAnimations()の取得について試してみます。
SVGでのアニメーション再生中のオブジェクトの情報をgetAnimations()で
取得できることがわかりました。
同様にcssアニメーション中のdivタグの情報をgetAnimations()で取得してみます。
cssのアニメーションは指定オブジェクトを左から右へ500px移動するシンプルなものにしました。
@keyframes cssAnimation { 0% { transform: translateX(0px); } 100% { transform: translateX(500px); } }
このcssアニメーション中にgetAnimations()を実行し、取得した結果を画面に出力するサンプルを用意しました。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>テストHTML</title> <style> .bottom { margin-bottom : 10px; } #test1_dom { color : #5f5d5d; background-color : #eeeeee; font-size : 1.1rem; width : 150px; animation : cssAnimation 10s ease-out 0s forwards; } @keyframes cssAnimation { 0% { transform : translateX(0px); } 100% { transform : translateX(500px); } } </style> </head> <body> <!-- ボタン --> <div class="bottom"> <input type="button" id="getAnimations" value="getAnimations情報の取得と出力"> </div> <!-- アニメーション用DIV --> <div id="test1_dom">TEST1</div> <!-- getAnimationsの取得結果 --> <div class="params" id="getAnimationsVal"></div> <script> // DOM要素取得 let test1_dom = document.querySelector("#test1_dom" ); let getAnimations_dom = document.querySelector("#getAnimations" ); let getAnimationsVal_dom = document.querySelector("#getAnimationsVal"); // getAnimationsの実行と画面出力 getAnimations_dom.addEventListener('click', (e) => { let animations = test1_dom.getAnimations(); let animations_display_value = ''; // 各アニメーションの詳細を表示 animations.forEach((animation, index) => { animations_display_value += 'Animation :' + index + '<br />'; animations_display_value += 'Play State :' + animation.playState + '<br />'; animations_display_value += 'Start Time :' + animation.startTime + '<br />'; animations_display_value += 'Current Time :' + animation.currentTime + '<br />'; animations_display_value += 'Duration :' + animation.effect.getTiming().duration + '<br />'; animations_display_value += 'Animation ID :' + animation.id + '<br />'; }); // 画面内のDOMへ出力する getAnimationsVal_dom.innerHTML = animations_display_value; }, false); </script> </body> </html>
画面にアクセスするとcssアニメーションが再生されます。
再生中に「getAnimations情報の取得と出力」ボタンを押下すると、
SVG再生中に取得表示した時と同様に、cssアニメーション再生中の情報も取得できることがわかります。