Using SVG animation to simulating clicking and opening a window / 使用 SVG 動畫模擬開啟視窗的動作

example.svg

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<?xml-stylesheet type="text/css" href="style.css" ?><!-- 載入外部 css 必用 -->

<svg
   xmlns:xhtml="http://www.w3.org/1999/xhtml"
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="1122.5197"
   height="793.70081"
   viewBox="0 0 297 210"
   version="1.1"
   id="svg8"
   inkscape:version="0.92.4 (unknown)"
   sodipodi:docname="example.svg">
  <script
     xlink:href="script.js"
     id="script2" />
  <!-- 引用外部js -->
  <metadata
     id="metadata27">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <defs
     id="defs25" />
  <sodipodi:namedview
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1"
     objecttolerance="10"
     gridtolerance="10"
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
     inkscape:window-width="1366"
     inkscape:window-height="705"
     id="namedview23"
     showgrid="false"
     inkscape:zoom="0.42050406"
     inkscape:cx="733.94344"
     inkscape:cy="405.3867"
     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="1"
     inkscape:current-layer="svg8"
     units="px" />
  <rect
     id="dialog-box"
     width="285.44385"
     height="55.057522"
     x="5.7780762"
     y="147.74213" />
  <foreignObject
     x="15.497024"
     y="150.8681"
     width="270"
     height="80">
    <xhtml:div
       id="dialog-text" />
  </foreignObject>
  <text
     x="247.42435"
     y="196.64142"
     id="press-enter">請點選Enter
  </text>
  <g
     id="window-1"
     transform="translate(0,-94.200342)">
    <rect
       y="114.18765"
       x="10.156241"
       height="51.850285"
       width="117.59859"
       id="rect924" />
    <text
       id="text928"
       y="145.1909"
       x="36.883198">文字說明</text>
    <rect
       y="101.89325"
       x="10.156241"
       height="12.294402"
       width="117.59859"
       id="rect930" />

    <text
       id="text942"
       y="112.7599"
       x="17.098806"
       xml:space="preserve">視窗1</text>
  </g>

  <g
     id="window-2"
     transform="translate(0,-94.200342)">
    <rect
       y="113.69509"
       x="166.85249"
       height="51.850288"
       width="117.59859"
       id="rect924-3" />
    <text
       id="text928-4"
       y="144.69835"
       x="193.57945">文字說明</text>
    <rect
       y="101.40069"
       x="166.85249"
       height="12.294402"
       width="117.59859"
       id="rect930-5" />

    <text
       id="text942-3"
       y="112.26734"
       x="173.79506">視窗2</text>
  </g>
  <rect
     id="background"
     x="0"
     y="0"
     width="297"
     height="210" />
  <g
     id="click-window1">
    <rect
       y="76.648445"
       x="100.39149"
       height="17.639788"
       width="96.217026"
       id="rect857" />
    <text
       id="text918"
       y="90.567085"
       x="130.30301"
       xml:space="preserve">視窗1</text>
  </g>
  <g
     id="click-window2">
    <rect
       y="105.78082"
       x="100.39149"
       height="17.639788"
       width="96.217026"
       id="rect857-7" />
    <text
       id="text922"
       y="119.69946"
       x="130.35812"
       xml:space="preserve">視窗2</text>
  </g>
<text
       id="close-window1"
       y="18"
       x="119">X</text>
<text
       id="close-window2"
       y="18"
       x="270">X</text>
</svg>

script.js

var $ = function(id){return document.getElementById(id);}

// 載入完成後執行
window.onload = function(){

main();
}

var dialogList = ["這不是文字冒險遊戲，也不是什麼角色攻略遊戲", "就只是測試而已" , "現在我們進行一種類似以前 Flash 時代的選選單功能測試","各位可以點一下視窗1或是視窗2。"]
var dialogListIndex = 0;


function main(){

// 先讓 window-1 和 window-2 設為不可見

var window1 = $("window-1");
var window2 = $("window-2");
var window1Close = $("close-window1");
var window2Close = $("close-window2");

window1.style.display = "none";
window2.style.display = "none";
window1Close.style.display = "none";
window2Close.style.display = "none";

// 設置 dialogue-text 為預設文字

$("dialog-text").innerText = dialogList[dialogListIndex];

/* eventlisteners */
var background = $("background");


background.addEventListener("click", advanceDialog, false);

// 非 svg 物件要設定 EventListener
$("dialog-text").addEventListener("click", advanceDialog, false);

 
document.documentElement.addEventListener('keydown',function(evt){
    // pressing enter and advencing the dialog
    if (evt.keyCode === 13) {
	advanceDialog();
  }
});

// 開視窗
//window1.addEventListener("click", function(){alert("999");}, false);
clickWindow1 = $("click-window1");
clickWindow2 = $("click-window2");

clickWindow1.addEventListener("click", openWindow1, false);
clickWindow2.addEventListener("click", openWindow2, false);

function openWindow1(){
	window1.style.display = "block";
	window1Close.style.display = "block";
}

function openWindow2(){
	window2.style.display = "block";
	window2Close.style.display = "block";
}

// 關視窗

window1Close.addEventListener("click", closeWindow1, false);
window2Close.addEventListener("click", closeWindow2, false);
};

