<a-animation> 在框架 0.9.2 中不工作

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>

在我的 React 代码中，我从父级捕获了 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 中不工作

<a-animation> not working in aframe 0.9.2

javascript

aframe