Как сделать так, чтобы анимация A-Frame была удобной и правильной? - PullRequest
Новая
       25

Как сделать так, чтобы анимация A-Frame была удобной и правильной?

0 голосов
/ 26 июня 2019

После прочтения анимационных документов 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>

Вот пример кода того, как он должен анимироваться.

1 Ответ

0 голосов
/ 26 июня 2019

Вам необходимо указать направление для анимации - если вы хотите, чтобы оно чередовалось, используйте 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 здесь .

также вы не можете заставить радиус идти 0, потому что три вызовет ошибку: 

THREE.DirectGeometry: Faceless geometries are not supported.

вы можете либо изменить 0 -> 0,001, либо анимировать scale от 1 1 1 до 0 0 0

...