如何創建一個自定義組件來管理動畫？

如果您正在使用動畫組件- 您可以提供一個事件名稱，這將觸發動畫：

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

  }

})

在這個小提琴中查看