如何使用 a-frame 创建平滑的放大和缩小动画 onclick

Question

我一直在阅读 a-frame docs on animations。当我单击一个实体时，我希望它能够平滑地向前和向后缩放，即 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

来自docs： Direction - 确定动画的方向。使用备用
让它重复一次，这样动画就会回到它的起始位置。

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

如何使用 a-frame 创建平滑的放大和缩小动画 onclick

How to create a smooth zoom in and out animation onclick using a-frame

html

animation

aframe