[英]How to set Fade in or Fade out on <a-sky>
是否可以在框架中添加淡入或淡出动画?
当用户将光标悬停在球上时,如何添加动画?
在此示例中,当您将鼠标悬停时,背景将更改,但没有动画。
AFRAME.registerComponent('set-sky', { schema: { default: '' }, init() { const sky = document.querySelector('a-sky'); this.el.addEventListener('click', () => { sky.setAttribute('src', this.data); }); } });
<script src="https://rawgit.com/aframevr/aframe/b813db0614ac2b518e547105e810b5b6eccfe1c8/dist/aframe.min.js"></script> <a-scene> <a-camera position="0 2 4"> <a-cursor color="#4CC3D9" fuse="true" timeout="10"></a-cursor> </a-camera> <a-sphere color="#F44336" radius="1" position="-4 2 0" set-sky="https://c3.staticflickr.com/2/1475/26239222850_cabde81c39_k.jpg"></a-sphere> <a-sphere color="#FFEB3B" radius="1" position="4 2 0" set-sky="https://c2.staticflickr.com/2/1688/25044226823_53c979f8a1_k.jpg"></a-sphere> <a-sky></a-sky> </a-scene>
尝试添加以下内容:
HTML:
sky.setAttribute("style", "-webkit-animation:opac 6s linear forwards";
sky.setAttribute("style", "animation:opac 6s linear forwards";
CSS:
@-webkit-keyframes opac {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes opac {
0% {opacity: 0;}
100% {opacity: 1;}
}
我不会使用上面答案中所示的CSS。 A-Frame通常不使用CSS,而是依靠其自己的显示组件和属性。
您可以通过设置<a-sky>
原语的material.opacity
动画来淡化。 这可以通过使用A-Frame核心<a-animation>
或aframe-animation-component
,这似乎已成为标准。
如果使用我推荐的aframe-animation-component
,则可以这样设置<a-sky>
:
<a-sky src="#sky-1"
animation__fadein="startEvents: fadein; property: material.opacity; from: 0; to: 1; dur: 1000;"
animation__fadeout="startEvents: fadeout; property: material.opacity; from: 1; to: 0; dur: 1000;"></a-sky>
然后,在您的自定义组件中,您将使用emit
(例如, sky.emit('fadein')
)为每个动画触发startEvents
。
我分叉了您的代码并进行了一些更改:
<a-sky>
设置默认图像 aframe-animation-component
const
和arrow函数)分别转换为var
和function
,以实现更好的兼容性(排除任何异常行为) set-sky
组件中使用setTimeout
set-sky
动画时间。 虽然,您可能想依赖于事件,但使用多个侦听器会使事件变得更加复杂。 我只是想给你一个简单的例子。 这是修改后的演示: https : //codepen.io/dansinni/pen/gzbpWy
实际上,在A-Frame网站上也有一个示例,它可以完成您想要做的事情: https : //aframe.io/examples/showcase/360-image-gallery/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.