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

Question

是否可以在框架中添加淡入或淡出動畫？

當用戶將光標懸停在球上時，如何添加動畫？

在此示例中，當您將鼠標懸停時，背景將更改，但沒有動畫。

 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

嘗試添加以下內容：

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

我不會使用上面答案中所示的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函數）分別轉換為var和function ，以實現更好的兼容性（排除任何異常行為）
• 在自定義set-sky組件中使用setTimeout set-sky動畫時間。 雖然，您可能想依賴於事件，但使用多個偵聽器會使事件變得更加復雜。 我只是想給你一個簡單的例子。

這是修改后的演示： https : //codepen.io/dansinni/pen/gzbpWy

實際上，在A-Frame網站上也有一個示例，它可以完成您想要做的事情： https : //aframe.io/examples/showcase/360-image-gallery/