如何为框架中的环面设置动画/更改颜色？

Question

我正在学习如何使用 a-frame，以便开始深入研究 AR 技术。我正在关注有关动画颜色的在线教程，但我不确定该教程是否向我展示了正确的方法，因为似乎没有动画效果。

我已经在教程中查看了他的代码并尝试查看 a-frame -> a-animation 文档，但仍然没有任何运气

<a-scene>
    <a-torus position="-2 1 -5" color="green" radius="1.2">
        <a-animation attribute="color" 
            from="green" 
            to="red"
            dur="100"
            repeat="indefinite"
        ></a-animation>
    </a-torus>
    <a-sky color="#ECECEC"></a-sky>
</a-scene>

它应该在颜色之间循环，但我觉得我已经看了这个圆环几分钟了，但仍然没有看到任何区别。

Answer 1

<a-animation> 元素自框架 0.9.0 以来已被弃用。动画实体被制作成一个组件。

它有很好的记录 here，在你的情况下，它是：

<a-torus position="-2 1 -5" color="green" radius="1.2" 
      animation="property: components.material.material.color;
                 type: color;
                 to: blue;
                 dur: 500;
                 dir: alternate;
                 loop: true"></a-torus>

检查一下：

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<a-scene>
  <a-torus position="-2 1 -5" color="green" radius="1.2" animation="property: components.material.material.color;
     type: color;
     to: blue;
      dur: 500;
      dir: alternate;
      loop: true">
  </a-torus>
  <a-sky color="#ECECEC"></a-sky>
</a-scene>

---

实际上component 是由 Kevin Ngo 更早提出的。据我所知，它已集成到核心库中并替换了刚才的<a-animation>。