Skip to content

Instantly share code, notes, and snippets.

@Yoxem
Last active July 27, 2019 14:47
Show Gist options
  • Save Yoxem/ac80bcd13934e712de85f8d14e16adc6 to your computer and use it in GitHub Desktop.
Save Yoxem/ac80bcd13934e712de85f8d14e16adc6 to your computer and use it in GitHub Desktop.
Using SVG animation to simulating clicking and opening a window / 使用 SVG 動畫模擬開啟視窗的動作
Display the source blob
Display the rendered blob
Raw
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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);
}
}
}
#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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment