Question

我正在尝试使用速度JS对时间轴进行动画处理，但是我似乎无法使其平滑地进行动画处理。下面的代码段说明了该问题。

const animate = (currentSecond, totalSeconds) => {
  const currentPercentage = (100 / totalSeconds * currentSecond);
  Velocity(document.getElementById('bar'), {
    width: currentPercentage + '%',
    easing: 'linear'
  },
  {
    duration: 1000
  });
};

animate(1, 20);
animate(2, 20);
animate(3, 20);
animate(4, 20);
animate(5, 20);
animate(6, 20);
animate(7, 20);
animate(8, 20);
animate(9, 20);
animate(10, 20);
animate(11, 20);
animate(12, 20);
animate(13, 20);
animate(14, 20);
animate(15, 20);
animate(16, 20);
animate(17, 20);
animate(18, 20);
animate(19, 20);
animate(20, 20);

console.log("Done adding everything to the queue");

#root {
  width: 100%;
  height: 100%;
}

#container {
  width: 100%;
  height: 20px;
  background-color: #000000;
}

#bar {
  width: 0;
  height: 100%;
  background-color: #FF0000;
}

#description {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.11/lodash.min.js"></script>
<div id='root' style='width: 100%; height: 100%'>
  <div id='container'>
    <div id='bar'/>
  </div>
  <div id='description'>
    <div>00:00</div>
    <div>00:20</div>
  </div>
</div>

如您在代码段中所见，该条每秒移动一次，但您可以看到它停止并重新开始。我知道我可以将宽度设置为100％，将持续时间设置为总秒数，以使其成为单个动画，但是我真的很想知道是否有可能使一秒钟的多个动画接连发生。 >

Velocity JS在多个排队动画之间的平滑过渡

0 个答案: