2

I am brand new to A-frame so apologies if this is a very obvious question. Using A-frame with javascript, I am changing the attribute of various elements when an event occurs (in this case a mouseover of another element but I don't only want to be able to affect the moused element). How can you animate a change to an attribute within the component? Please see below an example of my question, when you gazeover the blue box the red box shifts position. This is a simple example but this is a more general question though about how to achieve this behaviour. You can see I include the animation script in the head but in the examples of this used it is only for constant behaviour and I don't know how to update it dynamically. I'm also aware of the animation tag I could add to the HTML but again I don't know how to affect this. Many thanks for any advice.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<!-- a-frame library -->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- a-frame animation plugin -->
<script src="scripts/animation.js"></script>
<script>
    AFRAME.registerComponent('cursor-listener', {
        //initiate
        init: function () {
            //add behaviour for mouse enter (or gaze enter)
            this.el.addEventListener('mouseenter', function (evt) {
                var otherBox = document.querySelector('#otherbox');
                otherBox.setAttribute('position', '-2 1 -4');
            });
        }//end initiate
    });//end registerComponent
</script>
</head>
<body>
<a-scene>
<a-sky>
</a-sky>
<a-box cursor-listener position="0 1 -4" color="blue">
</a-box>
<a-box id="otherbox" position="-1 1 -4" color="red">
</a-box>
<a-camera>
<a-cursor>
</a-cursor>
</a-camera>
</a-scene>

</body>
</html>
Nick
  • 914
  • 1
  • 10
  • 30

2 Answers2

4

I think you should implement the idea of events in your scripting. An Event can be anything that you can add an Eventlistener to like mouseenter, mouseleave click or when something has loaded. This way you will achieve way more dynamic behaviour.

So instead of your code changing the animation attribute of the other object directly, let it emit an event. In order to do so, change the line 

otherBox.setAttribute('animation', 'property: position; to: -2 1 -4');

to this line 

otherBox.emit('eventName')

you can then add an animation via the animation component of a-frame by adding this line inside your box entity

<a-animation begin="eventName" attribute="position" from="-1 1 -4" to="-2 1 -4"></a-animation>

if you want to end it on a certain event simply add another event listener, for example to mouse leave and give the animation an end="" attribute. For more information of what the animation attribute can do visit A-Frame Animation Doc If you want your animation to go back and forth you would need fill="both" and direction="alternate", note that the direction only works if you repeat the animation with repeat="value".

Hope this helps!

Riccardo
  • 145
  • 9
  • Hi Riccardo - thank you! That works well, I haven't come across .emit before. I will use this method for now however, I was hesitant to use the animation tag as some comments on github suggested that this would be deprecated in favour of an animation component so I didn't want to learn a pattern that would disappear. Anyway, thanks for your help and clear answer. – Nick Oct 30 '17 at 21:09
0

Ok, I have found a solution that seems to work. I set the attribute 'animation' and then add in the properties. It seems a bit strange to me. If anyone comes across this question it would be great to understand if there is better way of achieving this. Please see my solution below.

<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta name="description" content="Hello, WebVR! - A-Frame">
<!-- a-frame library -->
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
<!-- a-frame animation plugin -->
<script src="scripts/animation.js"></script>
<script>
    AFRAME.registerComponent('cursor-listener', {
        //initiate
        init: function () {
            //add behaviour for mouse enter (or gaze enter)
            this.el.addEventListener('mouseenter', function (evt) {
                var otherBox = document.querySelector('#otherbox');
                otherBox.setAttribute('animation', 'property: position; to: -2 1 -4');
            });
        }//end initiate
    });//end registerComponent
</script>
</head>
<body>
<a-scene>
<a-sky>
</a-sky>
<a-box cursor-listener position="0 1 -4" color="blue">
</a-box>
<a-box id="otherbox" position="-1 1 -4" color="red">
</a-box>
<a-camera>
<a-cursor>
</a-cursor>
</a-camera>
</a-scene>

</body>
</html>
Nick
  • 914
  • 1
  • 10
  • 30
  • One problem with this method seems to be that I cannot reverse the animation by setting the Attribute back to its original value on mouseleave, it does not seem to let me reset the dynamically added attribute – Nick Oct 29 '17 at 20:38