时间戳

首页 > 解决方案 > 如何正确地使 A-Frame 动画轻松进出？

javascript - 如何正确地使 A-Frame 动画轻松进出？

问题描述

在阅读了 A-Frame 的动画文档并使用了不同的缓动函数之后，我仍然无法让这个示例跳出并重新输入：

<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 示例。

标签： javascriptanimationaframe

解决方案

您需要为动画提供方向- 如果您希望它交替使用，请使用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>

在这里摆弄。

你也不能让半径走0，因为三个会弹出一个错误：

THREE.DirectGeometry: Faceless geometries are not supported.

您可以更改 0 -> 0.001，或将scalefrom设置1 1 1为动画0 0 0

推荐阅读