如何通过animationend函数启动A-Frame动画并实现模型循环显隐？

嘿，我来帮你一步步搞定这两个问题，毕竟刚接触A-Frame、HTML和JS，确实需要更直白的指导😉

首先咱们得明确思路：通过JavaScript定时切换三个模型的visible属性，从第一个显示→隐藏、第二个显示→隐藏、第三个显示→隐藏，然后回到第一个重复这个流程。

下面是完整的可运行代码，我会加详细注释，你直接替换自己的Collada文件路径就行：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入你提供的脚本 -->
  <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
  <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- 第一个模型：初始显示 -->
    <a-entity id="model1" collada-model="#model1-path" visible="true" position="0 1.6 -5"></a-entity>
    <!-- 第二个模型：初始隐藏 -->
    <a-entity id="model2" collada-model="#model2-path" visible="false" position="0 1.6 -5"></a-entity>
    <!-- 第三个模型：初始隐藏 -->
    <a-entity id="model3" collada-model="#model3-path" visible="false" position="0 1.6 -5"></a-entity>

    <!-- 定义Collada文件路径（替换成你自己的文件地址） -->
    <a-assets>
      <a-asset-item id="model1-path" src="你的第一个模型.dae"></a-asset-item>
      <a-asset-item id="model2-path" src="你的第二个模型.dae"></a-asset-item>
      <a-asset-item id="model3-path" src="你的第三个模型.dae"></a-asset-item>
    </a-assets>
  </a-scene>

  <script>
    // 获取三个模型元素
    const model1 = document.querySelector('#model1');
    const model2 = document.querySelector('#model2');
    const model3 = document.querySelector('#model3');
    // 每个模型显示的时长（毫秒，可自己调整）
    const displayDuration = 2000;

    // 定义循环切换函数
    function cycleModels() {
      // 第一步：显示model1，隐藏其他
      model1.setAttribute('visible', true);
      model2.setAttribute('visible', false);
      model3.setAttribute('visible', false);

      // 等待displayDuration后，切换到model2
      setTimeout(() => {
        model1.setAttribute('visible', false);
        model2.setAttribute('visible', true);
        model3.setAttribute('visible', false);

        // 再等待displayDuration后，切换到model3
        setTimeout(() => {
          model1.setAttribute('visible', false);
          model2.setAttribute('visible', false);
          model3.setAttribute('visible', true);

          // 再等待displayDuration后，重新调用cycleModels，实现循环
          setTimeout(cycleModels, displayDuration);
        }, displayDuration);
      }, displayDuration);
    }

    // 页面加载完成后启动循环
    window.addEventListener('load', cycleModels);
  </script>
</body>
</html>

注意哦：你需要把代码里的你的第一个模型.dae这类路径换成自己的Collada文件地址，displayDuration可以调整每个模型显示的时长（比如2000就是2秒）。

A-Frame的动画组件本身支持暂停/播放，咱们可以先把动画设为暂停状态，然后监听某个元素的animationend事件（比如某个过渡动画结束后），再启动目标动画。

下面结合前面的模型循环举个例子：比如当model1隐藏的动画结束后，启动model2的显示动画（这里用A-Frame的animation组件做淡入淡出，比直接改visible更平滑）：

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/0.7.1/aframe.min.js"></script>
  <script src="https://rawgit.com/donmccurdy/aframe-extras/master/dist/aframe-extras.loaders.min.js"></script>
</head>
<body>
  <a-scene>
    <!-- model1：添加淡出动画，初始播放，暂停状态 -->
    <a-entity id="model1" collada-model="#model1-path" 
              visible="true" position="0 1.6 -5"
              animation="property: opacity; from: 1; to: 0; dur: 500; paused: true; id: fadeOut1">
    </a-entity>
    <!-- model2：添加淡入动画，初始隐藏，暂停状态 -->
    <a-entity id="model2" collada-model="#model2-path" 
              visible="false" opacity="0" position="0 1.6 -5"
              animation="property: opacity; from: 0; to: 1; dur: 500; paused: true; id: fadeIn2">
    </a-entity>
    <!-- model3：同理 -->
    <a-entity id="model3" collada-model="#model3-path" 
              visible="false" opacity="0" position="0 1.6 -5"
              animation="property: opacity; from: 0; to: 1; dur: 500; paused: true; id: fadeIn3">
    </a-entity>

    <a-assets>
      <a-asset-item id="model1-path" src="你的第一个模型.dae"></a-asset-item>
      <a-asset-item id="model2-path" src="你的第二个模型.dae"></a-asset-item>
      <a-asset-item id="model3-path" src="你的第三个模型.dae"></a-asset-item>
    </a-assets>
  </a-scene>

  <script>
    const model1 = document.querySelector('#model1');
    const model2 = document.querySelector('#model2');
    const model3 = document.querySelector('#model3');
    const displayDuration = 2000;

    // 监听model1的淡出动画结束事件
    model1.addEventListener('animationend', (e) => {
      // 确保是fadeOut1动画结束
      if (e.detail.name === 'fadeOut1') {
        // 隐藏model1，启动model2的淡入动画
        model1.setAttribute('visible', false);
        model2.setAttribute('visible', true);
        model2.components.animation.play();
      }
    });

    // 监听model2的淡入动画结束，后续同理...
    model2.addEventListener('animationend', (e) => {
      if (e.detail.name === 'fadeIn2') {
        // 等待displayDuration后，启动model3的淡入
        setTimeout(() => {
          model2.setAttribute('visible', false);
          model3.setAttribute('visible', true);
          model3.components.animation.play();
        }, displayDuration);
      }
    });

    // 页面加载后，先显示model1，等待一段时间后启动它的淡出动画
    window.addEventListener('load', () => {
      setTimeout(() => {
        model1.components.animation.play();
      }, displayDuration);
    });
  </script>
</body>
</html>

核心逻辑是：

1. 给元素添加A-Frame动画组件，设置paused: true让它初始不播放
2. 用addEventListener('animationend', ...)监听动画结束事件
3. 在回调函数里判断是哪个动画结束（通过e.detail.name），然后启动目标动画或切换模型

如果你不需要淡入淡出，只是想在某个动画结束后切换模型的显隐，逻辑是一样的——只要监听对应元素的animationend事件，然后在回调里修改模型的visible属性就行。

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