如何同时触发.glb模型的animation mixer动画与A-frame属性动画？

你遇到的问题核心是属性动画和模型骨骼动画的启动时机/作用域冲突，不需要把所有动画烘焙到一起，试试下面两种方法：

方法1：统一动画触发时机，直接调用mixer API播放模型动画 #

首先调整实体代码，移除属性动画的延迟，同时提前初始化animation-mixer但不自动播放：

<a-entity
      gltf-model="#peacock-glb"
      position="5 0.17 -5"
      scale="0.01 0.01 0.01"
      id="peacock-entity"
      animation-mixer="clip: none"
      animation__position="property: position; to: 0.2 0.6 4.5; dur: 4500; startEvents: walk-in"
      animation__scale="property: scale; to: 0.05 0.05 0.05; dur: 4500; startEvents: walk-in">
</a-entity>

然后修改触发动画的JS代码，避免直接重置animation-mixer属性，而是通过组件API启动模型动画：

const peacock = this.el.querySelector('#peacock-entity');
// 触发属性动画
peacock.emit('walk-in', null, false);
// 获取mixer组件并播放Walking动画
const mixerComp = peacock.components['animation-mixer'];
if (mixerComp && mixerComp.mixer) {
  mixerComp.mixer.clipAction('Walking').play();
}

这样做的原因是：提前初始化mixer组件可以避免加载延迟导致的动画不同步；直接调用API播放动画不会干扰组件原有配置，能保证和属性动画同时启动。

方法2：分离模型与容器，避免动画作用域冲突 #

如果模型的Walking动画本身包含了位置/缩放变换（导致和实体属性动画冲突），可以把模型放到子实体中，让父实体负责位置、缩放动画，子实体只播放骨骼动画：

调整实体结构：

<a-entity
      position="5 0.17 -5"
      scale="0.01 0.01 0.01"
      id="peacock-container"
      animation__position="property: position; to: 0.2 0.6 4.5; dur: 4500; startEvents: walk-in"
      animation__scale="property: scale; to: 0.05 0.05 0.05; dur: 4500; startEvents: walk-in">
  <a-entity gltf-model="#peacock-glb" animation-mixer="clip: none"></a-entity>
</a-entity>

对应的JS触发代码：

const container = this.el.querySelector('#peacock-container');
container.emit('walk-in', null, false);
const peacockModel = container.querySelector('[gltf-model]');
const mixerComp = peacockModel.components['animation-mixer'];
if (mixerComp && mixerComp.mixer) {
  mixerComp.mixer.clipAction('Walking').play();
}

这种方式让两类动画的作用域完全独立，父实体的变换动画不会影响模型自身的骨骼动画，从根源上避免了覆盖问题。

内容的提问来源于stack exchange，提问作者snail