Question

我想在单个实体（例如：User-Retry for Workflow Actions (since Oozie 3.1)）的单个属性（例如：scale）上创建一个动画，它将使用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个500毫秒的.1 .1 1到.5 .5 1，然后再保持.5 .5 1再持续500毫秒，然后回到.1 .1 1接下来的200ms，然后无限循环遍历整个过程。

这甚至可能吗？

Answer 1

您可以菊花链接组件中的动画，检查哪个动画结束并开始下一个动画。
在您的情况下，将是

animation1结束 - ＆gt;等待500ms并开始动画2 - ＆gt; animation2结束 - ＆gt;等待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事件上触发第一个动画，以防它在加载之前触发。

在K-Frame（VR）中模拟CSS关键帧动画

1 个答案: