AFRAME动画——如何重用动画

Question

我想要一个像这样的不规则动画（这是在水滴的情况下）：滴没有什么滴滴滴没有什么没有什么有没有办法做到这一点或循环一个很长的滴水动画？

Answer 1

如何创建一个自定义组件来管理动画？

如果您正在使用动画组件- 您可以提供一个事件名称，这将触发动画：

<a-sphere id="driplet" animation="...; startEvents: drip">

现在你想“排队”动画：播放，等待，播放，播放，等待。因此，让我们通过使用固定间隔来发出drip事件或等待来做到这一点：

AFRAME.registerComponent("foo", {

  init: function() {

    // the mentioned "queue"

    const animationQueue = ["drip", "", "drip", "drip", ""]

    // grab the animations interval

    var interval = this.el.getAttribute("animation").dur

    // we'll use this to know where we are in the queue

    var animationIdx = 0;

    // set the event cycle

    var intervalIdx = setInterval(e => {

       // emit the event from the queue

       this.el.emit(animationQueue[animationIdx])

       // set the animationIdx to the 'next' item in queue

       if (animationIdx < animationQueue.length - 1)

         animationIdx++;

       else

         animationIdx = 0;

    }, interval);      

  }

})

在这个小提琴中查看