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

Question

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

这是我的 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") --!>

直播fiddlehere

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

A-Frame Animation not starting on event emission

javascript

animation

aframe