update

cynack · Jan 14, 2022 · a257fb7 · a257fb7
1 parent cc80f7b
commit a257fb7
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 54 deletions.
diff --git a/index.html b/index.html
@@ -27,8 +27,9 @@
           closeup
           anime
           clip="Action"
-          length="1200"
-          loop
+          loopCount="Infinity"
+          onstart="console.log('start')"
+          onend="console.log('end')"
         >
           <div slot="panel" place="left middle">
             <img
@@ -37,7 +38,6 @@
             <p>
               様々なインテリアに合わせることができるシンプルかつモダンなデザインです。
             </p>
-            <strong>anooosaojasdgjg推あgぢうdg</strong>
             <a href="cynack.com">詳細はこちら</a>
           </div>
         </button>
@@ -56,7 +56,7 @@
               広い可動域を有しているため、デスク以外にもベッドやソファーの脇に置いて使用することもできます。aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaｈｄしｈｙｓだｙさｄふやｓぴどｙなすｃｈんぢおｓじゅｄこいｐすｄｆにぽえすｆｃぽいうｓんｃふぃおｐｃ９うｄｓぽｆｃ
             </p>
             <button
-              onclick="view.playAnimation('Action', 2400, 'aa', () => view.toggleVisibleHotspot(false), () => view.toggleVisibleHotspot(true))"
+              onclick="view.playAnimation('Action', 2, 'aa', () => view.toggleVisibleHotspot(false), () => view.toggleVisibleHotspot(true))"
             >
               可動域を確認する
             </button>
@@ -68,23 +68,9 @@
       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;
-        /* --figni-viewer-primary: rgb(22, 152, 217);
-        --figni-viewer-primary-tp: rgba(22, 152, 217, 0.3);
-        --figni-viewer-secondary: rgb(255, 71, 51);
-        --figni-viewer-secondary-tp: rgba(255, 221, 51, 0.3);
-        --figni-viewer-button: rgb(22, 152, 217);
-        --figni-viewer-button-tp: rgba(22, 152, 217, 0.8);
-        --figni-viewer-gray-50: rgb(246, 246, 246);
-        --figni-viewer-gray-100: rgb(230, 230, 230);
-        --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
@@ -541,13 +541,12 @@ class FigniViewerElement extends ModelViewerElement {
       hotspot.removeEventListener('click', this.#events[`${name}-anime`])
       const e = () => {
         if (window.getComputedStyle(hotspot).opacity == 1) {
-          const clip = hotspot.getAttribute('clip')
-          const loop = hotspot.getAttribute('loop') == ''
-          const lenth = Number(hotspot.getAttribute('length')) || 0
+          const clip = hotspot.getAttribute('clip') || null
+          const loopCount = Number(hotspot.getAttribute('loopCount')) || 1
           const toState = hotspot.getAttribute('to-state')
           const onstart = hotspot.getAttribute('onstart')
           const onend = hotspot.getAttribute('onend')
-          this.playAnimation(clip, loop, lenth, toState, onstart, onend)
+          this.playAnimation(clip, loopCount, toState, onstart, onend)
         }
       }
       hotspot.addEventListener('click', e)
@@ -714,56 +713,63 @@ class FigniViewerElement extends ModelViewerElement {
   }
 
   async playAnimation(
-    clip,
-    loop = false,
-    length = 0,
-    toState = '',
-    onstart,
-    onend
+    clip = null,
+    loopCount = 1,
+    toState = null,
+    onstart = null,
+    onend = null
   ) {
+    /**
+     * アニメーションが止まっている、またはループ再生している場合のみ再生する
+     * clip が null の場合、3Dモデルに含まれる最初のアニメーションを再生する
+     * length が Infinity の場合、ループ再生する
+     * toState が設定されている場合、アニメーションが終了したときに指定した状態にする
+     * ループ再生されている場合は、アニメーションを再生したときに指定した状態にする
+     * onstart が設定されている場合、アニメーションが再生されたときに指定した関数を実行する
+     * onend が設定されている場合、アニメーションが終了したときに指定した関数を実行する
+     * ループ再生されている場合は、onend は実行されない
+     */
+    if (!clip) {
+      if (this.availableAnimations.length > 0) {
+        clip = this.availableAnimations[0]
+      }
+    }
+    if (clip == null) {
+      throw new ReferenceError(`${clip} should be specified`)
+    }
     if (!this.availableAnimations.includes(clip)) {
       throw new ReferenceError(`${clip} is not available`)
     }
-    if (this.loop || this.paused) {
+    if (this.paused || this.loop) {
       this.animationName = clip
       this.currentTime = 0
-      this.play()
+      await this.updateComplete
       if (onstart) {
         if (typeof onstart === 'function') {
           onstart()
         } else {
           Function(onstart)()
         }
       }
-      await this.updateComplete
-      if (!loop) {
-        if (length == 0) {
-          length = this.duration * 1000
-        }
-        this.loop = false
-        this.#nextState = toState
-        if (this.#nextState) {
-          this.updateState(`temp-${this.#seed}`)
-        }
-        setTimeout(() => {
-          this.pause()
-          if (onend) {
-            if (typeof onend === 'function') {
-              onend()
-            } else {
-              Function(onend)()
-            }
-          }
-          if (toState) {
-            this.updateState(toState)
+      this.play({ repetitions: loopCount })
+      this.loop = loopCount === Infinity
+      const onFinishFunc = () => {
+        if (onend && !this.loop) {
+          if (typeof onend === 'function') {
+            onend()
+          } else {
+            Function(onend)()
           }
-        }, length)
-      } else {
-        this.loop = true
+        }
         if (toState) {
           this.updateState(toState)
         }
       }
+      if (!this.loop) {
+        this.addEventListener('finished', onFinishFunc, { once: true })
+      } else {
+        onFinishFunc()
+      }
     }
   }