A-Frame 动画未在事件发射时开始

Question

我正在尝试在用户单击文本框后使用 a-animation 组件或 aframe-animation-component 为 A 框架中的平面设置动画。我想将飞机旋转到垂直位置，以便用户跌倒。动画在没有事件侦听器的情况下工作，但是当我将startEvents 或begin 属性添加到包含平面的a-entity 时，它无法触发。名为fallclick 的事件在被单击时从名为fallSelector 的文本a-entity 发出。

这是我的一段 HTML 代码：

<a-entity 
                static-body
                id="plane" 
                rotation="-90 0 0" 
                geometry="primitive: plane; width: 2; height: 2" 
<!--            animation="property: rotation; to: 0 0 0; delay: 500; startEvents: fallclick;" -->
                >
        <a-animation attribute="rotation" to="0 0 0" delay="500" dur="1000" begin="fallclick" ></a-animation>
</a-entity>

这里是 JavaScript 事件代码：

fallSelector.addEventListener('click', function () {
            fallSelector.emit('fallclick');
            console.log(fallSelector + ': Emit fallclick');
});

Answer 1

1) 对于<a-animation> 组件，您需要在动画原语上发出事件：

<a-animation id="my-animation" begin="foo"></a-animation>
<!-- js: my-animation.emit("foo") --!>

2) 对于动画组件，您需要在包含动画的实体上发出事件

<a-entity id="bar" animation="startEvents: foo"></a-entity>
<!-- js: bar.emit("foo") --!>

现场小提琴here