如何使 A 帧动画正确地缓入和缓出？

Question

读完 A-Frame's animation docs and playing with different easing functions, I still can't make 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>

fiddle here.

你也不能让半径变成0因为三个会弹出错误:

THREE.DirectGeometry: Faceless geometries are not supported.

您可以更改 0 -> 0.001，或者将 scale 从 1 1 1 动画化为 0 0 0

如何使 A 帧动画正确地缓入和缓出？

How do I make an A-Frame animation ease in and out correctly?

javascript

animation

aframe