什么时候动画帧？

Question

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

我现在有这个动画是在每个100ms的5帧，但动画看起来有点战战兢兢。然后我增加到20帧每个50ms，但仍然看起来紧张。想知道是否有任何关于使缓和/滑动动画平滑的任何输入。我应该增加更多的帧？

我目前的动画（在100毫秒每帧） 左：X，X，X，X，X]

提前感谢！

Answer 1

这是更好地使用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> 

点击红色矩形会顺利移动它的权利。