A 帧暂停/播放动画混合器

Question

我想知道如何使用 Aframe 额外组件的动画混合器属性来暂停/播放动画。我目前在我的场景中有一个带有动画的鸟的 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>

我读到了donmccurdy在github上发布的一个可能的解决方案，但我不确定如何以一种有效的方式将其放入我的代码中。帖子链接：https://github.com/n5ro/aframe-extras/issues/222

摆弄代码的链接：https://jsfiddle.net/AidanYoung/0eufcg52/7/

Answer 1

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

// 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归属)