如何设置 requestAnimationFrame 的持续时间答案

【问题标题】：How to set a duration for requestAnimationFrame如何设置 requestAnimationFrame 的持续时间
【发布时间】：2023-01-12 17:07:24
【问题描述】：

requestAnimationFrame 是创建基于 javascript 的动画的好解决方案。但我无法为此功能设置持续时间。我想播放动画一段时间。我尝试了一些 fps 解决方案，但这些解决方案并不顺利。

我怎样才能在 x 秒内注满水？

const water = document.querySelector('.water')
let scale = 0

const fillGlass = () => {
  scale += 0.01
  water.style.transform = `scaleY(${scale})`

  if (scale <= 1) {
    requestAnimationFrame(fillGlass)
  }
}

requestAnimationFrame(fillGlass)

.glass {
  margin: 100px;
  width: 150px;
  height: 250px;
  border: 3px solid #000;
  border-top: 0;
  border-bottom-width: 12px
}

.water {
  height: 100%;
  background-color: #BBDEFB;
  transform: scaleY(0);
  transform-origin: bottom center;
}

<div class="glass">
  <div class="water"></div>
</div>

【问题讨论】：

像这样简单的动画你可以写在css的keyframe。这样你就会有更多的控制权。
请记住，不同的显示器具有不同的帧速率，因此requestAnimationFrame 将根据显示器运行快或慢。例如，假设您设置 2 秒来完成动画。 120fps 显示器可能会在 1 秒内完成动画，而 60fps 显示器可能会在 3 秒内完成动画。
@Layhout 所以我不能使用它。你能建议任何其他解决方案吗？
我可以知道为什么必须用 js 完成吗？
@Layhout 因为我会玩，开始/停止，即时填充和即时空动作。是的，我知道我可以使用 animaton-play-state css 属性开始/停止动画，但我不能为填充和空动作设置动画。你可以在这里查看：jsfiddle.net/dhuj7x0w

标签： javascript html css requestanimationframe

【解决方案1】：

像这样定义简单的动画总是使用纯 CSS 更好，同样在这种情况下，它可以让您更好地控制动画本身。

.water {
  height: 100%;
  background-color: #BBDEFB;
  transform-origin: bottom center;
  animation-name: animation;
  animation-duration: 1s;
}

@keyframes animation {
  from { transform:scaleY(0) }
  to { transform:scaleY(1) }
}

【讨论】：

你好。 CSS 是简单有效的解决方案，但我只需要 JS。

【解决方案2】：

简单地说，你可以使用SetTimeout

const water = document.querySelector('.water')
let scale = 0

const fillGlass = () => {
  scale += 0.01
  water.style.transform = `scaleY(${scale})`

  if (scale <= 1) {
    setTimeout(fillGlass,10);
  }
}

requestAnimationFrame(fillGlass)

【讨论】：

谢谢，但它打破了流畅的动画。
根据您的解决方案，完成动画需要多长时间？如果 OP 希望动画持续 10 秒，他们如何使用您的解决方案实现它？

【解决方案3】：

很简单，你可以用animation-duration来控制它。如果你想添加动态值，我刚刚添加了一个参数来将值传递给CSS

.glass {
  margin: 100px;
  width: 150px;
  height: 250px;
  border: 3px solid #000;
  border-top: 0;
  border-bottom-width: 12px
}

.water {
  height: 100%;
  background-color: #BBDEFB;
  transform-origin: bottom center;
  animation-name: animation;
  animation-duration: var(--value);
}

@keyframes animation {
  from { transform:scaleY(0) }
  to { transform:scaleY(1) }
}

<div class="glass">
  <div class="water" style='--value:20s'></div>
</div>

你可以在 HTML 中更改 --value，它会影响 CSS

根据您的需要，在 JS 中

const water = document.querySelector('.water')
let scale = 0
let time = 20  // in  seconds

 const myInterval = setInterval(()=> {
  scale += 1/time
  water.style.transform = `scaleY(${scale})`
  if (scale >= 1) {
    clearInterval(myInterval);
  }
}, 1000);

.glass {
  margin: 100px;
  width: 150px;
  height: 250px;
  border: 3px solid #000;
  border-top: 0;
  border-bottom-width: 12px
}

.water {
  height: 100%;
  background-color: #BBDEFB;
  transform: scaleY(0);
  transform-origin: bottom center;
}

<div class="glass">
  <div class="water"></div>
</div>

【讨论】：

你好。这个动画不流畅。