Merge pull request #51 from cynack/update_loading_animation

style: ローディングアニメーションの変更
cynack · Dec 17, 2021 · 4b0bdf7 · 4b0bdf7
2 parents 3fec57c + 1707291
commit 4b0bdf7
Show file tree

Hide file tree

Showing 3 changed files with 112 additions and 58 deletions.
diff --git a/index.html b/index.html
@@ -14,7 +14,7 @@
     <div>
       <figni-viewer
         id="view"
-        item-id="9IuDxlQF"
+        item-id="4Zz7H62G"
         token="5UTBSHOXODAj2QLo"
         state="close"
         orbit="10deg 75deg 150%"
@@ -65,6 +65,7 @@
       const view = document.getElementById('view')
     </script>
     <style>
+      @import url('https://fonts.googleapis.com/css2?family=DotGothic16&family=Noto+Sans+JP:wght@400;700&family=Spartan:wght@700&family=Yuji+Mai&display=swap');
       #view {
         width: 100%;
         height: 480px;
@@ -79,6 +80,8 @@
         --figni-viewer-gray-500: rgb(130, 130, 130);
         --figni-viewer-gray-300: rgb(180, 180, 180);
         --figni-viewer-gray-300-tp: rgba(180, 180, 180, 0.3); */
+        --figni-viewer-contents-font: 'Sawarabi Mincho', sans-serif;
+        --figni-viewer-ui-font: 'DotGothic16', sans-serif;
       }
       figni-viewer:not(:defined) {
         display: none;

diff --git a/src/index.js b/src/index.js
@@ -14,7 +14,7 @@ const SVG_TOGGLE_VISIBLE_HOTSPOT_BUTTON_OFF =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 147.41 147.41"><defs><style>.visible-hotspot-button-off-frame{fill:none;}.visible-hotspot-button-off-icon{fill:var(--figni-viewer-gray-500);}</style></defs><rect class="visible-hotspot-button-off-frame" width="147.41" height="147.41"/><path class="visible-hotspot-button-off-icon" d="M71.52,109.14l9.34-16a5,5,0,0,1,4.86,5v5.9a5,5,0,0,1-5,5Zm33.93-16H100a5.25,5.25,0,0,0-5.25,5.25v5.5a5.25,5.25,0,0,0,5.25,5.25h5.5a5.25,5.25,0,0,0,5.25-5.25v-5.5A5.25,5.25,0,0,0,105.45,93.14Zm.43-9.19a5.06,5.06,0,0,0,5.06-5V73A5.07,5.07,0,0,0,105.88,68H95.61L86.25,84ZM41.52,93.14a5,5,0,0,0-5.05,5v5.9a5.26,5.26,0,0,0,.18,1.27l7.16-12.22ZM47.22,68h-5.5a5.26,5.26,0,0,0-5.25,5.26V78.7A5.25,5.25,0,0,0,41.72,84h5.5a5.23,5.23,0,0,0,2.27-.53l3-5.1V73.21A5.26,5.26,0,0,0,47.22,68Zm76.65-48.32L115.52,33.9a17.63,17.63,0,0,1,4.25,11.49V102A17.75,17.75,0,0,1,102,119.77H65.3l-9.35,16h46.18a33.64,33.64,0,0,0,33.64-33.64V45.28A33.57,33.57,0,0,0,123.87,19.63ZM23.54,127.79l8.35-14.27A17.67,17.67,0,0,1,27.65,102V45.39A17.74,17.74,0,0,1,45.39,27.65H82.11l9.36-16H45.28A33.62,33.62,0,0,0,11.65,45.28v56.85A33.56,33.56,0,0,0,23.54,127.79Zm17.82,17.07,78.5-134.23a5.15,5.15,0,0,0-1.85-7L113.11.71a5.16,5.16,0,0,0-7.06,1.85L27.55,136.78a5.16,5.16,0,0,0,1.85,7.06l4.9,2.87A5.17,5.17,0,0,0,41.36,144.86Z"/></svg>'
 const SVG_DOWNLOAD_SCREENSHOT_BUTTON =
   '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><defs><style>.figni-viewer-screenshot{fill:var(--figni-viewer-gray-500);}</style></defs><path class="figni-viewer-screenshot" d="M14.61,0H5.39A5.4,5.4,0,0,0,0,5.39v9.22A5.4,5.4,0,0,0,5.39,20h9.22A5.4,5.4,0,0,0,20,14.61V5.39A5.4,5.4,0,0,0,14.61,0ZM5.39,2.58h9.22a2.81,2.81,0,0,1,2.81,2.81v6L13.63,7.64a1.12,1.12,0,0,0-1.57,0L8.54,11.16a1.11,1.11,0,0,1-1.58,0,1.12,1.12,0,0,0-1.57,0L2.58,14V5.39A2.81,2.81,0,0,1,5.39,2.58Z"/><circle class="figni-viewer-screenshot" cx="5.88" cy="5.88" r="1.92"/></svg>'
-
+const SVG_LOADING_CUBE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 134 154.73"><rect width="134" height="154.73" style="fill:none"/><path class="figni-viewer-cube-svg" d="M111.72,25.82,89.28,12.87a44.66,44.66,0,0,0-44.56,0l-22.44,13A44.68,44.68,0,0,0,0,64.41V90.32a44.68,44.68,0,0,0,22.28,38.59l22.44,13a44.62,44.62,0,0,0,44.56,0l22.44-13A44.68,44.68,0,0,0,134,90.32V64.41A44.68,44.68,0,0,0,111.72,25.82Z"/><path d="M31.2,113.47A26.71,26.71,0,0,1,17.83,90.32V64.41A26.71,26.71,0,0,1,31.2,41.26l22.43-13a26.82,26.82,0,0,1,26.74,0l22.43,13A25.11,25.11,0,0,1,105.47,43a9,9,0,0,1-1.06,15L82.77,70.1A32.69,32.69,0,0,0,67,98.08v20.53a9,9,0,0,1-13.25,7.89l-.12-.07Z" class="figni-viewer-cube-svg-window"/></svg>'
 class FigniViewerElement extends ModelViewerElement {
   static #MODEL_ATTRIBUTE = ['item-id', 'token', 'model-tag']
   static #TOOL_ATTRIBUTE = ['screenshot']
@@ -119,27 +119,38 @@ class FigniViewerElement extends ModelViewerElement {
     this.minCameraOrbit = FigniViewerElement.#MIN_CAMERA_ORBIT
 
     const loadingAnimationHolder = document.createElement('div')
+    const loadingAnimation = document.createElement('div')
+    const cubes = document.createElement('div')
     const progressBarHolder = document.createElement('span')
     this.#progressBar = document.createElement('span')
-    const loadingAnimationSpinner = document.createElement('span')
+    const loadingText = document.createElement('span')
+    for (let i = 0; i < 4; i++) {
+      const cube = document.createElement('div')
+      cube.innerHTML = SVG_LOADING_CUBE
+      cube.classList.add('figni-viewer-cube')
+      cube.classList.add(`figni-viewer-cube${i + 1}`)
+      cubes.appendChild(cube)
+    }
+    loadingText.innerText = 'LOADING'
     loadingAnimationHolder.setAttribute('slot', 'progress-bar')
     this.#progressBar.classList.add('figni-viewer-progress-bar')
     progressBarHolder.classList.add('figni-viewer-progress-bar-holder')
-    loadingAnimationSpinner.classList.add('figni-viewer-loading-animation-spinner')
+    cubes.classList.add('figni-viewer-cubes')
+    loadingAnimation.classList.add('figni-viewer-loading-animation')
+    loadingText.classList.add('figni-viewer-loading-text')
     loadingAnimationHolder.classList.add('figni-viewer-loading-animation-holder')
     this.addEventListener('progress', (e) => {
       const p = e.detail.totalProgress
       this.#progressBar.style.setProperty('--progress-bar-width', `${Math.ceil(p * 100)}%`)
       if (p === 1) {
         loadingAnimationHolder.classList.add('figni-viewer-loading-animation-hide')
-        if (loadingAnimationHolder.style.opacity === 0) {
-          loadingAnimationHolder.style.display = 'none'
-        }
       }
     })
     progressBarHolder.appendChild(this.#progressBar)
-    loadingAnimationHolder.appendChild(loadingAnimationSpinner)
+    loadingAnimation.appendChild(cubes)
+    loadingAnimationHolder.appendChild(loadingAnimation)
     loadingAnimationHolder.appendChild(progressBarHolder)
+    loadingAnimationHolder.appendChild(loadingText)
     this.appendChild(loadingAnimationHolder)
 
     // 値の取得
@@ -588,7 +599,7 @@ class FigniViewerElement extends ModelViewerElement {
             if (panel.dataset.vertical == 'middle') {
               panel.style.maxHeight = `calc(${Number(
                 window.getComputedStyle(this).height.slice(0, -2)
-              )}px - 4rem )`
+              )}px - 5rem )`
             } else {
               panel.style.maxHeight = `calc(${
                 Number(window.getComputedStyle(this).height.slice(0, -2)) / 2

diff --git a/src/style.scss b/src/style.scss
@@ -1,4 +1,4 @@
-@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Spartan:wght@700&display=swap');
 
 :root {
   --figni-viewer-primary: rgb(255, 115, 59);
@@ -14,6 +14,8 @@
   --figni-viewer-link: rgb(59, 94, 255);
   --figni-viewer-button: rgb(59, 94, 255);
   --figni-viewer-button-tp: rgba(59, 94, 255, 0.8);
+  --figni-viewer-contents-font: 'Noto Sans JP', sans-serif;
+  --figni-viewer-ui-font: 'Spartan', 'Noto Sans JP', sans-serif;
 }
 
 figni-viewer {
@@ -22,7 +24,7 @@ figni-viewer {
 }
 
 figni-viewer * {
-  font-family: 'Noto Sans JP', sans-serif;
+  font-family: var(--figni-viewer-contents-font);
   color: var(--figni-viewer-black);
 }
 
@@ -280,8 +282,8 @@ figni-viewer * {
 
 .figni-viewer-ar-button span {
   display: block;
-  line-height: 1.5;
   color: rgb(255, 115, 59);
+  font-family: var(--figni-viewer-ui-font);
 }
 
 .figni-viewer-panel-hide {
@@ -336,14 +338,15 @@ figni-viewer * {
   transform: translate(-50%, -50%);
   z-index: 9999;
   pointer-events: none;
+  transition: opacity 0.3s ease-out;
 }
 
 .figni-viewer-progress-bar-holder {
   display: block;
   max-width: 10rem;
   width: 100%;
   height: 0.5rem;
-  background-color: var(--figni-viewer-gray-100);
+  background-color: var(--figni-viewer-gray-300-tp);
   overflow: hidden;
   border-radius: 0.25rem;
 }
@@ -356,71 +359,108 @@ figni-viewer * {
   transition: all 0.5s cubic-bezier(0, 1, 0.3, 1);
 }
 
-.figni-viewer-loading-animation-spinner {
-  display: block;
-  width: 5rem;
-  height: 5rem;
-  margin-top: 3.5rem;
-  margin-bottom: 3rem;
-  background-color: var(--figni-viewer-gray-300);
-  border-radius: 0.5rem;
-  -webkit-animation: sk-rotateplane 1.5s infinite cubic-bezier(0, 1, 0.3, 1);
-  animation: sk-rotateplane 1.5s infinite cubic-bezier(0, 1, 0.3, 1);
+$w: 40px;
+$h: 46.6px;
+$xspace: $w/2;
+$yspace: $h/4 - 1;
+$speed: 2s;
+$ease: cubic-bezier(0, 1, 0.3, 1);
+
+.figni-viewer-cubes {
+  position: absolute;
 }
 
-@-webkit-keyframes sk-rotateplane {
-  0% {
-    -webkit-transform: perspective(120px);
-  }
+.figni-viewer-loading-animation {
+  position: relative;
+  width: 100px;
+  height: 60px;
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
 
-  50% {
-    -webkit-transform: perspective(120px) rotateY(180deg);
-  }
+.figni-viewer-loading-text {
+  margin-top: 1.5rem;
+  color: var(--figni-viewer-gray-300);
+  font-family: var(--figni-viewer-ui-font);
+  font-size: 0.75rem;
+  animation: loading-text-blinking 2s infinite ease-in-out;
+}
 
-  100% {
-    -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg);
-  }
+@keyframes loading-text-blinking {
+  0% { opacity: 1; }
+  50% { opacity: 0; }
+  100% { opacity: 1; }
 }
 
-@keyframes sk-rotateplane {
-  0% {
-    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg);
-  }
+.figni-viewer-cube {
+  width: $w;
+  height: $h;
+  position: absolute;
+  transition: all ease-out .3s;
+}
 
-  50% {
-    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
-  }
+.figni-viewer-cube-svg {
+  fill: var(--figni-viewer-gray-500);
+}
 
-  100% {
-    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
-  }
+.figni-viewer-cube-window {
+  fill: var(--figni-viewer-gray-50);
 }
 
-.figni-viewer-loading-animation-hide {
-  -webkit-animation: loading-animation-hide 0.5s ease-out;
-  animation: loading-animation-hide 0.5s ease-out;
-  animation-fill-mode: forwards;
+.figni-viewer-cube1 {
+  animation: cube1-animation $speed $ease infinite;
+}
+.figni-viewer-cube2 {
+  animation: cube2-animation $speed $ease infinite;
+}
+.figni-viewer-cube3 {
+  animation: cube3-animation $speed $ease infinite;
+  z-index: 2;
+}
+.figni-viewer-cube4 {
+  animation: cube4-animation $speed $ease infinite;
+}
+.figni-viewer-cube-svg-window {
+  fill: var(--figni-viewer-gray-50);
 }
 
-@-webkit-keyframes loading-animation-hide {
+
+@keyframes cube1-animation {
   0% {
-    opacity: 1;
+    transform: translate(0,0);
+  } 50% {
+    transform: translate($xspace,-$yspace);
+  } 100% {
+    transform: translate($xspace*2,0);
   }
+}
 
-  100% {
-    opacity: 0;
+@keyframes cube2-animation {
+  0%, 50% {
+    transform: translate($xspace*2, 0px);
+  } 100% {
+    transform: translate($xspace*3, $yspace);
   }
 }
 
-@keyframes loading-animation-hide {
+@keyframes cube3-animation {
   0% {
-    opacity: 1;
+    transform: translate($xspace*3, $yspace);
+  } 50% {
+    transform: translate($xspace*2, $yspace*2);
+  } 100% {
+    transform: translate($xspace, $yspace);
   }
+}
 
-  100% {
-    opacity: 0;
+@keyframes cube4-animation {
+  0%, 50% {
+    transform: translate($xspace, $yspace);
+  } 100% {
+    transform: translate(0, 0);
   }
 }
+.figni-viewer-loading-animation-hide {
+  opacity: 0;
+  visibility: hidden !important;
+}