在 K-Frame (VR) 中模拟 CSS 关键帧动画答案

【问题标题】：Mocking CSS key frame animation in K-Frame (VR)在 K-Frame (VR) 中模拟 CSS 关键帧动画
【发布时间】：2017-07-26 21:59:49
【问题描述】：

我想在单个实体（例如：a-circle）的单个属性（例如：比例）上创建一个动画，该动画将使用K-Frame 一个接一个地运行。这可能吗？

例如，这将是一个简单的案例：

<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>

例如，我想在前 500 毫秒内从 .1 .1 1 缩放到 .5 .5 1，然后在 0.5 .5 1 再保持 500 毫秒，然后在接下来的 200 毫秒，然后无限循环整个过程。

这可能吗？

【问题讨论】：

标签： animation aframe virtual-reality

【解决方案1】：

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

animation1 结束 -> 等待 500 毫秒并开始动画 2 -> 动画 2 结束 -> 等待 200 毫秒并开始动画 1。

您可以通过简单地监听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 事件上触发第一个动画，以防它在加载之前触发。

【讨论】：

这太棒了。谢谢。