Question

我尝试通过动画更改嵌套子元素的半径。我的代码如下：

<a-sphere id="outer-sphere" radius="0.6" material="color:white;opacity: 0.6">
    <a-sphere id="inner-sphere" radius="0.1" material="color:red; opacity: 0.6">
        <a-animation property="radius" from="0.1" to="0.6" begin="fillSphere"></a-animation>
    </a-sphere>
</a-sphere>

在我的反应代码中，我从父级捕获了mouseOver事件

const onMouseEnter = (e) => {
   const innerSphere = e.target.querySelector('#inner-sphere');
   innerSphere.emit("fillSphere");
}

但是什么也没发生。还是有另一种方式来动画子实体。例如，使用Aframe动画属性。我在A-Frame文档中找不到任何内容。

我在0.9.2版中使用A-Frame

Answer 1

<a-animation>中不推荐使用a-frame 0.9.0元素，而推荐使用animation组件。

看起来应该像这样：

<a-sphere id="outer-sphere" radius="0.6" material="color:white;opacity: 0.6">
    <a-sphere id="inner-sphere" radius="0.1" material="color:red; opacity: 0.6"
              animation="property: radius; from: 0.1; to: 0.6: startEvents: fillSphere">
    </a-sphere>
</a-sphere>

<a-animation>在0.9.2框架中无法正常工作

1 个答案: