嘲笑K幀（VR）中的CSS關鍵幀動畫

Question

我想要使用K-Frame一個接一個地運行一個實體（例如：a-circle）的單個屬性（例如：比例）創建動畫。這可能嗎？

例如，這將是一個簡單的例子：

<a-scene> 
    <a-circle 
    position="0 1.25 -5" 
    color="#F55" 
    radius="1" 
    scale=".1 .1 1" 
    animation__scale="property: scale; dir: normal; dur: 500; easing: easeInSine; loop: true; to: 1 1 1" 
    > 
    </a-circle> 
</a-scene> 

我想，說，從規模1.1.1 1到0.5 0.5 1的第500毫秒，然後停留在0.5處.5 1另一個500ms，並在接下來的200ms內回到.1 .1 1，然後無限循環遍歷整個過程。

這甚至可能嗎？

Answer 1

您可以菊花鏈組件中的動畫，檢查哪個動畫結束並開始下一個動畫。
在你的情況下，這將是

animation1結束 - >等待500ms，並開始animation2 - > animation2結束 - >等待200毫秒，並啓動animation1。

---

您可以通過簡單地偵聽 animation__[ID]-complete事件併發出另一個事件來實現此目的。
如果您只是鏈接它們，您可以將多個偵聽器映射到啓動事件列表中。
但是你想給他們一些自定義的等待週期，可以包括映射函數中，或者手工完成：

el.addEventListener('animation__scale1-complete', function() { 
    setTimeout(function(){ 
    el.emit('secondAnimation'); 
    },500); 
    }) 
    el.addEventListener('animation__scale2-complete', function() { 
    setTimeout(function(){ 
    el.emit('firstAnimation'); 
    },200); 
    }) 

工作小提琴這裏：https://jsfiddle.net/gftruj/2qoz8b75/2/
請注意，我觸發第一個動畫也在loaded事件中，以防事件在其加載之前觸發。