A-Frame中按钮触发动画时_target失效，仅作用于自身的修复方法

问题核心：A-Frame原生animation组件默认仅作用于挂载它的元素本身，你设置的_target参数并非原生组件的有效属性，所以无论加不加都不会改变动画作用对象。

下面是两种可行的解决方式：

方法一：将动画定义在目标元素上，通过按钮触发事件启动 #

把动画逻辑直接写在目标元素#anim上，给动画指定一个自定义启动事件，然后通过按钮点击触发这个事件。

目标元素代码： #

<!-- 假设#anim是你要动的实体 -->
<a-entity id="anim" position="-10 4 -10">
  <!-- 这里放目标元素的内容，比如一个盒子 -->
  <a-box color="#4CC3D9"></a-box>
  <!-- 定义动画，设置自定义启动事件customAnimStart -->
  <animation 
    __AlteraSlow
    startEvents="customAnimStart"
    property="position"
    from="-10 4 -10"
    to="12 4 -10"
    dur="5000"
    loop="true"
    dir="alternate"
    easing="linear">
  </animation>
</a-entity>

按钮元素代码： #

用event-set组件在点击时向目标元素发送启动事件：

<a-box color="#FFFDB6" position="-2 2 -7"
       event-set__mouseenter="material.color: #FFFF14"
       event-set__mouseleave="material.color: #FFFDB6"
       event-set__click="_event: customAnimStart; _target: #anim">
</a-box>

也可以用原生JS触发事件，更灵活：

<a-box color="#FFFDB6" position="-2 2 -7"
       event-set__mouseenter="material.color: #FFFF14"
       event-set__mouseleave="material.color: #FFFDB6"
       onclick="document.querySelector('#anim').emit('customAnimStart')">
</a-box>

方法二：动态给目标元素添加动画（适合需要动态控制的场景） #

如果需要在点击按钮时才创建动画，可以通过JS在点击事件中给#anim添加动画组件：

<a-box color="#FFFDB6" position="-2 2 -7"
       event-set__mouseenter="material.color: #FFFF14"
       event-set__mouseleave="material.color: #FFFDB6"
       onclick="addAnimToTarget()">
</a-box>

<script>
function addAnimToTarget() {
  const target = document.querySelector('#anim');
  // 先移除已有的同名动画（避免重复添加）
  target.removeAttribute('animation__AlteraSlow');
  // 添加新动画
  target.setAttribute('animation__AlteraSlow', {
    property: 'position',
    from: '-10 4 -10',
    to: '12 4 -10',
    dur: 5000,
    loop: true,
    dir: 'alternate',
    easing: 'linear'
  });
}
</script>

注意：如果目标元素已经有动画，点击按钮前最好先移除旧动画，避免多个动画冲突。

内容的提问来源于stack exchange，提问作者Question me this