3

当我创建一个a-animation的元素时，我想知道动画完成的确切时间。我知道“dur”或“begin”可以计算出大概的时间，但是我使用a时有没有回调函数-动画元素！

4

2 回答 2

6

您可以在 a-animation 元素上收听animationend事件。像这样：

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>

于 2016-06-13T06:47:56.130 回答
0

'a-animation' 标签被贬低，取而代之的是 animation=""。您需要将 animationcomplete 事件的事件处理程序附加到正在动画的对象。这对我有用。

<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>
于 2021-04-09T09:00:44.467 回答