如何设置 requestAnimationFrame 的持续时间

Question

requestAnimationFrame是创建基于 javascript 动画的很好的解决方案。 但是我不能为这个 function 设置持续时间。我想播放动画一段时间。 我尝试了一些 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>

Answer 1

简单地说，您可以使用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>

您可以更改--value in HTML，它将影响 CSS

根据您的需要，在 JS 中

 const water = document.querySelector('.water') let scale = 0 let time = 2000 // 20 second * 100 const myInterval = setInterval(()=> { scale += 1/time water.style.transform = `scaleY(${scale})` if (scale >= 1) { clearInterval(myInterval); } }, 10);

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

更多功能

 const start = document.querySelector('.start') const stop = document.querySelector('.stop') const fill = document.querySelector('.fill') const empty = document.querySelector('.empty') const water = document.querySelector('.water') let scale = 0 let time = 2000 // 20 second * 100 let myInterval; start.addEventListener('click', () => { myInterval = setInterval(() => { scale += 1 / time water.style.transform = `scaleY(${scale})` if (scale >= 1) { clearInterval(myInterval); } }, 10); }) stop.addEventListener('click', () => { clearInterval(myInterval); }) fill.addEventListener('click', () => { scale = 1 water.style.transform = `scaleY(${scale})` }) empty.addEventListener('click', () => { scale = 0 water.style.transform = `scaleY(${scale})` })

 .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; }

 <button type="button" class="start">Start</button> <button type="button" class="stop">Stop</button> <button type="button" class="fill">Instant Fill</button> <button type="button" class="empty">Instant Empty</button> <div class="glass"> <div class="water"></div> </div>

Answer 2

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

.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) }
}

Answer 3

对于 animation 和平滑度，您可以将比例值除以所需的持续时间

const water = document.querySelector('.water')
let scale = 0
let time = 5000 //in seconds 1000=1sec
let duration = 100/time;
const fillGlass = () => {
  scale += duration;
  if(scale > 1){
    scale = 1;
  }
  water.style.transform = `scaleY(${scale})`
  if (scale <= 1) {
    requestAnimationFrame(fillGlass)
  }
}

requestAnimationFrame(fillGlass)