A-frame pause/play 动画混音器

Question

我想知道如何使用 Aframe extras 组件的动画混合器属性来 pause/play 动画。我目前在我的场景中有一个带动画的鸟的 gltf 模型。我想要做的是当点击暂停按钮时，发出一个函数并且动画将暂停，当播放函数被触发时，动画将从 它停止的地方继续 .如何才能做到这一点？当前代码：

    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>

function pause() {
//pause the animation
}

function play() {

//play the animation
}</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:10000000000000000000; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

我在 posted on github 上读到了 donmccurdy 的可能解决方案，但我不确定如何将其添加到我的代码中一种起作用的方式。 Link 到 post：https://github.com/n5ro/aframe-extras/issues/222

Link 到 fiddle 代码：https://jsfiddle.net/AidanYoung/0eufcg52/7/

Answer 1

Don 的解决方案基于更改 timeScale，它用作播放速度的比例因子 (docs)：

// grab the entity reference
const el = document.querySelector("a-entity")
// pause - run at 0 speed
el.setAttribute('animation-mixer', {timeScale: 0});
// play - run at normal speed(1)
el.setAttribute('animation-mixer', {timeScale: 1});

应用于您的代码：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.min.js"></script>
<script>
  function pause() {
    document.querySelector("a-entity").setAttribute('animation-mixer', {
      timeScale: 0
    });
  }

  function play() {
    document.querySelector("a-entity").setAttribute('animation-mixer', {
      timeScale: 1
    });
  }
</script>
<button onclick="pause()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer;">
Pause
</button>
<button onclick="play()" style="z-index: 10000000; position: fixed; margin-top: 0px; cursor: pointer; margin-left: 50px;">
play
</button>
<a-scene>
  <a-entity gltf-model="https://cdn.glitch.global/815f53ca-b7db-40aa-8843-e718abdfbf6d/scene%20-%202022-01-16T183239.246.glb?v=1642386788500" position="20 0 -35" rotation="0 90 0" scale="0.1 0.1 0.1" animation-mixer="clip:Take 001; loop:true; timeScale: 1; crossFadeDuration: 1"></a-entity>
</a-scene>

模型 NORBERTO-3D（CC 归因）

A-frame pause/play 动画混音器

A-frame pause/play animation mixer

three.js

webvr

aframe