CODEWITHSUNDEEP
javascripthtmlaframevirtual-reality
AdityaDees
AdityaDees

Reputation: 1047

How to set Fade in or Fade out on <a-sky>

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>

Upvotes: 0

Views: 1813

Answers (2)

Dan S.
Dan S.

Reputation: 331

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 (e.g., 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/

Upvotes: 1

Helpme
Helpme

Reputation: 133

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

Upvotes: 0

Related Questions