使用 a-frame 设置加载动画答案

【问题标题】：set a loading animation with a-frame使用 a-frame 设置加载动画
【发布时间】：2017-12-31 04:35:44
【问题描述】：

我正在使用 a-frame 加载带有以下示例代码的全景照片。在加载照片时它会显示白屏，并且会持续几秒钟，这会造成糟糕的用户体验。我想在加载照片时添加加载动画，但找不到任何有用的指南。有人可以帮忙吗？

<a-scene>
  <a-assets>
    <img id="sky" src="sky.png">
  </a-assets>
  <a-sky src="#sky"></a-sky>
</a-scene>

【问题讨论】：

标签： aframe

【解决方案1】：

我认为 aframe 8 会有一个内置的加载屏幕。同时，这是我目前为从 Ottifox 导出的帧场景处理它的方法：

首先在a-scene 标签之前和正文开始之后我有这个标记：

<div id="splash">
  <div class="loading"></div>
</div>

然后在一个css文件中：

#splash {
  position: absolute;

  display: flex;
  align-items: center;
  justify-content: center;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  width: 200px;
  height: 200px;

  margin: auto;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0.25rem solid rgba(255, 255, 255, 0.2);
  border-top-color: white;
  animation: spin 1s infinite linear;
}

终于在 main.js 中

document.addEventListener('DOMContentLoaded', function() {
    var scene = document.querySelector('a-scene');
    var splash = document.querySelector('#splash');
    scene.addEventListener('loaded', function (e) {
        splash.style.display = 'none';
    });
});

您可以在此处查看示例的源代码，以便一起查看： http://ottifox.com/examples/space/index.html

【讨论】：

很高兴听到！欢迎。
这个例子很棒。你有百分比数字上升的版本吗？

【解决方案2】：

我可以为您指明正确的方向。通常来说，一般来说;首先创建要在所有内容加载时显示的内容；然后在它加载后隐藏它，或者做任何你想做的事情。

例如创建一个具有大 z-index 的全屏 div，例如它可以显示一些加载器动画。然后使用 javascript - 普通方式或 A-Frame 推荐方式（为其构建组件） - 隐藏 div。

window.onload = function() {
  /* hide loading div */
}

window.onload 事件在整个页面加载后触发，包括图片 - 这正是您所需要的。

【讨论】：

我用这个选项测试过，但结果不稳定。 onload 功能有时未激活。
你能举个例子吗？
@Hank 它似乎比收听loaded 事件更好。查看日志：window.onload here 和 a-frame 的 loaded 事件 here，我使用了 10k x 3k 的图像，因此它可以加载一秒