什么时候动画帧？

问题描述：

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

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

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

提前感谢！

动画仅是光滑的，以在60fps人眼，它是每帧约16毫秒。这是计算机屏幕上大多数内容的默认动画标准。这也是window.requestAnimationFrame默认为每秒帧数，并且您应该使用requestAnimationFrame来处理大多数基于浏览器的动画计时。 –

@AndyRay。 30fps做一个愚弄眼睛的公平工作。 – markE

每帧移动较小的增量。 – markE

答

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

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

什么时候动画帧？

相关推荐