AFRAME动画——如何重用动画

Question

我想要一个像这样的不规则动画（这是在水滴的情况下）：

滴

没有什么

滴

滴

滴

没有什么

没有什么

有没有办法做到这一点或循环一个很长的滴水动画？

Answer 1

如何创建一个自定义组件来管理动画？如果您正在使用动画组件- 您可以提供一个事件名称，这将触发动画：<a-sphere id="driplet" animation="...; startEvents: drip">现在你想“排队”动画：播放，等待，播放，播放，等待。因此，让我们通过使用固定间隔来发出drip事件或等待来做到这一点：AFRAME.registerComponent("foo", {&nbsp; init: function() {&nbsp; &nbsp; // the mentioned "queue"&nbsp; &nbsp; const animationQueue = ["drip", "", "drip", "drip", ""]&nbsp; &nbsp; // grab the animations interval&nbsp; &nbsp; var interval = this.el.getAttribute("animation").dur&nbsp; &nbsp; // we'll use this to know where we are in the queue&nbsp; &nbsp; var animationIdx = 0;&nbsp; &nbsp; // set the event cycle&nbsp; &nbsp; var intervalIdx = setInterval(e => {&nbsp; &nbsp; &nbsp; &nbsp;// emit the event from the queue&nbsp; &nbsp; &nbsp; &nbsp;this.el.emit(animationQueue[animationIdx])&nbsp; &nbsp; &nbsp; &nbsp;// set the animationIdx to the 'next' item in queue&nbsp; &nbsp; &nbsp; &nbsp;if (animationIdx < animationQueue.length - 1)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animationIdx++;&nbsp; &nbsp; &nbsp; &nbsp;else&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;animationIdx = 0;&nbsp; &nbsp; }, interval);&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; }})在这个小提琴中查看