function closeWindow1(){
	$("window-1").style.display = "none";
	$("close-window1").style.display = "none";
}

function closeWindow2(){
	$("window-2").style.display = "none";
	$("close-window2").style.display = "none";
}

changeDialogPeriod = 2 // in ms

var prevTimeExecutedAdvDia = null;

function advanceDialog(){
  // if advanceDialog not executed or currenttime - prev. time executed advanceDialog < changeDialogPeriod (s), don't advance the dialog.
	if(prevTimeExecutedAdvDia != null && Date.now() - prevTimeExecutedAdvDia < changeDialogPeriod * 1000){
         return false;
    }
    else {
		if(prevTimeExecutedAdvDia == null){
			prevTimeExecutedAdvDia = Date.now();
		}

		prevTimeExecutedAdvDia = Date.now();
		if (dialogListIndex < dialogList.length - 1){
			dialogListIndex += 1; // 跳到下一個對話
			// 更新對話內容
			var dialogText = $("dialog-text");



			dialogText.innerText = dialogList[dialogListIndex];

			// 更新換場動畫
			dialogText.classList.remove("change-dialog-animation");
			
			// see: https://css-tricks.com/restart-css-animation/
			void dialogText.offsetWidth;
			dialogText.classList.toggle("change-dialog-animation");
			dialogText.style.animationDuration = changeDialogPeriod + "s";

		}
		
		if (dialogListIndex == dialogList.length - 1){
			// 最後文字顯示時，將「請輸入 enter」離場
			pressEnter = $("press-enter");
			pressEnter.classList.add("closing-animation");
			pressEnter.style.animationDuration = changeDialogPeriod + "s";
			setTimeout(()=>{pressEnter.style.display = "None"},changeDialogPeriod * 1000);
		}
	}

}

style.css

#dialog-box {
    opacity: 1;
    fill: #008000
}

#dialog-text {
    font-size: 14px;
    font-family: sans-serif;
    color: #ffffff;
}

#dialog-text.change-dialog-animation{
    animation-name : changeDialog;
    animation-timing-function : ease-out;
    animation-direction : normal;
	animation-duration : 2s; /* default time */  
    animation-iteration-count : 1;
}

@keyframes changeDialog{
  from{
    opacity: 0;
  }
  to{
	opacity: 1;
  }
}

#press-enter {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 8pt;
    fill: #ffffff;
    line-height: 125%;
    font-family: sans-serif
}

#press-enter.closing-animation{
    animation-name: closingAnimation;
    animation-timing-function: ease-in;
    animation-duration: 2s;
    animation-iteration-count: 1;
}

@keyframes closingAnimation{
    from{
        opacity: 1;
    }
    to{
        opacity: 0;
    }

}

#tspan912 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-family: sans-serif;
    -inkscape-font-specification: sans-serif;
    fill: #ffffff;
    stroke-width: 0.26458332px
}

#background {
   fill: #ffffff;
    stroke-width: 0;
    opacity: 0; 
}

#rect857 {
    opacity: 1;
    fill: #7fff2a
}

#rect857-7 {
    opacity: 1;
    fill: #7fff2a
}

#text918 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    line-height: 125%;
    font-family: sans-serif
}

#text922 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14.11111069px;
    line-height: 125%;
    font-family: sans-serif
}


#rect924 {
    opacity: 1;
    fill: #ffffff;
    fill-opacity: 1;
    fill-rule: nonzero;
    stroke: #008000;
    stroke-width: 1
}

#text928 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 12px;
    line-height: 125%;
    font-family: sans-serif
}

#rect930 {
    opacity: 1;
    fill: #008000
}

#text938 {
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    font-stretch: normal;
    font-size: 12px;
    line-height: 125%;
    font-family: sans-serif
}

#text942 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 12px;
    line-height: 125%;
    font-family: sans-serif
}


#rect924-3 {
    opacity: 1;
    fill: #ffffff;
    fill-opacity: 1;
    fill-rule: nonzero;
    stroke: #008000;
    stroke-width: 1
}

#text928-4 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 14px;
    line-height: 125%;
    font-family: sans-serif
}

#rect930-5 {
    opacity: 1;
    fill: #008000
}

#text938-0 {
    font-style: normal;
    font-variant: normal;
    font-weight: 300;
    font-stretch: normal;
    font-size: 14.11111069px;
    line-height: 125%;
    font-family: sans-serif
}

#text942-3 {
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    font-stretch: normal;
    font-size: 12px;
    line-height: 125%;
    font-family: sans-serif
}