Question

在阅读A-Frame's animation docs并使用不同的缓动功能后，我仍然无法使this example冲出和并返回：

<a-scene background="color: #FAFAFA">
   <a-entity id="mouseCursor" cursor="rayOrigin: mouse" raycaster="objects: #circle"></a-entity>
   <a-circle id="circle" color="black" position="0 1.8 -3" radius=".7" material="opacity: 0.5" animation="property: radius; from: 0; to: 0.7; dur: 1000; easing: easeInOutSine; loop: true;"></a-circle>
</a-scene>

这是codepen example的动画效果。

Answer 1

您需要为动画提供一个direction-如果您希望它交替显示，请使用dir: alternate：

<a-circle id="circle" color="black" position="0 1.8 -3" radius=".7" material="opacity: 0.5" 
         animation="property: radius; from: 0.01; to: 0.7; dur: 1000;
         easing: easeInOutSine; dir: alternate; loop: true;"></a-circle>

提琴here。

您也无法使半径达到0，因为三个会弹出错误：

THREE.DirectGeometry: Faceless geometries are not supported.

您可以将0-> 0.001更改为动画，也可以将scale从1 1 1设置为0 0 0

如何使A帧动画正确进出？

1 个答案: