功能上的 A 帧动画对象

【问题标题】：A-frame animate object on function功能上的 A 帧动画对象
【发布时间】：2021-07-16 19:32:00
【问题描述】：

我正在 A 帧中创建一个场景，我想知道如何创建一些东西，当一个名为 myFunction() 的函数发生时，动画将开始。如何才能做到这一点？当前代码：

<html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
     <a-box position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>
      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

【问题讨论】：

标签： aframe

【解决方案1】：

您可能希望在动画属性中使用startEvents

animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true"

为您的元素添加一个类或 id，以便您的函数可以识别您想要在命令上设置动画的元素

<a-box class="class_name" position="-1 1.6 -5" animation="startEvents: event-name; property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>

在函数中按其名称发出 startEvent

function animateBox() {
  document.querySelector('.class_name').emit('event-name');
}

【讨论】：