Merge pull request #56 from cynack/update_play_animation

feat: アニメーションの正確な一回再生の追加

CHANGELOG.md

@@ -25,14 +25,23 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ### Added
 
+- 属性`loopCount`を追加
+
 ### Changed
 
+- `playAnimation`メソッドの引数を(`clip`, `loop`, `length`, `toState`, `onstart`, `onend`)から(`clip`, `loopCount`, `toState`, `onstart`, `onend`)に変更
+- 属性`anime`および`clip`の挙動を変更
+
 ### Deprecated
 
 ### Removed
 
+- 属性`loop`を削除
+
 ### Fixed
 
+- 消えた*hotspot*にクリック判定が残っていた問題を修正
+
 ## [0.0.33] - 2021-12-28
 
 ### Added

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;

package.json

@@ -54,7 +54,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@google/model-viewer": "^1.9.2",
+    "@google/model-viewer": "^1.10.0",
     "axios": "^0.24.0"
   }
 }

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()
+      }
     }
   }
 

src/style.scss

@@ -68,6 +68,7 @@ figni-viewer * {
 
 .figni-viewer-hotspot-hide {
   opacity: var(--min-hotspot-opacity);
+  pointer-events: none;
 }
 
 .figni-viewer-panel {