A-frame 多个带相机的动画

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

您可以使用 fact 那

任何动画都可以通过发出在 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>

或者如果你想对它们有更多的控制，你可以为你的动画制作一个 "manager" ：

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

A-frame 多个带相机的动画

A-frame multiple animations with camera

javascript

jquery

three.js

webvr

aframe