在AFRAME中使用ANIME实现动画遇阻，求解决方案及示例

你的代码有两个核心问题导致动画不生效：

• 目标元素指定错误：你把targets设为字符串'panel'，但应该传入之前获取到的DOM元素变量panel
• 属性路径错误：AFRAME实体的位置基于Three.js的object3D对象，不能直接用CSS的translateX，需要指定Three.js的属性路径，比如object3D.position.x

修复后的基础示例 #

// 确保Anime.js已正确挂载到AFRAME上
const anime = AFRAME.ANIME;
// 获取目标实体
const panel = document.getElementById('bg-panel2');

function anim1() {
  anime({
    targets: panel, // 传入DOM元素变量而非字符串
    'object3D.position.x': 250, // 操作Three.js的位置属性
    direction: 'alternate',
    loop: true,
    easing: 'linear',
    duration: 1000 // 建议添加时长，默认可能过短看不到效果
  });
}

// 页面加载完成后调用动画
document.addEventListener('DOMContentLoaded', () => {
  anim1();
});

按需触发的示例（比如点击按钮） #

如果需要在用户交互时触发动画，可以绑定事件：

<!-- AFRAME场景内添加触发按钮 -->
<a-entity id="trigger-btn" geometry="primitive: box" position="0 1.6 -2" material="color: #2ecc71">
  <a-text value="触发动画" align="center" position="0 0 0.5"></a-text>
</a-entity>

const anime = AFRAME.ANIME;
const panel = document.getElementById('bg-panel2');
const triggerBtn = document.getElementById('trigger-btn');

function anim1() {
  anime({
    targets: panel,
    'object3D.position.x': [0, 250], // 明确起始和结束值
    direction: 'alternate',
    loop: 3, // 可以指定循环次数，设为true则无限循环
    easing: 'easeInOutQuad',
    duration: 1500
  });
}

// 绑定点击事件触发动画
triggerBtn.addEventListener('click', anim1);

其他可操作的属性示例 #

除了位置，还可以操作旋转、缩放等Three.js属性：

// 旋转动画
anime({
  targets: panel,
  'object3D.rotation.y': Math.PI * 2, // 绕Y轴旋转360度
  duration: 2000,
  easing: 'easeInOutSine'
});

// 缩放动画
anime({
  targets: panel,
  'object3D.scale.x': [1, 2, 1],
  'object3D.scale.y': [1, 2, 1],
  duration: 1000,
  loop: true,
  easing: 'easeInOutQuad'
});

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