3

When I create an element of a-animation,I want to know the exact time when the animation finished.I know the "dur" or "begin" can calculate the approximate time,but is there any callback function when I use the a-animation element!

shadow
  • 43
  • 7

2 Answers2

6

You can listen to the animationend event on the a-animation element. Like so:

sphereAnimation.addEventListener('animationend', function () {
  sphere.setAttribute('color', '#88ff99');
});
<script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script>
<a-scene>
  <a-plane color="#EFED5E" rotation="45 0 0" scale="3 3 3" position="0 0 -3"></a-plane>
  <a-sphere id="sphere" color="#EF2D5E" position="0 0 -3">
    <a-animation 
      id="sphereAnimation" 
      attribute="position" 
      to="0 2 -3" 
      direction="alternate" 
      repeat="3" 
      easing="ease-in-out">
    </a-animation>
  </a-sphere>
</a-scene>
brianpeiris
  • 10,735
  • 1
  • 31
  • 44
1

The 'a-animation' tag is depricated in favour of animation="". You need to attach the event handler for the animationcomplete event to the object which is being animated. Here's what worked for me.

<html>
<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script>
        function sphereEventListener(){
            aSphere.addEventListener('animationcomplete', function(){
                console.log("Do something interesting here...");
            });
        };
    </script>
</head>
<body onload="sphereEventListener()">
    <a-scene>
        <a-sphere
            animation="dur: 1000; property: position; to: 5 0 -10"
            id="aSphere"
            position="-5 0 -10"
        >
        </a-sphere>
        <a-sky color="black"></a-sky>
    </a-scene>
</body>
Clarius
  • 1,183
  • 10
  • 10