如何使用 a 帧在单击时创建平滑的放大和缩小动画

Question

我一直在阅读有关动画的a帧文档。当我单击一个实体时，我希望它平滑地向前缩放，然后向后缩放，即 from -> to -> from

也许有一个简单的解决方案，但到目前为止我得到的最接近的是使用它：

<a-animation 
 attribute='scale'
 dur='500'
 from='1 1 1'
 to='3 3 3'
 fill='backwards'
 begin='click'>
</a-animation> 

fill='backwards'动画完成后将动画恢复到from状态，但效果并不顺利。

---

有没有一种简单的方法来对from -> to -> from进行动画处理？

下面是一个示例：

<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script>
<a-scene>
  <a-entity camera look-controls>
    <a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'>
    </a-entity>
  </a-entity>
  <a-entity geometry='primitive:box' position='0 0 -5'>
    <a-animation attribute='scale' dur='500' from='1 1 1' to='3 3 3' fill='backwards' begin='click'></a-animation>
  </a-entity>
</a-scene>

Answer 1

从文档中：方向 - 确定动画的方向。使用备用
使其重复一次，以便动画返回到其起始位置。

<script src='https://cdnjs.cloudflare.com/ajax/libs/aframe/0.7.1/aframe.js'></script>
<a-scene>
  <a-entity camera look-controls>
    <a-entity geometry='primitive: ring;radiusOuter: 0.10;radiusInner: 0.05;' material='color: red;' position='0 0 -3' cursor='maxDistance: 30; fuse: false'>
    </a-entity>
  </a-entity>
  <a-entity geometry='primitive:box' position='0 0 -5'>
    <a-animation attribute='scale' dur='500' direction='alternate' from='1 1 1' to='3 3 3' begin='click' repeat='1'></a-animation>
  </a-entity>
</a-scene>