SVGアニメーション – Web Animations API を使う – KeyFrameEffectのkeyframeを変更する
KeyFrameEffectのkeyframeをスクリプトから変更することができます。
画面上にkeyframeを変更するボタンを設置し、ボタン押下によってアニメーション再生中にkeyfarmeを変更するサンプルを用意しました。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | <!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"><input type="button" id="set_keyframe_1" value="set [keyframe 1]"><input type="button" id="set_keyframe_2" value="set [keyframe 2]"><div class="KeyframeEffectDom"> <div>keyframe -> <span id="keyframe"></span></div></div><div class="animate_timeline_dom">TestDom</div><script>let keyf1 = [ {transform: "translateX(0px)" }, {transform: "translateX(400px)"}, {transform: "translateY(300px)"}, {transform: "scale(2)" },];let keyf2 = [ {transform: "scale(1)" }, {transform: "scale(0.2)" }, {transform: "translateY(300px)"}, {transform: "scale(3)" }, {transform: "translateX(500px)"},];let animate_timeline_dom = document.querySelector(".animate_timeline_dom");let keyframes_test = new KeyframeEffect( animate_timeline_dom, keyf1, { duration: 5000, delay : 100, endDelay: 300 });let anim_test = new Animation( keyframes_test, document.timeline,);let keyframedom = document.querySelector("#keyframe");keyframedom.innerHTML = 'keyframe 1';animate_timline_test.addEventListener('click', () => { anim_test.play();}, false);set_keyframe_1.addEventListener('click', () => { keyframedom.innerHTML = 'keyframe 1'; anim_test.effect.setKeyframes(keyf1); // keyframe 1 のセット}, false);set_keyframe_2.addEventListener('click', () => { keyframedom.innerHTML = 'keyframe 2'; anim_test.effect.setKeyframes(keyf2); // keyframe 2 のセット}, false);</script> </body></html> |
画面にアクセスし、set [keyframe 1]および、set [keyframe 2]ボタンを押下し、
animate startボタンを押下すると、変更されたkeyframeでアニメーションされることがわかります。
以下の画像は実行時の画面キャプチャです。
アニメーション操作を複数回していますが、最後のアニメーション再生の際には、アニメーション途中でkeyframeの変更ボタンを押下していますが、アニメーション再生中でもkeyframeが動的に切り替わっていることがわかります。