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

example.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
}