A帧随机动画延迟

Question

我正在使用 A 帧 (https://aframe.io) 创建场景，并且我目前正在我的场景中使用动画。我想知道如何随机化我的动画延迟，以便动画从 0 到 2 秒的随机量延迟。如何才能做到这一点？我当前的代码：

 <html>
  <head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      
      
      <!--Animte the box with a ranom delay from 0 - 2 seconds. -->
      <a-box position="-1 1.6 -5" animation="property: position; delay: 1000; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-box>

      <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

我目前将延迟设置为 1000（1 秒，因为延迟以毫秒为单位）。相反应该发生的是延迟应该是 0 - 2000 之间的随机数，因为 2000 毫秒是 2 秒。如何做到这一点？

Answer 1

仅在开始时随机延迟 - 第一个周期

使用自定义组件注册 a-box 组件，该组件将执行数学运算并将其应用于 a-box 上的动画 <a-box position="-1 1.6 -5" random-delay animation color="tomato"></a-box>。

构建custom aframe component：

    AFRAME.registerComponent('random-delay', {
        init: function (el) {
         // this.el points to the element the component is placed on 
         var el = this.el;

        }
    });

设置最小值和最大值

    AFRAME.registerComponent('random-delay', {
        init: function (el) {
            var el = this.el;
            var min = 0;
            var max = 2000;

        }
    });

Math.floor(Math.random() * (max - min + 1)) + min returns 最小值和最大值之间的整数随机数，然后我们为动画构建字符串：

    AFRAME.registerComponent('random-delay', {
        init: function (el) {
            var el = this.el;
            var min = 0;
            var max = 2000;

            // generates a random number between the set min and max
            var delay = Math.floor(Math.random() * (max - min + 1)) + min;
            var animation = `property: position; delay: ${delay}; from: -1 1.6 -5; to: 1 8 -10; dur: 2000; easing: linear; loop: true`

        }
    });

应用带有 .setAttribue():

    AFRAME.registerComponent('random-delay', {
        init: function (el) {
            var el = this.el;
            var min = 0;
            var max = 2000;

            // generates a random number between the set min and max
            var delay = Math.floor(Math.random() * (max - min + 1)) + min;
            // builds the string for the animation
            var animation = `property: position; delay: ${delay}; to: 1 8 -10; dur: 2000; easing: linear; loop: true`

            // updating the animation component with the .setAttribute() function
            el.setAttribute('animation', animation)

        }
    });

每个动画周期随机延迟

将这些代码行放入一个新函数中：

function setAnimation(min, max) {
    // generates a random number between the set min and max
    var delay = Math.floor(Math.random() * (max - min + 1)) + min;
    var animation = `property: position; delay: ${delay}; from: -1 1.6 -5; to: 1 8 -10; dur: 2000; easing: linear; `
    console.log(delay);
    // updating the animation component with the .setAttribute function
    el.setAttribute('animation', animation)
}

在每个 animationcomplete 事件中使用我们创建的函数设置一个新动画

function setAnimation(min, max) {
    // generates a random number between the set min and max
    var delay = Math.floor(Math.random() * (max - min + 1)) + min;
    var animation = `property: position; delay: ${delay}; from: -1 1.6 -5; to: 1 8 -10; dur: 2000; easing: linear; `
    console.log(delay);
    // updating the animation component with the .setAttribute function
    el.setAttribute('animation', animation)
}

结果应如下所示：

<html>

<head>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

<script>
    AFRAME.registerComponent('random-delay', {
        init: function (el) {
            // this.el points to the element the component is placed on 
            var el = this.el;
            let min = 0;
            let max = 2000;
            // initial animation
            setAnimation(min, max)

            function setAnimation(min, max) {
                // generates a random number between the set min and max
                let delay = Math.floor(Math.random() * (max - min + 1)) + min;
                let animation = `property: position; delay: ${delay}; from: -1 1.6 -5; to: 1 8 -10; dur: 2000; easing: linear; `
                console.log(delay);
                // updating the animation component with the .setAttribute function
                el.setAttribute('animation', animation)
            }
            el.addEventListener('animationcomplete', () => {
                setAnimation(min, max)
            });
        }
    });
</script>

<body>
    <a-scene>
        <a-box position="-1 1.6 -5" random-delay animation autoplay color="tomato">
        </a-box>

        <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
</body>

</html>

A帧随机动画延迟

A-frame random animation delay

3d

animation

three.js

webvr

aframe

仅在开始时随机延迟 - 第一个周期

每个动画周期随机延迟