Как установить Fade in или Fade out на <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>

Источник

2 ответа

Решение

Я бы не использовал CSS, как показано в ответе выше. A-Frame обычно не использует CSS, но использует собственные компоненты и свойства отображения.

Вы можете исчезнуть, оживив material.opacity из <a-sky> примитивный. Это можно сделать с помощью ядра 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>

Затем в вашем пользовательском компоненте вы бы startEvents для каждой анимации с использованием emit (например, sky.emit('fadein')).

Я раздвоил твой код и сделал несколько изменений:

  • Обновленная версия A-Frame до официального выпуска
  • Загруженные изображения неба в CDN, чтобы избежать проблем с CORS
  • Определенные выше изображения как активы для лучшей загрузки
  • Установите изображение по умолчанию для <a-sky>
  • Добавил aframe-animation-component
  • Преобразованные функции ES6, такие как const и стрелка функции для var а также function соответственно для лучшей совместимости (чтобы исключить плохое поведение)
  • Используемый setTimeout в вашем обычае set-sky Компонент времени анимации. Хотя вместо этого вы можете зависеть от событий, которые могут усложняться несколькими слушателями. Я просто хотел дать вам элементарный пример.

Вот модифицированная демоверсия: https://codepen.io/dansinni/pen/gzbpWy

На самом деле, прямо на сайте A-Frame есть пример, который делает в значительной степени то, что вы хотите сделать: https://aframe.io/examples/showcase/360-image-gallery/

Источник

Попробуйте добавить это:

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;}
  }
Источник
Другие вопросы по тегам