A帧动画

Question

i have tried too far but the same result, when animation in a-frame triggered by a custom event it play that animation the same way from (x,y,z) to(x',y',z') and from (x'',y'',z'') to (x',y',z') i played around with a-animation attributes but never got a solution! 我已经尝试了太多，但结果相同，当自定义事件触发a帧中的动画时，从（x，y，z）到（x'，y'，z'）和从（ x''，y''，z''）到（x'，y'，z'）我一直在使用a动画属性，但从未找到解决方案！

                  <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');
                });

here is the test in codepen : http://codepen.io/anon/pen/OXaoKg 这是Codepen中的测试： http ://codepen.io/anon/pen/OXaoKg

Answer 1

Part of the problem here is that the clicks are repeatedly triggered. 这里的部分问题是重复触发了点击。 We can control that like this: 我们可以这样控制：

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 http://codepen.io/akademy/pen/MjMZVJ

A帧动画

问题描述

1 个解决方案

解决方案1
7 2016-10-31 11:08:02

A帧动画

问题描述

1 个解决方案

解决方案1 7 2016-10-31 11:08:02

解决方案1
7 2016-10-31 11:08:02