溜溜球在動畫效果重複時是不確定的，並使用A型架

Question

我會讓我的A-框架的Web應用程序內的一些不確定的動畫方向交替不起作用。我的動畫必須發揮無限，並且必須有悠悠球的效果。在3000毫秒內形成0.25-0.75的不透明度。爲此，我用下面的代碼：

let box = document.createElement('a-box'); 
 
box.setAttribute('src', '#outer'); 
 
box.setAttribute('position', '0 0 -5'); 
 
box.setAttribute('color', 'red'); 
 

 
let anim = document.createElement('a-animation'); 
 
anim.setAttribute('attribute', 'opacity'); 
 
anim.setAttribute('from', '0.25'); 
 
anim.setAttribute('to', '0.75'); 
 
anim.setAttribute('fill', 'both'); 
 
anim.setAttribute('repeat', 'indefinite'); 
 
anim.setAttribute('dur', '3000'); 
 
anim.setAttribute('direction', 'alternate'); 
 
box.appendChild(anim); 
 

 
document.getElementsByTagName('a-scene')[0].appendChild(box);

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
 

 
<a-scene></a-scene>

就像你可以看到這是行不通的。它在3000毫秒內從0.25變爲0.75，並立即回到0.25再次重複。在documentation of A-frame站在這樣的：

當我們定義了一個交替方向，動畫會來回走了from和to值之間就像一個溜溜球。當我們重複動畫時，交替方向纔會生效。

如果我使用一個號碼（例如數x）而不是無限期的，溜溜球效應的偉大工程，但是當它的x -times反覆停止。

我該如何解決這個問題？

Answer 1

我認爲這是通過拋出了填充屬性

anim.setAttribute('fill', 'both'); 

它應該處理時，其不打，我猜動畫時重播是不確定的，其播放所有的時間，要麼tween.js固定或three.js不喜歡它。基於您的代碼

工作演示： https://codepen.io/gftruj/pen/qjdZmw

我試圖將其設置爲「無」或什麼，但我只得到它工作時拋出。