时间戳

首页 > 解决方案 > 不在框架 0.9.2 中工作

javascript - 不在框架 0.9.2 中工作

问题描述

我尝试使用动画更改嵌套子元素的半径。我的代码如下所示：

<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

标签： javascriptaframe

解决方案

该<a-animation>元素已被弃用，a-frame 0.9.0取而代之的是动画组件。

它应该看起来像这样：

<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>

推荐阅读