Question

我正在尝试动画将相机从当前位置移动到从单击元素传递的位置。问题似乎在于将“到”位置传递给动画的正确语法。这就是我所拥有的。

<a-entity id="cam-position" position="0 0 1.2" rotation="-0 0 0">
        <a-camera look-controls wasd-controls>
          <a-entity visible="true" cursor="fuse: true; fuse-timeout: 500"
                position="0 0 -1"
                scale="0.01 0.01 0.01"
                geometry="primitive: sphere"
                material="color: #6AD7FF; shader: standard">
                <a-animation begin="click" 
                  easing="ease-in" 
                  attribute="scale" 
                  dur="2000"
                  fill="backwards" 
                  from="0.01 0.01 0.01" to="0.04 0.04 0.04">
                </a-animation>
                <a-animation begin="fusing" 
                  easing="ease-in" 
                  attribute="scale"
                  fill="forwards" 
                  from="1 1 1" to="0.1 0.1 0.1" >
                </a-animation>
          </a-entity> 
        </a-camera>
      <a-animation begin="move" 
                  attribute="position"
                  dur="2000"
                  from="0 0 1.2"
                  >
                </a-animation>
      </a-entity>

document.querySelector('#cam-position').emit('move',{'to': { x: 0, y: 0, z: -88 } });

没有第二个参数和a-animation中指定的'to'，它可以正常工作。有任何想法吗？感谢

Answer 1

当您发出move时，第二个参数是事件详细信息。动画确实具有在事件触发器上启动动画的功能，但它不会查看事件详细信息。

您需要执行animation.setAttribute('to', {...})而不是尝试让事件处理所有内容，因为这不是一项功能。

document.querySelector('a-animation[begin="move"]').setAttribute('to', '0 0 -88');
document.querySelector('#cam-position').emit('move')

作为第二个参数传递数据的A帧位置动画

1 个答案: