嘲笑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事件中，以防事件在其加载之前触发。