设置带有框架的加载动画 [英] set a loading animation with a-frame
问题描述
我正在使用a框架加载下面的示例代码的全景照片。加载照片时,它会显示白色屏幕,并且持续几秒钟,这会带来糟糕的用户体验。我想在加载照片时添加加载动画,但是找不到任何有用的指南。有人可以帮忙吗?
I am using a-frame to load panorama photo with the sample code below. It shows a white screen while the photo is being loaded, and it lasts a few seconds, which create a bad user experience. I want to add a loading animation while the photo is being loaded, but cannot find any useful guides. Could anyone help?
<a-scene>
<a-assets>
<img id="sky" src="sky.png">
</a-assets>
<a-sky src="#sky"></a-sky>
</a-scene>
推荐答案
我认为aframe 8将具有内置的加载屏幕。同时,这是我目前如何处理从Ottifox导出的镜框场景的方法:
I think aframe 8 will have a built in loading screen. In the meantime here's how I currently tackle it for aframe scenes exported from Ottifox:
首先在 a场景
之前标记,然后在正文开始后进行以下标记:
First before the a-scene
tag and after the start of the body I have this markup:
<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中
Finally in 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
You can view source on the example here, to see it all together: http://ottifox.com/examples/space/index.html
这篇关于设置带有框架的加载动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!