动画剪辑结束后，如何使用Javascript触发Aframe动画混合器事件？

Question

I'm initially playing an animation on a .fbx model using don mccurdy's animation-mixer. 我最初使用Don mccurdy的animation-mixer在.fbx模型上播放动画。 What I am trying to achieve is that whenever the animation currently playing has finished, an event is fired which will enable a 'Play again' button to be visible. 我要实现的目标是，只要当前播放的动画结束，就会触发一个事件，该事件将使“再次播放”按钮可见。 And when I click this button, the animation starts playing again. 当我单击此按钮时，动画将再次开始播放。

But the event button is visible as soon as the animation starts playing and not when the event 'animation-finished' has fired. 但是事件按钮在动画开始播放后立即可见，而不是在事件“动画结束”触发时可见。

Code: 码：

<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>

Expected result: The button is visible only when the animation has finished playing. 预期结果：该按钮仅在动画播放完毕后可见。
Actual result: The button is already visible when the animation is still in play. 实际结果：当动画仍在播放时，该按钮已经可见。

So, am I missing something syntactically or is there a logical problem? 那么，我在语法上缺少什么还是逻辑上的问题吗？

Answer 1

I am assuming the following from the question The button is visible and the model is animated and the button is hidden when the button is clicked. 我从问题中假设以下内容：单击该按钮时该按钮可见，该模型具有动画效果，并且该按钮处于隐藏状态。 when the animation is complete, the button is returned and the animation is reset. 动画完成后，返回按钮并重置动画。

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});
});

Remove the animation=-mixer from the html in start 在开始时从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