仅在开始时随机延迟 - 第一个周期
使用自定义组件注册 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 返回一个介于 min 和 max 之间的整数随机数，然后我们为动画构建字符串：
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>