繁体   English   中英

如何设置淡入或淡出<a-sky>

[英]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-Frame版本更新为正式版本
  • 将天空图像上传到CDN以避免CORS问题
  • 将上述图像定义为资产以更好地加载
  • <a-sky>设置默认图像
  • 添加了aframe-animation-component
  • 将ES6功能(例如const和arrow函数)分别转换为varfunction ,以实现更好的兼容性(排除任何异常行为)
  • 在自定义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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM