Animation 使用aframe.io链接动画

Animation 使用aframe.io链接动画,animation,aframe,Animation,Aframe,有没有办法在一帧中链接动画?我试图单击一次,将立方体移动到某个位置,保持该位置x时间,然后设置动画返回到原始位置 到目前为止,我只有2个动画,第二个动画是在收听animationend事件时开始的。问题是,然后两个动画都会发出animationend,这反过来会反复触发第二个动画。这种方法似乎不正确 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl

有没有办法在一帧中链接动画?我试图单击一次,将立方体移动到某个位置,保持该位置x时间,然后设置动画返回到原始位置

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

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

曲线图像
document.querySelector(“#橙色立方体”).addEventListener('animationend',function(){
document.querySelector(“#橙色立方体”).emit('fade');
});
//document.querySelector(“#橙色立方体”).emit('fade');

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

A-Frame公开tween.js对象,因此您可以自己连接它

二人组

我将编写我自己的新动画组件,希望能弃用受限制且不适合框架的标签。

D3方法

下面是一个例子,展示了你的要求(我希望如此!)。使用D3,您可以在第一次动画/过渡完成后安排第二次动画/过渡,方法是:

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

哇!我觉得动画标签很棒,看到新版本我很兴奋!到目前为止,我喜欢一切。它们是好的,但有局限性。我想使用组件系统,这样就可以使用simple
setAttribute
来定义它们,可以与mixin一起使用(因此也可以使用框架mss),更容易地添加诸如TimeLinen之类的功能。天哪!刚看到一架mss,很酷。好吧,我要说一件事。我相信你们,因为你们知道自己在做什么!我在开始使用动画的时候,会尝试添加序列支持。凯文,它们和格林斯托克一样深入吗?
.delay(1000)