什麼時候動畫幀？

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> 

點擊紅色矩形會順利移動它的權利。