動畫剪輯結束后，如何使用Javascript觸發Aframe動畫混合器事件？

Question

我最初使用Don mccurdy的animation-mixer在.fbx模型上播放動畫。 我要實現的目標是，只要當前播放的動畫結束，就會觸發一個事件，該事件將使“再次播放”按鈕可見。 當我單擊此按鈕時，動畫將再次開始播放。

但是事件按鈕在動畫開始播放后立即可見，而不是在事件“動畫結束”觸發時可見。

碼：

<html>
    <head>
        <meta charset="utf-8">
        <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
        <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
        <script src="inflate.min.js"></script>
    </head>
    <body>
        <a-scene>
        <a-sky color="#6EBAA7"></a-sky> 
            <a-entity id="animationPlayer" scale="0.012 0.012 0.012" fbx-model="src: kick.fbx" animation-mixer="clip: *;loop: repeat; repetitions: 2;"></a-entity>
            <a-entity position="0 1.5 3.5"><a-camera></a-camera></a-entity>
            <a-box id="play_again" position="0 3 -1" height=0.5 depth=0.09 visible="false" color="red"></a-box>
            <a-text value="Play again" position="-0.53 3 -0.95"></a-text>
        </a-scene>
        <script>
            document.querySelector("#animationPlayer").addEventListener('animation-finished',function(){
                document.querySelector("#play_again").setAttribute('visible', 'true')
            });
        </script>
    </body>
</html>

預期結果：該按鈕僅在動畫播放完畢后可見。
實際結果：當動畫仍在播放時，該按鈕已經可見。

那么，我在語法上缺少什么還是邏輯上的問題嗎？

Answer 1

我從問題中假設以下內容：單擊該按鈕時該按鈕可見，該模型具有動畫效果，並且該按鈕處於隱藏狀態。 動畫完成后，返回按鈕並重置動畫。

let button = document.querySelector("#play_again");
let player = document.querySelector("#animationPlayer");
button.addEventListener('click',function(){
  //hide the button
  button.setAttribute('visible','false');

  //add the event listener to handle post animation before starting animations 
  (use once to help with cleanup)
  player.addEventListener('animation-finished',function() {
    button.setAttribute('visible','true');
    player.removeAttribute('animation-mixer');
  },{once:true});

  //start the animation by appending the animation-mixer
  player.addAttribute('animation-mixer',{clip: "*",loop: "repeat", repetitions: 2});
});

在開始時從html中刪除animation = -mixer

<a-entity id="animationPlayer" scale="0.012 0.012 0.012" fbx-model="src: kick.fbx"></a-entity>

動畫剪輯結束后，如何使用Javascript觸發Aframe動畫混合器事件？

問題描述

1 個解決方案

解決方案1
0 已采納 2018-12-30 16:22:15

動畫剪輯結束后，如何使用Javascript觸發Aframe動畫混合器事件？

問題描述

1 個解決方案

解決方案1 0 已采納 2018-12-30 16:22:15

解決方案1
0 已采納 2018-12-30 16:22:15