A-frame动画

Question

A-frame动画

10

我已经尝试了很多次，但结果都一样。当在A-Frame中通过自定义事件触发动画时，它会以相同的方式从（x，y，z）到（x'，y'，z'）以及从（x''，y''，z''）到（x'，y'，z'）播放该动画。我尝试过更改a-animation属性，但始终没有找到解决方案！

                  <html>
              <body>
                <script src="https://aframe.io/releases/0.2.0/aframe.min.js"></script>
                <script src="https://rawgit.com/ngokevin/aframe-layout-component/master/dist/aframe-layout-component.min.js"></script>
                <a-scene>
                  <a-entity id="gallery" layout="type: line; margin: 1.2" position="0 0 3">

                    <a-plane id="one" color="#CCC" look-at="[camera]"></a-plane>
                    <a-plane id="two" color="#CCC" look-at="[camera]"></a-plane>
                    <a-plane id="three" color="#CCC" look-at="[camera]"></a-plane>
                    </a-entity>
              <!--camera & env -->
                <a-camera position="0 0 4" id="camera">
                  <a-entity cursor="fuse: true; maxDistance: 30; timeout: 500"
                    position="0 0 -.6"
                    scale=".01 .01 .01"
                    geometry="primitive: ring"
                    material="color: green; shader: flat">
              </a-entity>
              <a-animation attribute="position"
                begin="one"
                to="0 0 4"
                dur="1000"
                fill="forwards"
                easing="ease-in-out-cubic"></a-animation>
                <a-animation attribute="position"
                  begin="two"
                  to="1 0 4"
                  dur="1000"
                  fill="forwards"
                  easing="ease-in-out-cubic"></a-animation>
                <a-animation  attribute="position"                 begin="three"                                                          dur="1000"                                                            fill="forwards"
              to="2 0 4"
              easing="ease-in-out-cubic"></a-animation>

                </a-camera>

                <a-sky color="#ECECEC"></a-sky>
                <a-light type="directional" color="#fff" intensity="0.2" position="-1 2 1"></a-light>
                <a-light type="ambient" color="#fff"></a-light>
              </a-scene>
              </body>
              </html>

Javascript :

JavaScript:

    var one =     document.querySelector('#one');
    var two = document.querySelector('#two');
    var three = document.querySelector('#three');
    one.addEventListener('click', function () {
              camera.emit('one');
              });
    two.addEventListener('click', function () {
              camera.emit('two');
                        });

    three.addEventListener('click', function () {
              camera.emit('three');
                });

这是在Codepen上的测试：

http://codepen.io/anon/pen/OXaoKg

- Bochkati Mohamed Amine

你的目标是什么？看起来你的项目似乎在工作，当你查看每个对象时会得到动画效果。 - msj121

问题在于当我查看前一个对象时，相机会从前一个对象移动到当前对象，而不是相反的方向（我希望它从当前位置移动到前一个对象的位置）。 - Bochkati Mohamed Amine

当我查看以前的对象时，它会快速地出现在中心位置。 - msj121

问题在于动画仅从One到Two或从Two到Three向一个方向移动，没有反向动画。此外，由于您不断查看/点击其中一个飞机，触发跳回和动画前进，因此动画会不断调用。（不幸的是，我不知道修复这个问题的最佳方法。） - Matthew Wilcoxson

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Wilcoxson · Accepted Answer

这里的问题之一是点击事件反复触发。我们可以通过如下方式来控制：

var at = "one";

one.addEventListener('click', function () {
  if( at !== "one") {
    at = "one";
    camera.emit('one');
  }
});
two.addEventListener('click', function () {
  if( at !== "two") {
    at = "two";
    camera.emit('two');
  }
});

three.addEventListener('click', function () {
  if( at !== "three") {
    at = "three";
    camera.emit('three');
  }
 });

http://codepen.io/akademy/pen/MjMZVJ