Question

有没有办法在aframe链接动画？我试图一次点击将立方体移动到一个位置，保持该位置x个时间，然后动画回原始点。

到目前为止，我只有2个动画，第二个是在听动画事件时开始的。问题是，然后两个动画都会发出动画，然后反复触发第二个动画。这种方法似乎不正确

    <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Curved Images</title>
    <meta name="description" content="Curved Images - A-Frame">
   <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
  </head>
  <body>

    <a-scene>
    <a-entity position="0 1.8 4">
    <a-entity camera look-controls wasd-controls>
        <a-entity position="0 0 -3"
                geometry="primitive: ring; radiusOuter: 0.30;
                          radiusInner: 0.20;"
                material="color: cyan; shader: flat"
                cursor="maxDistance: 30; fuse: true">
        <a-animation begin="click" easing="ease-in" attribute="scale"
             fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale"
             fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
      </a-entity>
      </a-entity>

      <a-box id="orange-cube" position="0 3.5 -2" rotation="30 30 0" width="2" depth="2"
             height="2" color="#583C87" roughness="0.8">
             <a-animation begin="click" attribute="position" from="0 3.5 -2" to="3 2 -2"
                   easing="linear" dur="2000" fill="forward"></a-animation>
            <a-animation begin="fade" attribute="position" from="3 2 -2" to="0 3.5 -2"
                   easing="linear" dur="2000" fill="backwards"></a-animation>
      </a-box>

    </a-scene>
    <script type="text/javascript">
    document.querySelector('#orange-cube').addEventListener('animationend', function () {
    document.querySelector('#orange-cube').emit('fade');
  });
//document.querySelector('#orange-cube').emit('fade');
    </script>
  </body>

</html>

Answer 1

您可以通过animationEl.play()来播放动画。您可以编写一些JS来根据您想要的条件触发动画。声明性API（A-Frame 0.2.0）目前不支持动画序列。

Answer 2

D3方法。

这是一个CodePen example，展示了你的要求（我希望！）。使用D3，您可以在第一次完成后安排第二次动画/过渡：

.each('end', <function>);

我不确定将立方体保持在新位置的时间有多长，如果1秒太短，您可以通过修改第19行（以毫秒为单位）来改变延迟：

.delay(1000)

Answer 3

A-Frame公开了tween.js对象，因此你可以自己连接它。

AFRAME.TWEEN

https://github.com/tweenjs/tween.js/

我将编写自己的新动画组件，希望弃用有限且不适合框架的<a-animation>标签。

链接动画与aframe.io的链

3 个答案: