Question

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

Answer 1

您可以在a-animation元素上收听MSDN DataGridView.DataSourceProperty。像这样：

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>

Answer 2

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

Aframe中是否有任何回调函数<a-animation>

2 个答案: