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

Question

Is possible to add fade in or fade out animations on a sky in aframe?

How can I add animations when the user hovers their cursor over the ball?

In this example when you hover your mouse, the background will change but w/o animations.

 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> 

Answer 1

try to add this:

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;}
  }

Answer 2

I wouldn't use CSS as demonstrated in the answer above. A-Frame generally doesn't use CSS, but relies on its own display components and properties.

You can fade by animating the material.opacity of the <a-sky> primitive. This can be done either by using the A-Frame core <a-animation> , or the aframe-animation-component , which seems to be becoming the standard.

If you use the aframe-animation-component , which I recommend, you could set up your <a-sky> like this:

 <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>

Then within your custom component, you would trigger the startEvents for each animation using emit (eg, sky.emit('fadein') ).

I forked your code and made a few changes:

• Updated A-Frame version to the official release
• Uploaded sky images to a CDN to avoid CORS issues
• Defined aforementioned images as assets for better loading
• Set a default image for <a-sky>
• Added the aframe-animation-component
• Converted ES6 features such as const and arrow functions to var and function , respectively, for better compatibility (to rule out any misbehaving)
• Used setTimeout in your custom set-sky component to time the animations. Although, you may want to depend on events instead, which can get more complicated with multiple listeners. I just wanted to give you a rudimentary example.

Here is the modified demo: https://codepen.io/dansinni/pen/gzbpWy

There's actually also an example right on the A-Frame site that does pretty much what you're looking to do: https://aframe.io/examples/showcase/360-image-gallery/