帶相機的 A 幀多個動畫

Question

我有一些使用 A 幀 ( https://aframe.io ) 的相機代碼，我想知道如何添加多個連續動畫。 我希望這樣當我的第一個動畫完成時，另一個動畫會觸發，並且在第一個動畫完成后相機會向左移動 5 個空格。 如何才能做到這一點？ 我當前的代碼：

<a-entity id="rig" position="0 1.6 0" animation="property: position; delay: 2000; dur: 7000; easing: linear; to: 0 1.6 -25">
  <a-entity id="camera" wasd-controls camera look-controls></a-entity>
</a-entity>

Answer 1

您可以使用以下 事實

• 任何動畫都可以通過發出startEvents屬性中定義的信號來啟動
• 您可以通過監聽animationcomplete事件來確定動畫何時結束。

您可以使用startEvents屬性中的animationcomplete信號來鏈接動畫：

 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-entity id="rig" position="-1 1.6 0" animation__first="property: position; dur: 750; to: 1 1.6 0; startEvents: animationcomplete__second, loaded;" animation__second="property: position; dur: 750; to: -1 1.6 0; startEvents: animationcomplete__first" foo> <a-entity id="camera" camera look-controls></a-entity> </a-entity> </a-scene>

---

或者，如果您想對它們進行更多控制，可以為您的動畫制作一個“管理器”：

 <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script> AFRAME.registerComponent("foo", { init: function() { this.signalName = "signalone"; // when the animation is finished, fire the other one this.el.addEventListener("animationcomplete", e => { // wait a while and start the other animation this.signalName = this.signalName == "signalone" ? "signaltwo" : "signalone"; setTimeout(e => { this.el.emit(this.signalName) }, 500) }) this.el.emit(this.signalName) } }) </script> <a-scene> <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box> <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere> <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder> <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane> <a-entity id="rig" position="-1 1.6 0" animation__first="property: position; dur: 500; easing: linear; to: 1 1.6 0; startEvents: signalone;" animation__second="property: position; dur: 500; easing: linear; to: -1 1.6 0; startEvents: signaltwo" foo> <a-entity id="camera" camera look-controls></a-entity> </a-entity> </a-scene>