A-frame animation

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!

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

    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

What is your goal? It looks like your project seems to work, you get animations when you look at each object. — msj121, Aug 09 '16 at 21:18
the problem is when i look at the previous object, the camera move from the previous object to the current object and not the reverse (i want it to move from the current position to previous object position) — Bochkati Mohamed Amine, Aug 16 '16 at 10:09
When I look at the previous object it snaps into view as the center.... — msj121, Aug 17 '16 at 19:28
The problem is the animation *only* moves in one direction from One to Two, or Two to Three - there is no reverse animation. Also, the animation is called constantly because you keep looking at (/clicking on) one of the planes which triggers both a jump back then the animation forward. (Unfortunately I don't know the best way to fix this.) — Matthew Wilcoxson, Oct 26 '16 at 20:27

score 7 · Answer 1 · answered Oct 31 '16 at 11:08

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

Alternatively, increase the `fuseTimeout` on the cursor. `cursor="fuse: true; maxDistance: 30; timeout: 1500"` — ngokevin, Oct 31 '16 at 13:55

A-frame animation

1 Answers1