动画帧在什么时间

Animate Frames Over What Time?

本文关键字：时间 在什么 动画      更新时间：2023-09-26

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

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

我当前的动画是(每帧100毫秒)左:[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>

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

相关文章：