javascript - 每次迭代的随机 CSS 动画时间

Question

尝试在每次迭代时设置随机动画时间。我设置了一个 CSS 自定义属性 --animation-time 使用 JS 在每次动画迭代中随机更改。

let square = document.getElementById('square');
let time;

square.addEventListener('animationiteration', duration);

function duration() {
  time = Math.random() + 1;
  square.style.setProperty('--animation-time', time + 's');
  console.log(time);
}

:root {
  --animation-time: 5s;
  --color-1: #ff0000;
  --color-2: #ffee00;
}

@keyframes fire {
  0% {
    background-color: var(--color-1);
  }
  100% {
    background-color: var(--color-2);
  }
}

#square {
  width: 100px;
  height: 100px;
  animation: fire var(--animation-time) ease alternate infinite;
}

<div id="square"></div>

动画的持续时间设置为 time = Math.random() + 1; 因此，迭代时间不应少于 1 秒。然而，有时它发生得很快。为什么？

这是一个 CodePen:https://codepen.io/aitormendez/pen/YbvvKw

Answer 1

当您更改animation-duration时您不会简单地更改每次迭代的方式，而是会更改整个动画。例如，如果您有 3s作为持续时间，因此第一次迭代将花费 3s如果在 3s (迭代结束)您更改为 5s这就像您创建另一个动画，其中迭代将持续 5 秒，然后您跳转到该新动画的新状态，即 3s的5s .

这里有一个例子可以更好地说明这个问题。我将继续增加持续时间，您会注意到，一旦到达迭代结束，您将回到之前的状态，因为您增加了持续时间，然后您将再次到达最后一个状态，然后返回，依此类推。

就像有人跑向100%状态，并且不断增加该状态。

let square = document.getElementById('square');
let time = 1;

square.addEventListener('animationiteration', duration);

function duration() {
  time*=2;
  square.style.setProperty('--animation-time', time + 's');
  console.log(time);
}

:root {
  --animation-time: 1s;
}

@keyframes fire {
  0% {
    background-color: red;
  }
  50% {
    background:yellow;
  }
  100% {
    background-color: black;
  }
}

#square {
  width: 100px;
  height: 100px;
  animation: fire var(--animation-time) ease infinite alternate;
}

<div id="square"></div>

在上面的示例中，我将持续时间乘以 2，因此每次我都会跳回从 50% 开始。状态，一旦我到达 100%我会再次重复同样的事情。

---

您的代码也发生了同样的情况，但由于您增加/减少了持续时间，因此以更复杂的方式发生。减少持续时间将使您跳转到下一个迭代和备用状态。

换句话说，您将以随机闪烁的动画结束。

为了直观地说明这里发生的事情，我将在其中为您的动画的时间线设置动画

.box {
  height:50px;
  border:1px solid;
  background:
    /* This will illustrate the current state */
    linear-gradient(green,green) left/2px 100% no-repeat,
    /* This is our animation with a duration of 5s (50px) intially*/
    linear-gradient(to right,yellow,red,red,yellow) left/100px 100%;
   
  animation:
    move 10s linear infinite, /* This is the current state*/
    change 2s steps(3) infinite /* this is the change of the animation duration*/
  ; /**/
}

@keyframes move {
  to {
    background-position:right,left;
  }
}
@keyframes change {
  to {
    background-size:2px 100%,40px 100%;
  }
}

<div class="box">

</div>

您可以看到我们没有更改当前状态(如绿线所示)，但我们正在更改整个动画，使当前状态随机以不同颜色跳跃。

---

获得你想要的东西的一个想法是考虑转换和类切换:

let square = document.getElementById('square');
let time;

/* We intially add the class to trigger the transition*/
setTimeout(function(){square.classList.toggle('change')},10);

square.addEventListener('transitionend', duration);

/* When the transition is done we toggle the class to start another one*/
function duration() {
  time = Math.random() + 1;
  square.style.setProperty('--animation-time', time + 's');
  square.classList.toggle('change');
  console.log(time);
}

:root {
  --animation-time: 1s;
  --color-1: #ff0000;
  --color-2: #ffee00;
}

#square {
  width: 100px;
  height: 100px;
  transition: var(--animation-time) ease;
  background-color: var(--color-1);
}

#square.change {
  background-color: var(--color-2);
}

<div id="square"></div>