如何解决A-Frame实体单次触发动画中断、消失问题，完成完整滚转？

问题根源是你重复使用了相同的动画组件标识（animation__xyr和animation），A-Frame中同一组件的多个实例必须使用唯一后缀，后定义的同名实例会直接覆盖前一个，这就导致后面两个动画根本没被加载，甚至因属性冲突引发实体消失。

给你两种可行的解决方案：

方案1：修复ID冲突+链式触发动画 #

给每个动画分配唯一后缀ID，通过animationend事件让动画依次衔接，单次点击启动第一个后，后续自动执行：

<a-mixin id="spin"
    animation__rot1="property:rotation;from:0 0;to:-180 90;dur:900;dir:normal;loop:0;easing:linear;startEvents:br;endEvents:rot1Done"
    animation__pos1="property:position.x;from:0;to:5;dur:900;dir:normal;loop:0;easing:linear;startEvents:rot1Done;endEvents:pos1Done"
    animation__rot2="property:rotation;from:-180 90;to:-360 0;dur:900;dir:normal;loop:0;easing:linear;startEvents:pos1Done;endEvents:rot2Done"
    animation__pos2="property:position.x;from:5;to:10;dur:900;dir:normal;loop:0;easing:linear;startEvents:rot2Done"
></a-mixin>

触发点击的实体绑定事件示例：

<a-plane mixin="spin" cursor-listener></a-plane>
<script>
  // 手动触发br事件（如果用cursor点击可省略，cursor-listener会自动处理）
  document.querySelector('a-plane').addEventListener('click', function() {
    this.emit('br');
  });
</script>

这里把loop设为0（无需循环），每个动画结束时触发自定义事件，下一个动画监听该事件启动，确保四个动画按顺序完整执行。

方案2：使用关键帧动画（更简洁） #

利用A-Frameanimation组件的keyframes属性，将旋转与位置变化整合为单个动画，一次性完成所有动作：

<a-mixin id="spin"
    animation__full="property: rotation, position.x;
                     keyframes: 0 0, 0;
                                -180 90, 5;
                                -360 0, 10;
                     dur: 3600;
                     easing: linear;
                     startEvents: br;
                     loop: 0"
></a-mixin>

参数说明：

• property指定同时动画的两个属性：rotation和position.x
• keyframes按时间节点定义状态：
  • 起始：旋转0 0，X轴位置0
  • 中间点（总时长的一半，1800ms时）：旋转-180 90，X轴位置5
  • 结束：旋转-360 0，X轴位置10
• 总时长设为4段900ms的总和3600ms，匀速完成横滚+移动，完美匹配你需要的Y轴先转90度再转回0的逻辑。

这种方式避免了多动画冲突，逻辑更清晰，维护也更简单。

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