Javascript 在什么时间设置帧的动画？

我正在尝试为一个图像设置动画。这是一个从左向右移动的简单动画。这最终将是由用户下载的gif

我目前有5帧的动画，每帧100毫秒，但动画看起来有点紧张。然后我增加到20帧，每帧50毫秒，但仍然看起来很紧张。想知道是否有任何关于使easein/slidein动画平滑的输入。我应该增加更多的帧吗

我当前的动画是（每帧100毫秒） 左：[x，x，x，x，x]

---

提前谢谢

为此，最好使用CSS动画。它工作起来更流畅，代码也更简单。以下是一个例子：

<style>
  #movie {
    transition-property: left;
    transition-duration: 1s;
    transition-timing-function: linear;
    width:100px;
    height:100px;
    background-color:red;
    position:absolute;
    left:100px;
    top:100px;
  }
</style>

<script>
  function move(d) {
    d.style.left = '500px';
  }
</script>

<div id="movie" onclick="move(this)"></div>

#电影{
过渡属性：左；
过渡时间：1s；
过渡时间函数：线性；
宽度：100px；
高度：100px；
背景色：红色；
位置：绝对位置；
左：100px；
顶部：100px；
}
功能移动（d）{
d、 style.left='500px'；
}

---

单击红色矩形将平滑地向右移动。

动画仅对人眼平滑，速度为60帧/秒，约为每帧16毫秒。这是计算机屏幕上大多数东西的默认动画标准。这也是window.requestAnimationFrame默认为每秒帧数的值，对于大多数基于浏览器的动画计时，您应该使用requestAnimationFrame。@AndyRay。30fps可以很好地愚弄眼睛。每帧移动较小的增量。