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

Question

After reading A-Frame's animation docs and playing with different easing functions, I still can't make this example pulse out and back in:

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

Here is a codepen example of how it should animate.

Answer 1

You need to provide a direction for the animation - if you want it to alternate then use 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>

fiddle here .

---

also you can't make the radius go 0 because three will pop up an error:

THREE.DirectGeometry: Faceless geometries are not supported.

you can either change 0 -> 0.001, or animate the scale from 1 1 1 to 0 0 0